Общий подход к кастомизации

Кастомизация виджета может повлиять на поддержку нового функционала виджета. Настоятельно рекомендуется воздержаться от кастомизации 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