Современный посетитель ориентирован на зрительный образ — картинки, изображения.
Проиллюстрированные названия категорий, сделают Ваш сайт более привлекательным и удобным для его посетителей. Красивые изображения наглядно покажут содержимое категории, а баннеры расскажут посетителям об акциях и скидках.
Предназначение плагина:
Позволяет использовать несколько графических элементов (иконка, изображение, банер) для обозначения категорий.
Например:
- иконку можно вывести в меню навигации дерева категорий.
- изображение, для вывода списка категорий на главной или списка подкатегорий на странице категории.
- банер, на странице категории для уведомления посетителя о проходящих акциях или выгодных торговых предложениях.
Загрузка изображений:
Изображения загружаются во всплывающем окне настроек категории (магазин-товары-категория- «Настройки категории»).
Настройка размеров эскизов изображений:
На странице плагина (магазин-плагины-«Иконка, изображение и баннер для категории »), размещается таблица размеров каждого типа изображений.
Вы можете в любой момент изменить пропорции каждого типа изображений.
* После изменения размеров, не забудьте нажать на кнопку «сохранить», и кликнуть кнопку «Удалить и заново создать эскизы всех изображений категорий».
* Ширина и высота изображения прописываются в соответствующих полях настройки плагина
- При указании точных размеров, изображения пропорционально масштабируются и при необходимости большая сторона обрезается до соотвествия с заданными размерами
- При указании одной из сторон точного размера, а другой значение "0" (двум сторонам 0 указать нельзя), изображение будет уменьшено до соответствия стороны указанных размеров, при этом другая сторона обрезанна не будет
* Плагин (как и все дургие ресурсы) не может увеличивать изображения (теряется качество), только уменьшать. В случае если изображение имеет размеры меньше указанных в настройках плагина, оно не будет изменено
Плагин работает с копиями оригинала и по этой причине Вы можете экспериментировать с размерами эскизов, столько, сколько Вам потребуется.
* Плагин предоставляет возможность загрузить изображения (иконка, изображение, банер) для категории и получить на них ссылки в шаблонах тем оформления.
* Плагин не предоставляет оформления вывода навигации и списка категорий.
* Многие темы уже интегрированны с плагином "иконка, изображение и банер для категории", если же нет, вы можете воспользоваться нашими решениями:
Как отобразить изображения в спике категорий (на главной, на странице категории)
Как отобразить банер
Как отобразить иконки в меню навигации категорий
Используемые термины:
* иконка - небольшое изображение, представляющее категорию магазина.
* изображение - графический элемент предоставляющий информацию содержимого принадлежащей категории.
* банер - статическое изображение рекламного характера (Баннеры размещают для привлечения клиентов, для информирования или для создания позитивного имиджа).
«Снабдите категории товаров иконками и логотипами для максимальной выразительности.»
Инструкция
1. В теме оформления магазина создайте файл под названием plugin.wmimageincat.thumbnav.html
в качестве содержимого вставьте содержимое файла plugin.wmimageincat.thumbnav.txt
CTRL+A - выделить все
CTRL+C - Скопировать
CTRL+V - вставить
2. Для вывода списка категорий на главной странице (категории 1-го уровня)
В файле home.html (магазин - витрина - оформление) - главная страница магазина, пропишите
{$_options = []}
{include file="./plugin.wmimageincat.thumbnav.html" options=$_options inline}
3. Для вывода списка подкатегорий на странице категории (дочерние текущей категории)
В файле category.html (магазин - витрина - оформление) - страница категории, пропишите
{if $category.subcategories}
{$_options = [
'categories' => $category.subcategories
]}
{include file="./plugin.wmimageincat.thumbnav.html" options=$_options inline}
{/if}
4. Для вставки списка категорий на любую страницу и область сайта (должно поддерживаться smarty, установлено приложение магазин и плагин "иконка, изображение и банер для категории")
пропишите строку
{$_options = []}
{include file="`$wa->shop->themePath('id_theme')`plugin.wmimageincat.thumbnav.html" options=$_options inline}
где id_theme - идентификатор темы оформления
Параметры
Вы можете изменить список категорий, кол-во изображений в строке, внешний вид и расположение элементов
для этого необходимо передать параметры в файл.
Перед строкой
{include file="./plugin.wmimageincat.thumbnav.html" options=$_options inline}
заполните массив $_options
Пример:
{$_options = [
'ids' => '1,3,4,23',
'child_width' => 3,
'child_height' => 200,
'text_color' => '#000000'
]}
{include file="./plugin.wmimageincat.thumbnav.html" options=$_options inline}
где каждая строка - парметры массива (переменная => значение)
в конце каждой строки кроме последней - запятая
* Полный список параметров указан ниже
Источник
id - все дочерние категории указанной, значение - число (по уполчанию - 0, не заключается в кавычки)
ids - список идентификаторов категорий через запятую или массив идентификаторов (по умолчанию пустой). Если задана значение ids, то id игнорируется.
categories - готовый массив категорий (например $category.subcategories на странице категории, по умолчанию пустой). Если задана эта переменная, то id, ids игнорируются
exclude - список идентификаторов категорий через запятую или массив идентификаторов, которые необходимо исключить из выборки (по умолчанию пустой).
Оформление
image_cover - изображение как фон / как самостоятельный элемент, значение - boolean (true / false, по умолчанию true - изображение фоном)
text_cover - название категории под изображением / над изображением, значение - boolean (true / false, по умолчанию true - текст над изображением)
child_width - кол-во элментов в строке, значение - число (не заключается в кавычки, значение применяется для большого экрана, при уменьшении кол-во элементов в строке уменьшается)
child_height - высота элемента в px, значение - число (не заключается в кавычки, по умолчанию 150)
text_background - фон текста, значение - цвет (https://csscolor.ru/hexa/, по умолчанию rgba(255,255,255,.8))
text_color - цвет текста, значение - цвет (https://csscolor.ru/hexa/, по умолчанию #535353)
Эффект при наведении
overlay_background - наложение цвета на карточку при наведении, значение - цвет (https://csscolor.ru/hexa/, по умолчанию rgba(0,0,0,.4))
scale_hover - увеличение при наведении, значение - boolean (true / false, по умолчанию true)
rotate_hover - поворот при наведении, значение - boolean (true / false, по умолчанию true)
Дополнительные параметры
dummy - изображение/заглушка, применяется если у категории отсутствует изображение, значение - текст (url изображения, по умолчанию https://dummyimage.com/200/f8/2)
params - включение выборки доп. параметров категорий, значение - boolean (true / false, по умолчанию false)
route - если есть несколько правил магазина, то можно выбрать категории конкретной витрины, значение - строка текста либо массив (по умолчанию null)
images - массив собственных изображений категорий (по умолчанию пустой)
