Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

[How-To] Вывод изображений при выборе подкатегорий


Рекомендованные сообщения

Итак, возможно, настало время попытаться отдать долг обществу. Подобной инструкции на OpenCart 2.0.2.0 не нашёл, пришлось самому порыться в кодах.

Работаю на шаблоне default, инструкцию пишу именно для этого шаблона, но на другие тоже возможно подойдёт.

Здесь я расскажу, как я реализовал вывод изображений в подкатегориях, и, надеюсь, что у вас получится.

Как будет выглядеть в итоге? (зависит от вашего stylesheet.css)

 

-kw9b4sry-Y.jpg

 

Итак, начнём!
ШАГ 1 (придумал не я)
Открываем документ catalog/controller/product/category.php
Находим в нём эти строки:

foreach ($results as $result) {
	$filter_data = array(
		'filter_category_id'  => $result['category_id'],
		'filter_sub_category' => true
	);

После этих строк добавляем следующие:

if ($result['image']) {
    $image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
                      }
    else {
          $image = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
          }

Далее находим:

'name'  => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),

Дописываем после:

'thumb' => $image,

ШАГ 2
Открываем документ catalog/view/theme/default/template/product/category.tpl
Находим в нём следующий строки:

      <?php if ($categories) { ?>
      <h3><?php echo $text_refine; ?></h3>
      <?php if (count($categories) <= 5) { ?>
      <div class="row">
        <div class="col-sm-3">
          <ul>
            <?php foreach ($categories as $category) { ?>
            <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
            <?php } ?>
          </ul>
        </div>
      </div>
      <?php } else { ?>
      <div class="row">
        <?php foreach (array_chunk($categories, ceil(count($categories) / 4)) as $categories) { ?>
        <div class="col-sm-3">
          <ul>
            <?php foreach ($categories as $category) { ?>
            <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
            <?php } ?>
          </ul>
        </div>
        <?php } ?>
      </div>
      <?php } ?>
      <?php } ?>

Заменяем эти строки на:

      <?php if ($categories) { ?>
      <h3><?php echo $text_refine; ?></h3>
      <div class="row">
            <?php foreach ($categories as $category) { ?>
            <div class="product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12">
			<div class="product-thumb">
			<div class="category-caption"><h4><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></h4></div>
            <div class="image"><img src="<?php echo $category['thumb']; ?>" title="<?php echo $category['name']; ?>" alt="<?php echo $category['name']; ?>" width="200px" height="200px"/></a></div>
			</div>
			</div>
            <?php } ?>
      </div>
      <?php } ?>

ШАГ 3
Заходим в файл catalog/view/theme/default/stylesheet/stylesheet.css
Находим в нём следующие строки (если не удаётся найти именно эти, попробуйте найти ".product-thumb .caption"):

.product-thumb .caption {
padding: 0 20px;
min-height: 180px;
}

Вставляем после:

.product-thumb .category-caption {
padding: 0 20px;
min-height: 32px; /*Это значение меняйте под себя*/
}

НА ЭТОМ ВСЁ!
 

Так же скажу, что всё это отлично работает на стандартном Bootstrap'е, т.к. стилей новых не создаётся, а берутся стили сетки товаров.
Надеюсь, эта статья сможет кому-то быть полезной.

Всем пока!

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах


Спасибо за информацию,но у меня немного не получилось.

Получилось наполовину вот как  не подтягивает фото ставил 200х200 и JPEG и PNG все равно так.

9723e3c5b7d2.png

 

 

 

не подскажете как исправить.Опенкарт 2.0.1.1 шаблон дефаулт, но немного стили исправил.4 модификатора стоит может из-за них так?

Буду очень признателен за подсказку.

Ссылка на комментарий
Поделиться на других сайтах


Огромное спасибо.Переделал  по своей теме текст центровал.Все получилось .Автору большой респект.
Только у меня заработало когда сделал вот эти строчки вот так

 

if ($result['image']) {
    $image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
   }else {
          $image = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
          }
Ссылка на комментарий
Поделиться на других сайтах


 

Огромное спасибо.Переделал  по своей теме текст центровал.Все получилось .Автору большой респект.

Только у меня заработало когда сделал вот эти строчки вот так

 

if ($result['image']) {
    $image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
   }else {
          $image = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
          }

 

Очень рад, что вам помогла эта статья! Не знаю, в чём различие между вашим вариантом и моим, но у меня стабильно работает первый. Возможно знающие люди заметят эту тему и объяснят проблему)

Ссылка на комментарий
Поделиться на других сайтах


  • 4 месяца спустя...

Все сделал как выше сказано , но ничего не получилось. ? Может быть кто подскажет в чем проблема. http://c2n.me/3nvIbPQ и самое главное как это все исправить

Ссылка на комментарий
Поделиться на других сайтах


  • 4 месяца спустя...

Спасибо большое автору за инструкцию  :-)

 

Если у кого появляется горизонтальная и вертикальная прокрутка, то это легко поправить c помощью CSS. 

Я, к примеру, в файле stylesheet.css нашел: 

.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}

и дописал немного: 

.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
        max-width: 100%;
        overflow: hidden;
}
Ссылка на комментарий
Поделиться на других сайтах


  • 5 месяцев спустя...

Пробую сделать на тестовом сайте http://new.m-s.su/component/monitor, всё получилось,не получается только отодвинуть от края заголовок. Пытаюсь в product-thumb .category-caption  - не меняется. Подскажите, если возможно, где искать?

post-26771-0-46441700-1470212224_thumb.jpg

Изменено пользователем sergspb
Ссылка на комментарий
Поделиться на других сайтах


  • 2 месяца спустя...
  • 2 месяца спустя...

Внесу свои 5 копеек.

У меня ocStore 2.3.0.2.2 и предложенная выше конструкция работает не корректно, но работает, выдает кучу ошибок и нет изображения. Покурив различные форумы нашел следующее решение. Нужно поправить шаг 1

и вставить

if ($result['image']) {
    $image = $this->model_tool_image->resize($result['image'], $this->config->get($this->config->get('config_theme') . '_image_product_width'), $this->config->get($this->config->get('config_theme') . '_image_product_height'));
                      }
    else {
          $image = $this->model_tool_image->resize('no_image.jpg', $this->config->get($this->config->get('config_theme') . '_image_product_width'), $this->config->get($this->config->get('config_theme') . '_image_product_height'));
          }

вместо того, что предлагал топикстартер, после чего все это дело сохранить и почистить кеш через админку, и все сразу встает на свои места.

И кстати, я все это делал не на дефолтной теме.

Изменено пользователем Hunt0rr
Ссылка на комментарий
Поделиться на других сайтах


  • 6 месяцев спустя...

Поддомен, размещенный на одном сервере с доменом, ссылается на картинки домена через жесткие или относительные ссылки (испробованы оба варианта).

#!/bin/bash
rm -Rf /sites/имясайтаподдомена/www/image/data
mkdir /sites/имясайтаподдомена/www/image/data
for fl in /sites/имясайта/www/image/data/*
do
ln "$fl" /sites/имясайтаподдомена/www/image/data
done
chown -R drag01:webusers /sites/имясайтаподдомена/www/image/data

А картинки не проявляются. 

не работает  src="<?php echo $products[$j]['thumb']; ?>",  <?php echo $products[$j]['thumb']; ?> - пусто на выводе, просто выводится src без заполнения (="...")

Подскажите, в чем дело, пожалуйста

Ссылка на комментарий
Поделиться на других сайтах


  • 4 недели спустя...

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.