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

Данил Бдуленко
  • 594
  • 1

Бывает, что у владельцев интернет-магазина возникает желание не вываливать весь товар на покупателя в разделе, а провести его через страничку категории, где будет плитка подкатегорий с красивыми изображениями, в конкретный подраздел. Так посетитель посмотрит на аппетитные превью с товаром и быстрее определится, что он хочет купить. Если для Вас такая структура актуальна, велкам, мы расскажем, как это сделать на дефолтном шаблоне 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="{$lang_link}catalog/{$sub->url}">
            {if $sub->image}
                <img src="{$sub->image|resize:320:320:false:$config->resized_categories_dir}" alt="{$sub->name|escape}" title="{$sub->name|escape}">
            {else}
                <img width="320" height="320" src="design/{$settings->theme}/images/no_image.png" alt="{$sub->name|escape}" title="{$sub->name|escape}"/>
            {/if}
        </a>
        {* Subcategories name *}
        <a class="product_name" data-product="{$sub->id}" href="{$lang_link}catalog/{$sub->url}">{$sub->name|escape}</a>
    </div>
</div>
{*/subcats_images_in_products*}

4. В документ design/okay_shop/html/products.tpl

вносим следующие правки, выделенные в коде комментариями

{* The Categories page *}
{* The canonical address of the page *}
{if $set_canonical || $self_canonical}
    {if $category}
        {$canonical="/catalog/{$category->url}" scope=parent}
    {elseif $brand}
        {$canonical="/brands/{$brand->url}" scope=parent}
    {elseif $page->url=='discounted'}
        {$canonical="/discounted" scope=parent}
    {elseif $page->url=='bestsellers'}
        {$canonical="/bestsellers" scope=parent}
    {elseif $keyword}
        {$canonical="/all-products" scope=parent}
    {else}
        {$canonical="/all-products" scope=parent}
    {/if}
{/if}
{*subcats_images_in_products*}
{$count_subs_visible = 0}
{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">{$lang->products_search}</span> {$keyword|escape}</h1>
    {elseif $page}
        <h1 class="h1">
            <span data-page="{$page->id}">{$page->name|escape}</span>
        </h1>
    {else}
        <h1 class="h1"><span data-category="{$category->id}">{if $category->name_h1|escape}{$category->name_h1|escape}{else}{$category->name|escape}{/if}</span> {$brand->name|escape} {$filter_meta->h1|escape}</h1>
    {/if}
    {if $current_page_num == 1 && ($category->annotation || $brand->annotation)}
        <div class="block padding">
            {* Краткое описание категории *}
            {$category->annotation}
            {* Краткое описание бренда *}
            {$brand->annotation}
        </div>
    {/if}
    {*subcats_images_in_products*}
    {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">
                {$page->body}
            </div>
        {/if}
        {if $current_page_num == 1 && (!$category || !$brand) && ($category->description || $brand->description)}
            <div class="block padding">
                {* Описание категории *}
                {$category->description}
                {* Описание бренда *}
                {$brand->description}
            </div>
        {/if}
    </div>
    {* Sidebar with browsed products *}
    <div class="sidebar sidebar_bottom block">
        {* Browsed products *}
        {get_browsed_products var=browsed_products limit=4}
        {if $browsed_products}
            <div class="h2">{$lang->features_browsed}</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="{$lang_link}products/{$browsed_product->url}">
                            {if $browsed_product->image->filename}
                                <img src="{$browsed_product->image->filename|resize:50:50}" alt="{$browsed_product->name|escape}" title="{$browsed_product->name|escape}">
                            {else}
                                <img width="50" height="50" src="design/{$settings->theme}/images/no_image.png" alt="{$browsed_product->name|escape}" title="{$browsed_product->name|escape}"/>
                            {/if}
                        </a>
                    </div>
                {/foreach}
            </div>
        {/if}
    </div>

{*subcats_images_in_products*}
{/if}
{*/subcats_images_in_products*}

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

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

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

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

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

Рассказать друзьям:


Написать комментарий

captcha

okay_user
Денис
14.04.2018, 13:49
Сделал все по вашей инструкции,но при переходе на вкладку не появляются такие категории как у вас на картинке..

Рекомендуемые товары

Вкладки в категориях
Вкладки в категориях
20 $

Также советуем посмотреть

Работа с категориями товаров в OkayCMS 1.* (+ видео для версий 2.*)
OkayCMS
okay-cms.com
26.01.2016

Как создать категорию товаров? Как управлять существующими категориями? Что значит иконка "монитор"?
В этой статье мы отвечаем на вопросы, связанные с вкладкой "Категории" раздела "Каталог" административной панели сайта.

  • 1561
Читать далее