Изображения подкатегорий opencart 2

В стандартном opencart категории выводятся только списком, в то время как в админке к каждой категории можно присвоить изображение, которое будет показываться в описании категории товаров. Намного красивее можно вывести категории товаров в виде плитки с картинками. Начнём изменять наш шаблон, открываем: /catalog/view/theme/default/template/product/category.tpl

Находим следующий код:

     <?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 
$counter = 0;
foreach ($categories as $category) { 
if( !$counter )
    echo '<div class="row">'; ?>
	      <div class="col-md-2">
		<div class="catlist">
		<div class="catimg"><a href="<?php echo $category['href']; ?>"><img src="<?php echo $category['thumb']; ?>"></a></div>
		<div class="catname"><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></div>	
		</div>
	      </div>
<?php
$counter++;
if( $counter >= 6 ) {
    echo '</div>';
    $counter = 0;
    }
} 
if ($counter > 0)
    echo '</div>';
?>

Здесь мы, во-первых вывели изображения подкатегорий 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) { ?>
      <div class="row">
        <?php if ($thumb) { ?>
        <div class="col-sm-2"><img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" title="<?php echo $heading_title; ?>" class="img-thumbnail" /></div>
        <?php } ?>
        <?php if ($description) { ?>
        <div class="col-sm-10"><?php echo $description; ?></div>
        <?php } ?>
      </div>
      <hr>
      <?php } ?>

Вырезаем его и переносим в самый конец файла под следующие строки:

      <div class="row">
        <div class="col-sm-6 text-left"><?php echo $pagination; ?></div>
        <div class="col-sm-6 text-right"><?php echo $results; ?></div>
      </div>
      <?php } ?>

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

   


	    

	      


		


		
">">

		
">
	

		

	      

	    

      

$counter = 0;

foreach ($categories as $category) { 

if( !$counter )

    echo '
'; ?>

	      


		


		
">">

		
">
	

		

	      

$counter++;

if( $counter >= 7 ) {

    echo '
';

    $counter = 0;

    }

} 

if ($counter > 0)

    echo '