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

Буває, що у власників інтернет-магазину виникає бажання не вивалювати весь товар на покупця в розділі, а провести його через сторінку категорії, де буде плитка підкатегорій з красивими зображеннями, в конкретний підрозділ. Так відвідувач подивиться на апетитні превью з товаром і швидше визначиться, що він хоче купити. Якщо для Вас така структура актуальна, велкам, ми розповімо, як це зробити на дефолтних шаблоні 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 = "

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

Відображення на пристроях буде приблизно таким:

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