Вывод изображений подкатегории OpenCart 2
- 18 октября, 2022
- 1:40 пп
- Нет комментариев
В стандартном opencart категории выводятся только списком, в то время как в админке к каждой категории можно присвоить изображение, которое будет показываться в описании категории товаров. Намного красивее можно вывести категории товаров в виде плитки с картинками. Начнём изменять наш шаблон, открываем: /catalog/view/theme/default/template/product/category.tpl
Находим следующий код:
<?php if (count($categories) <= 5) { ?>
<br />
<div class="row">
<br />
<div class="col-sm-3">
<ul>
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>">
<?php echo $category['name']; ?>
</a></li>
<p>
<?php } ?>
</ul>
<p>
</div>
<p>
</div>
<p>
<?php } else { ?>
<br />
<div class="row">
<?php foreach (array_chunk($categories, ceil(count($categories) / 4)) as $categories) { ?>
<br />
<div class="col-sm-3">
<ul>
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>">
<?php echo $category['name']; ?>
</a></li>
<p>
<?php } ?>
</ul>
<p>
</div>
<p>
<?php } ?>
</div>
<p>
<?php } ?>
И меняем его на:
<br />
<div class="row">
<?php foreach ($categories as $category) { ?>
<br />
<div class="col-md-2">
<br />
<div class="catlist">
<br />
<div class="catimg"><a href="<?php echo $category['href']; ?>"><img decoding="async"
src="<?php echo $category['thumb']; ?>"></a></div>
<p>
<br />
<div class="catname"><a href="<?php echo $category['href']; ?>">
<?php echo $category['name']; ?>
</a></div>
<p>
</div>
<p>
</div>
<p>
<?php } ?>
</div>
<p>
Здесь мы, во-первых вывели изображения подкатегорий opencart, во-вторых — вместо обычного маркированного списка задействовали вывод в виде красивой плитки. Теперь чтобы стали доступны картинки в шаблоне, открываем контроллер: /catalog/controller/product/category.php
Находим в районе 162 строки код:
$data['categories'][] = array(
'name' => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
'href' => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '_' . $result['category_id'] . $url)
);
Меняем его на:
$data['categories'][] = array(
'name' => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
'href' => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '_' . $result['category_id'] . $url),
'thumb'=>$this->model_tool_image->resize($result['image'], $this->config->get('config_image_category_width'), $this->config->get('config_image_category_height'))
);
Для указания размеров изображения мы использовали стандартную опцию, редактируемую из админки: «Размер изображения в списке категорий».
Чтобы список категорий выглядел красивее, добавим немного стилей:
.catlist {
border: 1px solid #DDD;
margin-bottom: 20px;
}
.catimg {
text-align:center;
}
.catname {
padding:0px 10px;
height:40px;
overflow:auto;
}
В результате получится следующее:
Сразу предупреждаю о возможных проблемах:
1. Если Вы в админке установите изображение больше чем размер контейнера col-md-2, то картинки выйдут за границы элемента.
2. Если Вы используете длинные имена в категориях, то часть имени может обрезаться снизу.
Оба случая устраняются с помощью стилей, высота контейнера под заголовок категории находится в стиле .catname, и ширина блока задаётся через bootstrap контейнеры col-md-2, col-md-3 и т.д.
В завершении нужно перенести описание категории под список товаров, это очень часто требуют seo специалисты, в шаблоне категорий /catalog/view/theme/default/template/product/category.tpl находим код:
<?php if ($thumb || $description) { ?>
<br />
<div class="row">
<?php if ($thumb) { ?>
<br />
<div class="col-sm-2"><img decoding="async" src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>"
title="<?php echo $heading_title; ?>" class="img-thumbnail" /></div>
<p>
<?php } ?>
<?php if ($description) { ?>
<br />
<div class="col-sm-10">
<?php echo $description; ?>
</div>
<p>
<?php } ?>
</div>
<p>
<br />
<hr>
<p>
<?php } ?>
Вырезаем его и переносим в самый конец файла под следующие строки:
<br />
<div class="row">
<br />
<div class="col-sm-6 text-left">
<?php echo $pagination; ?>
</div>
<p>
<br />
<div class="col-sm-6 text-right">
<?php echo $results; ?>
</div>
<p>
</div>
<p>
<?php } ?>
Похожие записи
