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