Вывод изображений подкатегории OpenCart 2

В стандартном 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 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;
  }

 

В результате получится следующее:

catsthumbs

Сразу предупреждаю о возможных проблемах:

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 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 } ?>

Теперь описание категорий находится под списком товаров.

4 комментария

  1. Евгений

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

  2. dmitro.pro

    Смотрите внимательно теги ul li.
    Часто бывает такое, что нарушена разметка html

  3. Сергей

    Здравствуйте, спасибо за статью!!! Очень помогла!
    Если не сложно подскажите пожалуйста, как можно вывести картинки категорий в меню?

    • dmitro.pro

      Доброго времени суток, Сергей.

      В ближайшее время напишу пост и вышлю уведомление.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *