Оценок: 1
OC2: Вывод изображения подкатегории как иконки

OC2: Вывод изображения подкатегории как иконки

Здесь один из вариантов изменения отображения списка подкатегорий для Opencart 2, скорее всего подойдет и для версии 1.5 (большой разницы в этой части нет)

Понадобится: внести изменения в контроллер и шаблон квтегории, таблицу стилей и при необходимости найти изображение-заглушку для иконки, если не задано в настройках категории.

Что должно получиться в итоге:

  • Название категории изначально состоящее из заголовка и количества товаров разбивается на две части
  • Добавляется изображение

Изменения в контроллере категории

Открываем файл /catalog/controller/product/category.php

Здесь находим:

$data['categories'][] = array(

Перед этой строкой добавим код для получения изображения, с проверкой. Если изображения для категории нет, используем заглушку - стандартный no_image.png в изображениях опенкарта.

if ($result['image']) {
$caimage = $this->model_tool_image->resize($result['image'], 100, 100);
}
else {
$caimage = $caimage = $this->model_tool_image->resize('no_image.png', 100, 100);
}

После найденной строки добавляем изображение, а так же разбиваем 'name' на 2 части - имя категории и счетчик товаров. Должно в итоге получиться так:

$data['categories'][] = array(
					'name'  => $result['name'],
					'href'  => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '_' . $result['category_id'] . $url),
					'image'  => $caimage,
					'count'  => ($this->config->get('config_product_count') ?  $this->model_catalog_product->getTotalProducts($filter_data) : '')
				);

Теперь перейдем к шаблону.

Изменения в шаблоне

Открываем файл /catalog/view/theme/default/template/product/category.tpl и находим следующий код (29-54 строки в шаблоне по умолчанию, в других шаблонах могут быть отличия):

 <?php if ($categories) { ?>
      <h3><?php echo $text_refine; ?></h3>
      <?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 } ?>

Здесь идет проверка количества категорий и в зависимости от результата разбивка на столбцы, данную проверку убираем, выводим изображение и счетчик товаров. Учитывая, что в контроллере есть проверка на включение отображения количества товаров в настройках, сделаем так же проверку и в шаблоне. Должно получиться так:

      <?php if ($categories) { ?>
      <h3><?php echo $text_refine; ?></h3>
      <div class="row">
        <div class="subcats">
          <ul>
            <?php foreach ($categories as $category) { ?>
            <li class="col-sm-3">
            <a href="<?php echo $category['href']; ?>">
            <img src="<?php echo $category['image']; ?>" alt="<?php echo $category['name']; ?>" />
            <?php echo $category['name']; ?>
            </a>
            <?php if ($category['count']) { echo '<span class="count">'. $category['count'].'</span>';} ?>
            </li>
            <?php } ?>
          </ul>
        </div>
      </div> 
      <?php } ?>

Добавляем в CSS

