Урок 11 Как вывести подкатегории с картинками

Не смотря на хороший функционал, в плане внешнего вида опенкарт оставляет желать лучшего. Речь конечно же про дефолтный шаблон, а не про премиум шаблоны. Вот взять вывод тех же подкатегорий. Сразу даже не понятно что это подкатегории, так как надпись над ними гласит — «Уточните поиск». При чем тут поиск?

Согласитесь, не очень красиво. Сегодня мы постараемся исправить эту ситуацию и придать списку подкатегорий привлекательный вид.
Изменения будем вносить в контроллер и темплейт категорий, а также внесем некоторые корректировки в файл стилей шаблона.
Переходим в
1 |
catalog\controller\product\category.php |
находим
1 2 3 4 |
$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) ); |
и заменяем на
1 2 3 4 5 6 7 8 9 10 11 |
if ($result['image']) { $image = $this->model_tool_image->resize($result['image'], 100, 100); } else { $image = $this->model_tool_image->resize('placeholder.png', 100, 100); } $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' => $image ); |
Теперь переходим к редактированию шаблона по адресу
1 |
catalog\view\theme\default\template\product\category.tpl |
Находим
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?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 } ?> |
и меняем на
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php if ($categories) { ?> <div class="col-sm-12"> <div> <h3><?php echo $text_refine; ?></h3> </div> <div style="text-align: center;"> <div class="row"> <?php foreach ($categories as $category) { ?> <div class="col-md-4 col-sm-6 col-xs-6 for_subcats_pict"> <div> <div class="img_for_subcats_pict"><a href="<?php echo $category['href']; ?>"><img src="<?php echo $category['thumb']; ?>" alt="<?php echo $category['name']; ?>" /></a></div> <div class="txt_for_subcats_pict"><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></div> </div> </div> <?php } ?> </div> </div> </div> <?php } ?> |
Теперь приведем в порядок стилистику. Для этого в файле
1 |
catalog/view/theme/default/stylesheet/stylesheet.css |
Добавим
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.for_subcats_pict > div { border: 1px solid #e5e5e5; box-shadow: 2px 2px 4px #e5e5e5; padding: 5px; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; flex-wrap: wrap; justify-content: center; } .img_for_subcats_pict { width: 30%; float: left; } .img_for_subcats_pict img { width: 100%; } .txt_for_subcats_pict { width: 70%; float: left; } |
Теперь подкатегории будут иметь следующий вид

Как вывести подкатегории с картинками
Согласитесь, это намного лучше того, что было. Можете сами попробовать изменить стилистику и сделать оформление по своему вкусу.
Также к уроку прилагаю ocmod модификацию для тех, кто не хочет вносить изменения руками.
спасибо большое! я ноль полный в твиг, тпл, которые видимо на php базируются но методом проб и ошибок все таки смог адаптировать твой тпл шаблон на твиг через встоенный твиг редактор где по другому код выглядит. третья версия опенкарта уже на твиге поэтому обнови если не сложно статью, думаю многим будет интересна!
Обязательно. Спасибо за отзыв.
Огромное спасибо, как раз искал такую инфу, а здесь все так подробно описано. Попробовал, получилось с первого раза без проблем, даже не пришлось использовать ocmod модификацию.
Спасибо за шаблон, возможно, применю для дела. Однако, мне больше нравится минимизированный, первый вариант, а вот заказчикам именно то, что здесь предложено. В принципе на скорость работы в общем это не влияет ни капельки.
Статья понятная, отлично объясняет, как вывести подкатегории с картинками. Спасибо за такую информацию. Надеюсь, что на этом сайте будет много полезных статей.
Можно ли убрать фильтр и подкатегории разбросать в два разных блока? И сделать по ним переход на страницу подкатегории?
Не понял вопроса.
а к какой версии описание?
Здравствуйте. 2.х
а к 3.0.2.0 не подходит? а то устала искать уже, все описанные для 3х способы не работают (( плачу ночами(((
Добрый. Подходит, единственное что изменения в шаблоне будут иметь другой вид. Возьмите указанный в статье код, прогоните его через онлайн конвертор php to twig и добавьте в темплейт.
{% for child in category %}
{% endfor %}
блин, код не вставляется, режет как то странно.
Надо в category.twig ,в этом цикле,внутри li, добавить вывод картинки, перед или после
Чтобы не резало, используйте в тегах русские буквы, например в href ‘e’ можно заменить русской ‘е’
Код режет, хотел добавить рабочий для oc 3 вариант, а получилась каша
К сожалению не поддерживается код редактором. Однако вывод картинок Вы не добавили.
Подскажите пожалуйста, где в catalog/view/theme/default/stylesheet/stylesheet.css добавить код?
и глупый вопрос, с какого тега начать? я совсем не понимаю в редакторе и добавлении стиля, делаю для себя. Заранее большое спасибо
Здравствуйте.
Вопрос «С какого тега начать?» некорректен. Начинать надо с того, что вам надо получить на выходе. Вам не теги править надо, а стили. Если Вы не знакомы с html и css — то Вы ничего не сможете сделать. Надо для начала освоить хотя бы азы css. Надо больше конкретики что Вам конкретно необходимо.
Плюс я предоставляю платные слуги, верстка и стилизация в их числе.
Добрый день!
Спасибо за код! Подскажите только если категорий больше 5, выводится только последние 2 или 3.
Как сделать что бы вывелись все категории?
Зарание спасибо!
На сколько знаю, в стандартном шаблоне выводятся все категории без ограничения http://prntscr.com/ve3dun
Без изображения выводятся все, но если ставлю код для категории картинками из 7 категорий выводится только одна https://prnt.sc/ve9w6g
Я не знаю что именно и как Вы делаете, но я специально повторил все описанное в статье на демо шаблоне.
Было до правок — http://prntscr.com/vehrkg
Стало после правок — http://prntscr.com/vehse2
Как видите, все ок. Возможно вы используете какие то доп модификаторы, которые вносят изменение в контроллер категорий. Поотключайте их, обновите кеш модификаций и проверьте.
Спасибо, вчера разобрался!
Я закоментировал основной код (не хотел сразу его удалять) и добавил код вывода картинки.
Из-за етого и выводились только 5 категорий , а если их больше выводились только последние одна или две!
Спасибо за помощь!
Здраствуйте, а есть модуль ,если прям совсе для чайников))?
Здравствуйте.
Проще наверно уже некуда. Надо просто повторить. К тому же универсальный модификатор сделать не получится, так как каждый шаблон имеет свою структуру, значительно отличающуюся от дефолтного шаблона. И если у Вас не стандартный шаблон, а покупной, или не очень
ломаныйшаблон — тут либо попыталься сделать по аналогии, либо обращаться к фрилансерам.Поплыли картинки. Как поправить? скрин https://yadi.sk/i/T9RcerczWtfHzA
Стилями. Задайте блокам одинаковую высоту.
Можно скрипт написать, чтобы выравнивал по самому высокому.
Какой код нужно вставить
Ну откуда я знаю)) Я ж не телепат.
Да и по скрину исходный код читать не умею
Спасибо, добрый фей все получилось! смотрите
Очень легко и просто.
Вот бы еще найти как бренды категории вывести так же в категориях. а то купила модуль, а там жесть, открываешь производителя и к названию категории/бренд добавляется /бренд- бренд получается что попало)
Не понял суть вопроса. Что именно Вам необходимо?
после вставки пхп кода на странице категорий вот такая ошибка версия 3 опенкарту, в чем может быть проблема?
Parse error: syntax error, unexpected ‘)’ in /storage/modification/catalog/controller/product/category.php
Здравствуйте.
Если указанный в статье изменения вы вносите не на стандартном шаблоне — то вполне возможно что они не будут работать. Ошибка заключается в том, что в контроллере появилась синтаксическая ошибка кода, после выполнения какого то из модификаторов. Необходимо указанные в статье изменения внести в модификатор, который изменяет контроллер категорий.
Спасибо, уважаемый! Пересмотрел разные модули для данной цели и ничего подходящего не обнаружил. А с вашей подсказкой за 5 минут решил вопрос)) Удачи вам и всех благ!
Спасибо, взаимно!