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

[OlegVladislavovich]

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

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

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

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

 

 

Итак, начнём!
ШАГ 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'е, т.к. стилей новых не создаётся, а берутся стили сетки товаров.
Надеюсь, эта статья сможет кому-то быть полезной.

Всем пока!

[West1900]

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

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

 

 

 

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

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

[West1900]

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

 

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'));

          }

[OlegVladislavovich]

 

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

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

 

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'));

          }

 

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

[gipur83]

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

[undesired]

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

 

Если у кого появляется горизонтальная и вертикальная прокрутка, то это легко поправить 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;
}

[sergspb]

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

Змінено 3 серпня 2016 користувачем sergspb

[xtoto]

Спасибо

 

на версии 2.1.0.2.1 все работает

[Hunt0rr]

Внесу свои 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'));
          }

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

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

Змінено 12 травня 2017 користувачем Hunt0rr

[alenaddd]

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

#!/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 без заполнения (="...")

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

[Grand]

Подскажите как добавить картинки в подкатегории в Opencart 3?