Общий подход к кастомизации
Кастомизация виджета может повлиять на поддержку нового функционала виджета. Настоятельно рекомендуется воздержаться от кастомизации html и использовать изменение css стилей виджета, что в 90% случаев позволяет достигнуть желаемого результата.
Для некоторых блоков виджета доступна кастомизация html кода, а так же передача дополнительных параметров, которые будут влиять на отображение блока на странице. Для этого в коде страиницы размещается javaScript объект window.jStoreConfig, содержащий массив templates с описанием кастомизированных блоков. Для примера это может выглядеть вот так:
<script> window.jStoreConfig = { 'restaurant' : '#REST_ID#', 'templates' : [ { 'type': 'lastPurchases#top_recommendation', 'template' : '#recommendationBlockTemplate', // Шаблон блока будет браться из содержимого тега с id 'recommendationBlockTemplate' 'properties': { 'sliderUse': true, 'visible': ['order'] // Показать блок только на странице заказа } }, { 'type': 'cart#top_cart->cartItem',// Кастомизация товара в блоке корзины с id 'top_cart' 'template' : '#cartTopItem', 'properties': { 'sliderUse': true } }, // Кастомизация блока "recommendationBlock" с id "top_recommendation" { 'type': 'lastPurchases', 'properties': { 'sliderUse': true } }, // Кастомизация всех остальных блоков "lastPurchases" на странице { 'type': 'itemsFilter#hitBlock', 'template' : '#hitBlockTemplate', 'properties': { 'sliderUse': true, // Использовать слайдер 'tags': ['хит'] // Показать блок только товары с тегом хит! } } ] }; </script> <script id='recommendationBlockTemplate' type='text/template'> //здесь выводим нужный нам html шаблона //блока рекоммендаций </script>
На данный момент такой вариант кастомизации доступны следующие блоки:
type | Название | Подробная информация |
---|---|---|
itemPopUp | Попап товара | Подробнее |
cart | Информер корзины | Подробнее |
cartItem | Товар в блоке корзины | Подробнее |
itemsFilter | Вывод набора товаров в отдельном блоке | Подробнее |
lastPurchases | Последние покупки на сайте | Подробнее |
Возможные модификации через window.jStoreConfig:
Переменная | Значение | Описание | Доступна для блока |
---|---|---|---|
type | Поле type из таблицы доступных для кастомизации блоков | Тип блока, для которого нужно применить конфигурацию | Обязательный параметр |
template | CSS селектор | Идентификатор html-элемента, содержимое которого нужно использовать в качестве шаблона. Например "#cart-block" или ".cart-block". Важно, чтобы в DOM дереве был только один объект с таким селектором | Все блоки |
properties.visible | Array | Массив, содержащий коды страниц, на которых должен быть показан блок. На всех остальных блок будет скрыт. Список страниц приведён тут | Все блоки |
properties.hidden | Array | Массив, содержащий коды страниц, на которых должен быть скрыт блок. На всех остальных блок будет показан. Список страниц приведён тут | Все блоки |
properties.sliderUse | Boolean | Преобразовывать ли список товаров в слайдер( используется Slick ) |
itemsFilter |
properties.sliderConfig | Object | Настройки показа слайдера, если properties.sliderUse: true( возможные настройки тут (раздел Settings) ) |
itemsFilter |
properties.limit | Integer | Количество товаров, которые нужно выводить в блоке |
itemsFilter |
properties.categories | Array | Массив, содержащий GUID разделов, товары которых нужно показать в блоке. | itemsFilter |
properties.items | Array | Массив, содержащий GUID товаров, которые нужно показать в блоке. | itemsFilter |
properties.tags | Array | Массив, содержащий названия тегов товаров. Товар, имеющий хотя бы один из тегов, будет выводиться в блоке. | itemsFilter |
properties.showLastPurchases | Boolean | Если задан в true, то в блоке будут показаны 20 последних заказанных товаров | itemsFilter |