По промокоду ПТНХ мы даем скидку 50% на все модули и шаблоны в нашем маркетплейсе.

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

Категории

Бывает, что у владельцев интернет-магазина возникает желание не вываливать весь товар на покупателя в разделе, а провести его через страничку категории, где будет плитка подкатегорий с красивыми изображениями, в конкретный подраздел. Так посетитель посмотрит на аппетитные превью с товаром и быстрее определится, что он хочет купить. Если для Вас такая структура актуальна, велкам, мы расскажем, как это сделать на дефолтном шаблоне OkayCMS.

 

Делаем модуль вывода подкатегорий картинками

Чтобы вывести все видимые подразделы в виде изображений и без товарных позиций, необходимо внести следующие изменения:

1. В файле design/okay_shop/css/style.css

дописываем в конец

/*subcats_images_in_products*/
.subcategories .product_name {
    font-size: 19px;
    text-align: center;
}
@media (max-width: 1199px){
    .subcategories .preview{
        border-top: 1px solid #e8e8e1;
    }
}
/*/subcats_images_in_products*/

Его можно найти в админке, а можно сразу начинать работать с файлменеджером, т.к. для следующих двух этапов он нам понадобится.

 

2. Создаем файл subcategories_content.tpl в папке design/okay_shop/html/

с таким содержимым:

{*subcats_images_in_products*}
{foreach $category->subcategories as $sub}
    {if $sub->visible}
        <div class="subcategories no_padding products_item col-sm-6 col-xl-3">
            {include file="subcategories_list.tpl"}
        </div>
    {/if}
{/foreach}
{*/subcats_images_in_products*}

 

3. Создаем файл subcategories_list.tpl в папке design/okay_shop/html/,

а в нём

{*subcats_images_in_products*}
{* Subcategories preview *}
<div class="preview fn_product">
    <div class="fn_transfer clearfix">
        {* Subcategories image *}
        <a class="preview_image" href="catalog/">
            {if $sub->image}
                <img src="{$sub->image|resize:320:320:false:$config->resized_categories_dir}" alt="" title="
                <img width="320" height="320" src="design//images/no_image.png" alt="" title="
        <a class="product_name" data-product="" href="catalog/">
{if $set_canonical || $self_canonical}
    {if $category}
        {$canonical="/catalog/
    {elseif $brand}
        {$canonical="/brands/
    {elseif $page->url=='discounted'}
        
    {elseif $page->url=='bestsellers'}
        
    {elseif $keyword}
        
        

{if $category->level_depth==1}
    {$subs = $category->subcategories}
    {foreach $subs as $sub}
        {if $sub->visible}
            {$count_subs_visible = $count_subs_visible+1}
        {/if}
    {/foreach}
    {if $count_subs_visible==0}
        {*Sidebar with filters*}
        <div class="sidebar sidebar_top">
            {include file='features.tpl'}
        </div>
    {/if}
{else}
    {*Sidebar with filters*}
    <div class="sidebar sidebar_top">
        {include file='features.tpl'}
    </div>
{/if}
{*/subcats_images_in_products*}
<div class="{*subcats_images_in_products*}{if $category->level_depth!=1}products_container{elseif $count_subs_visible==0}products_container{/if}{*/subcats_images_in_products*}">
    {* The page heading *}
    {if $keyword}
        <h1 class="h1"><span data-language="products_search"></span> </h1>
    {elseif $page}
        <h1 class="h1">
            <span data-page="">
        <h1 class="h1"><span data-category="">{if $category->name_h1|escape}</span>  
    {if $current_page_num == 1 && ($category->annotation || $brand->annotation)}
        <div class="block padding">
            {* Краткое описание категории *}
            
            
    {if $category->level_depth==1 && $count_subs_visible!=0}
    {* Subcategories list *}
    <div id="fn_products_content" class="fn_categories products clearfix">
        {include file="subcategories_content.tpl"}
    </div>
    {else}
	{*/subcats_images_in_products*}
        {if $products}
            {* Product Sorting *}
            <div class="fn_products_sort">
                {include file="products_sort.tpl"}
            </div>
        {/if}
        {* Product list *}
        <div id="fn_products_content" class="fn_categories products clearfix">
            {include file="products_content.tpl"}
        </div>
        {if $products}
            {* Friendly URLs Pagination *}
            <div class="fn_pagination">
                {include file='chpu_pagination.tpl'}
            </div>
        {/if}
        {if $page->body}
            <div class="block padding">
                
        {if $current_page_num == 1 && (!$category || !$brand) && ($category->description || $brand->description)}
            <div class="block padding">
                {* Описание категории *}
                
                
        {if $browsed_products}
            <div class="h2"></div>
            <div class="browsed clearfix">
                {foreach $browsed_products as $browsed_product}
                    <div class="browsed_item col-xs-6 col-sm-3 col-lg-6">
                        <a href="products/">
                            {if $browsed_product->image->filename}
                                <img src="" alt="" title="
                                <img width="50" height="50" src="design//images/no_image.png" alt="" title="

P.S.
Не забываем в настройках (Каталог → Категории) добавить сами изображения всем субкатегориям, чтобы клиент видел красивые превью, а не заглушки для фото.

настройки подкатегории

Отображение на устройствах будет примерно таким:

подразделы с превью на устройствах

 

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

 

Комментарии 9
Максим
26.04.2021, 09:04
Для 4 версии можно?
Николай
29.03.2020, 00:18
Здравствуйте. Подскажите, ставил код на 2.23 Lite, все хорошо, но только для 1-ого уровня вложенности подкатегорий. Если есть несколько 2 и более уровней вложенности - подкатегории выводятся просто списком слева. Если не затруднит, не могли бы подправить код? Благодарю.
Евгений
16.02.2020, 06:09
Актульно для версии 2,3,4 ?
Администратор
16.02.2020, 20:06
Евгений, да, актуально.
Максим
25.12.2019, 22:32
А как теперь вывести под подкатегориями с картинками полное описание категории?
OkayCMS
15.06.2018, 15:56
Для версии 1.2.2 по другому нужно делать. Это старая версия, мы под неё инструкцию уже не будем писать.
Ринат
15.06.2018, 14:40
Как реализовать для версии Okay 1.2.2 ???
OkayCMS
04.06.2018, 09:07
Что-то не так, этот код вообще не отвечает за товары, они не могли из-за этого задвоиться.
Максим
27.05.2018, 20:35
У меня всё появилось, но на версии 2.1.6 заводились товары.. Написал в службу поддержки Константину, он сказал что код от старой версии..
Денис
14.04.2018, 14:49
Сделал все по вашей инструкции,но при переходе на вкладку не появляются такие категории как у вас на картинке..
Написать комментарий
Войдите в личный кабинет
Скачать OkayCMS
version 4.3.0
Подписаться на рассылку
Вы будете получать подборку полезных статей по работе с сайтом на OkayCMS, скидки на модули и шаблоны