Как добавить картинки при выводе списка подкатегорий в OpenCart

category-pictures

Приветствую вас, уважаемые сайтостроители и OpenCart-о колупатели.

Наверное, многим из вас не нравится, как выводится список вложенных категорий при заходе на сайте на страницу категории. Мне, например не нравится.

Сейчас мы будем это дело исправлять и сделаем так, что список подкатегорий будет выводиться с картинками.

1. catalog/controller/product/category.php после строк

foreach ($results as $result) {
   $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'] . ' (' . $product_total . ')',

 

добавляем строку

'thumb' => $image,

 

2. Теперь редактируем темплейт. На примере дефолтного :

в файле catalog/view/theme/default/template/product/category.tpl 

ищем

<?php if ($categories) { ?>
  <h2><?php echo $text_refine; ?></h2>
  <div class="category-list">
    <?php if (count($categories) <= 5) { ?>
    <ul>
      <?php foreach ($categories as $category) { ?>
      <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
      <?php } ?>
    </ul>
    <?php } else { ?>
    <?php for ($i = 0; $i < count($categories);) { ?>
    <ul>
      <?php $j = $i + ceil(count($categories) / 4); ?>
      <?php for (; $i < $j; $i++) { ?>
      <?php if (isset($categories[$i])) { ?>
      <li><a href="<?php echo $categories[$i]['href']; ?>"><?php echo $categories[$i]['name']; ?></a></li>
      <?php } ?>
      <?php } ?>
    </ul>
    <?php } ?>
    <?php } ?>
  </div>
  <?php } ?>

и заменяем это все на

<?php if ($categories) { ?>
  <div class="box-product">
    <?php foreach ($categories as $category) { ?>
    <div>
         <div class="image">
             <a href="<?php echo $category['href']; ?>">
                 <img src="<?php echo $category['thumb']; ?>" title="<?php echo $category['name']; ?>" alt="<?php echo $category['name']; ?>" />
             </a>
         </div>
         <div class="name">
             <a href="<?php echo $category['href']; ?>">
                 <?php echo $category['name']; ?>
             </a>
         </div>
    </div>
    <?php } ?>
  </div>
  <?php } ?>

Вот и всё.

Отлично работает на OpenCart 1.5.6

Источник: http://finesites.ru/opencart/kak-dobavit-kartinki-pri-vy-vode-spiska-podkategorij-v-opencart

  • Alex Wayne

    Спасибо за наводку, но беда такая. Почему то они наложились друг на друга..
    PS: Разобрался, просто размер слишком большой был в настройках, но может все равно есть решение их разместить на расстоянии? Мало ли)

    • https://seodima.com/ Dmitry

      Попробуйте задать для изображений размеры:
      <img src="» width=»150px» height=»150px» title=»» alt=»» />
      Или задать размеры для родительского контейнера и отступы:

      <a href="»>
      <img src="» title=»» alt=»» />

      <a href="»>

      Но лучше порезать изображения. Вполне вероятно, что у Вас загружены большие изображения по мегабайту, а уменьшаются они стиля. Что неправильно.

  • Nick

    Спасибо за информацию.

    Подходит для 2.0.2
    Только $data = array( заменено на $filter_data = array(
    и
    no_image.jpg я заменил на placeholder.png
    В темплейт добавил сам, но думаю тоже подойдет.

  • Евгений

    Информация очень помогла, но категории выводятся вертикально в столбик. А это, к сожалению, не особо эстетично и красиво. Как сделать, чтоб они выводились горизонтально?

    • admin

      Вам нужно поправить вёрстку. Без пациента больше трудно сказать 🙂

  • igor raider

    a kak tyt izmenitj disajn,naprimer zwet i tak dalee

    • https://seodima.com/ Dmitry

      Задайте стили соответствующим классам: .image, .name .box-product и их дочерним элементам.

  • Эдуард Щербак

    на опенкарт 2,2 не получается, в чем может быть затык?

  • Max

    Спасибо! Получилось, но теперь не видно новых товаров в подкатегориях, которые добавляю после этой операции.

  • TJ

    Добрый день, подскажите пожалуйста, сам не смог найти… Сделал, что бы подкатегории в opencart отображались картинками, но теперь они в виде вертикального столбца. Не удобно так и не красиво. Как сделать, что бы теперь подкатегории с картинками отображались горизонтально на странице? Все сделал как описал автор… Решения вопроса с горизонтальным отображением нигде не нашел (

  • Владимир Коптелов

    Спасибо, столько времени прошло и все равно актуально иногда)