Плагин «Изображения категорий» — демонстрация

Плагин categoryimages позволяет привязать к каждой категории Shop-Script изображение: оригинал и три эскиза (big / middle / little) с retina-вариантами 2x и 3x. Изображения загружаются в диалоге редактирования категории или через менеджер изображений в бэкенде, а на витрине выводятся автоматически через хук frontend_category или вручную — методами плагина в шаблонах темы. Ниже — живые примеры с кодом.

1. Плитка категорий — `addImagesToCategories()`

Метод обогащает массив категорий из $wa->shop->categories() полем catim_img (готовый тег <img> или URL). Третий аргумент — размер эскиза.

{$top_cats = $wa->shop->categories(0, 1)}
{$top_cats = shopCategoryimagesPlugin::addImagesToCategories($top_cats, 'url', 'big')}
{foreach $top_cats as $c}
    <img src="{$c.catim_img}" alt="{$c.name|escape}">
    <a href="{$c.url}">{$c.name|escape}</a>
{/foreach}

2. Эскизы трёх размеров + retina

Для каждой картинки плагин создаёт эскизы с размерами из настроек (здесь: big 256, middle 128, little 64) и версии 2x/3x для дисплеев высокой плотности. URL каждого эскиза доступен отдельным методом.

getCategoryBigThumbUrl()
getCategoryMiddleThumbUrl()
getCategoryLittleThumbUrl()

<img src="{shopCategoryimagesPlugin::getCategoryBigThumbUrl($category_id)}"
     srcset="{shopCategoryimagesPlugin::getCategoryBigThumbUrl($category_id, 2)} 2x,
             {shopCategoryimagesPlugin::getCategoryBigThumbUrl($category_id, 3)} 3x">

{* оригинал без ресайза *}
<img src="{shopCategoryimagesPlugin::getCategoryImageUrl($category_id)}">

3. Дерево категорий с подкатегориями (рекурсия)

addImagesToCategories() рекурсивно обходит вложенные категории (поле childs дерева), поэтому картинки появляются на всех уровнях — удобно для меню и сайдбаров.

{$tree = $wa->shop->categories(0, null, true)}
{$tree = shopCategoryimagesPlugin::addImagesToCategories($tree, 'image', 'little', 'my-css-class')}
{foreach $tree as $c}
    {$c.catim_img}  {* готовый тег <img class="my-css-class"> *}
    ...
    {foreach $c.childs as $child}{$child.catim_img} ...{/foreach}
{/foreach}

4. Каталог в шапке — интеграция с `wa_print_tree`

Системная Smarty-функция {wa_print_tree} подставляет в шаблон elem любые поля элемента дерева по плейсхолдеру :имя_поля. Достаточно один раз обогатить дерево методом addImagesToCategories() (режим 'image' — готовый тег <img> с нужным CSS-классом) и добавить :catim_img в elem — картинки появятся на всех уровнях меню. Посмотрите на выпадающий каталог «Каталог товаров» в шапке этой страницы — он работает именно так.

{* header.html темы *}
{$categories = $wa->shop->categories(0, null, true)}
{$categories = shopCategoryimagesPlugin::addImagesToCategories($categories, 'image', 'little', 'catim-nav-pic')}

{wa_print_tree tree=$categories unfolded=true collapsible_class='collapsible' class="menu-v"
    elem='<a href=":url" title=":name">:catim_img:name</a>'}

5. Автоматический вывод на странице категории

Если в настройках плагина включён вывод (или у конкретной картинки стоит переключатель «Выводить по умолчанию»), хук frontend_category сам отдаёт готовый <img class="catim-plugin-cat-pic"> с выбранным размером эскиза и srcset. Теме достаточно стандартного цикла по хуку. Откройте любую категорию из плитки выше — баннер под заголовком выводится именно так.

<!-- category.html темы — стандартный вывод хуков -->
{foreach $frontend_category as $_}{$_}{/foreach}