.subcats ul {padding: 0px;list-style-type:none;}
.subcats li {margin-bottom: 20px;text-align: center;}
.subcats li img {display: block;border-radius: 50px;margin: 0px auto 10px auto;border: 1px solid #ECECEC;}
.subcats .count {position: absolute;top: 0px;left: 50%;background: #FF6A00;color: #fff;text-align: center;line-height: 30px;width: 30px;border-radius: 15px;margin-left: 32px;border: 1px solid #ECECEC;}

Вывод подкатегорий с пропуском одного уровня

Если необходимо вывести на странице категории первого уровня сразу третий уровень, минуя второй - это для Вас.

Если Нужно оставить второй уровень.. напремер в виде заголовков, то можно сделать по аналогии с модулем "категории", там очень похоже. Здесь же вариант, при котором будет отображен только третий уровень без разбивки. При этом не потребуется вносить дополнительные изменения в шаблон, только контроллер: /catalog/controller/product/category.php

1. Находим:

$data['categories'] = array();

Вырезаем оттуда где нашли и вставляем после

$results = $this->model_catalog_category->getCategories($category_id);
			foreach ($results as $result) {

2. Далее меняем (с изменениями из предыдущего примера):

$data['categories'][] = array(
					'name'  => $result['name'],
					'href'  => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '_' . $result['category_id'] . $url),
					'image'  => $caimage,
					'count'  => ($this->config->get('config_product_count') ?  $this->model_catalog_product->getTotalProducts($filter_data) : '')
				);

На

$cats = $results = $this->model_catalog_category->getCategories($result['category_id']);
foreach ($cats as $cat) {
if ($cat['image']) {
$caimage = $this->model_tool_image->resize($cat['image'], 100, 100);
}
else {
$caimage = $caimage = $this->model_tool_image->resize('no_image.png', 100, 100);
}
$data['categories'][] = array(
					'name'  => $cat['name'],
					'href'  => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '_' . $cat['category_id'] . $url),
					'image'  => $caimage,
					'count'  => ($this->config->get('config_product_count') ?  $this->model_catalog_product->getTotalProducts($filter_data) : '')
				);
			}

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

Оценок: 1

Комментарии (97)

  1. А в twig как это конвертировать? Статья очень крутая, но к сожалению не дружественна с опенкарт 3

    Alex 21 ноября 2021, 17:48 0
    • Добрый день!
      Спасибо за полезную статью!
      Единственное подскажите пожалуйста, если категорий больше 5, выводятся только 2 последние.
      Как сделать что бы выводились все создание категории?
      Зарание спасибо!

      Юрий 05 ноября 2020, 09:05 0
      • Здравствуйте! Не сталкивался с подобным. До этих изменений выводились все?

        Владимир 06 ноября 2020, 01:22 0
        • Спасибо, вчера разобрался!
          Может кому то поможет!
          Я закоментировал основной код (не хотел сразу его удалять) и добавил код вывода картинки.
          Из-за етого и выводились только 5 категорий, а если их больше выводились только последние одна или две!
          Спасибо за помощь!

          Юрий 06 ноября 2020, 08:36 0
      • 2.3.0.2 ЧТО ТО НЕ ПОЛУЧАЕТСЯ 3 РАЗА ВСЕ ПЕРЕДЕЛЫВАЛ ОШИБКА ERR 500

        Виталий 11 февраля 2019, 14:44 0
        • Если есть лог серверных ошибок — сразу все понятно станет. ну или сбросьте на vl@onenv.ru контроллер и шаблон

          Владимир 11 февраля 2019, 14:49 0
        • Здравствуйте! лучше был бы модификатор

          Виталий 11 февраля 2019, 14:28 0
          • Спасибо за помощь.Вопрос решон

            Виталий 28 января 2019, 20:30 0
            • ЗДРАВСТВУЙТЕ! Не могли бы помочь поправить стили css Вывод изображения подкатегори при мобильном просмотре в низ уходят, как сделать чтобы были в ряду 2

              Виталий 28 января 2019, 00:39 0
              • Здравствуйте! В шаблоне, если он на bootstrap, там где элементы списка:

                Показать код
                <li class="col-sm-3">
                можно добавить нужный класс, будет что то вроде:
                Показать код
                <li class="col-sm-3 col-xs-6">
                или
                Показать код
                <li class="col-sm-3 col-xs-4">
                еще можно поэксперементировать с выводом в десктопном (-md-, -lg-) виде, к примеру:
                Показать код
                col-lg-2 col-sm-3 col-xs-6

                Владимир 28 января 2019, 02:52 0
              • Спасибо, долго искал подобное решение, все работает и в отличии от других перепробованных вариантов не портит мобильную версию.

                decor 17 февраля 2018, 16:12 0
                • Спасибо за Ваш труд всё получилось просто шикарно, единственное поменял цвет кружочков rgba(4, 8, 103, 0.42) на вот такой получился полупрозрачный и за ним видно картинку — спасибо давно такое хотел сделать

                  Oleg 04 сентября 2017, 15:32 0