Всё о web

Для чайников и не только


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

Апрель 19, 2015

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

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

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

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



Комментарии

57 комментариев | “Изображения подкатегорий opencart 2


  1. Добрый день.
    Не могу понять в чем проблема. При добавлении разного количества подкатегорий, как-то странно меняется отображаемое количество подкатегорий.
    Так, при 1-5 подкатегорий все ОК
    при 6 — отображается только две (последних)
    при 7 — отображается только 1 (последняя)
    при 8 — 2
    при 9 — 3.
    10 — 1/
    Мне нужно чтобы в одной строке было по 3 подкатегории, поэтому я установил f( $counter >= 3 ).
    Здесь все ОК.
    Я так понимаю, что отображается только последняя строка. Но не понимаю почему.
    Возможно проблема с высотой блока для отображения подкатегорий?

  2. Здраствуйте! Большое спасибо за ваш труд! С под категориями все получилось,версия 2.0.3.1.А как быть с категориями? Картинками возможно иконками. Подскажите пожалуйста .

    1. Илья Илья:

      Если Вы имеете в виду отдельную страницу со всеми корневыми категориями, то нет, тут быстрого рецепта нет. Но возможно уже есть готовые плагины, посмотрите, пожалуйста, на официальном сайте.

  3. Вот например категориям слева которые имеют названия (текст) можно ли для каждой присвоить иконку чтобы отображалось :название категории + иконка (картинка)этой категории

  4. Максим:

    Выдает такие ошибки :Warning: imagecreatetruecolor(): Invalid image dimensions in /home/zakupka/domains/zakupka24.com.ua/public_html/system/library/image.php on line 105Warning: imagecolorallocate() expects parameter 1 to be resource, boolean given in /home/zakupka/domains/zakupka24.com.ua/public_html/system/library/image.php on line 113Warning: imagefilledrectangle() expects parameter 1 to be resource, boolean given in /home/zakupka/domains/zakupka24.com.ua/public_html/system/library/image.php on line 116Warning: imagecopyresampled() expects parameter 1 to be resource, boolean given in /home/zakupka/domains/zakupka24.com.ua/public_html/system/library/image.php on line 118

  5. Илья Илья:

    Для указания размеров изображения мы использовали стандартную опцию, редактируемую из админки: «Размер изображения в списке категорий».
    Вы их указали?

  6. Максим:

    Все верно указал, но почему-то выдает ошибку …


Comments are closed.