• Демонстрация возможностей
  • Инструкция к подключению
  • Быстрый старт
    • Шаг 1. Настройка iikoRMS
    • Шаг 2. Настройка iiko.Biz
    • Шаг 3. Настройка сайта
  • Дополнительные настройки
    • Индексация страниц каталога
    • Интеграция с Platius
    • Настройка iikoCard5
    • Локализация текста
    • Скрыть некоторые модификаторы
    • Рассылка писем со своего почтового сервера
    • Переименование товаров и блюд
  • Настройка оплат
    • Прием карт, оплата курьером
    • Интеграция с платежной системой PayOnline
    • Интеграция с платежной системой Альфа-Банк
    • Интеграция с платежной системой РФИ-Банк
    • Интеграция с платежной системой Сбербанк
    • Интеграция с платежной системой BePaid
    • Интеграция с платежной системой PayKeeper
  • Кастомизация блоков виджета
    • Общие настройки
    • Типы страниц
    • Фильтрация в каталоге товаров (теги)
  • Примеры кастомизации
    • Товар в списке
    • Детальная страница товара
    • Блок корзины
    • Товар в корзине
    • Блок "Сейчас покупают"
    • Блок "Счасливый час"
    • Набор товаров
    • Подтверждение заказа в "Pop up"
  • События виджета
  • Объекты виджета
  • Демо
    • Отлавливание событий корзины
    • Авторизация/Регистрация в "Pop up"
    • +/- в карточке товра
    • Выбор модификаторов в карточке товара
    • Отслеживание авторизации пользователя
  • Типовые ошибки
    • Виджет не имеет доступа к Вашему ресторану
    • Проблемы со связью с сервером
    • Продукт снят с продажи, но доступен на сайте
    • Отсутствует лицензия iikoDelivery/iikoCallcenter
    • Не работает стоп-лист
  • История обновлений
  • Демонстрация
  • Инструкция

Инструкция по подключению виджета на сайт ресторана

1. Подключение кода виджета

В заголовок страницы (внутри тега head) нужно добавить параметр, указывающий на Ваш ресторан.

<link href="https://deliverywiget.iiko.ru/v2_0/assets/css/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
	window.restaurant = "#REST_ID#"
</script>
<script data-main="https://deliverywiget.iiko.ru/v2_0/app/config" src="https://deliverywiget.iiko.ru/v2_0/libs/require.js"></script>

2. Внешний вид

Контейнер, где будут выводиться блоки виджета нужно обернуть в <div id="jstore-css">...</div>, а всем блокам задать class="jstore-block":

<div id='jstore-css'>
	...
	<div id='lsp-block-content' class='lsp-block-content'></div>
	...
</div>

Это обязательно для блоков, выводящихся на страницу без idТакже попробуйте . Для базовых блоков это условие не является обязательным

3. Настройка вывода секций на сайте

Контентная область, куда выводится меню, экран оформления заказа, формы редактирования пользовательской информации:

<div id="lsp-block-content" class="lsp-block-content"></div>

Отображение меню(подробнее):

<div id="lsp-block-tree" class="lsp-block-menu-tree"></div>

Вы можете скрыть от показа определённые пункты меню. Для этого вам необходимо добавить в тег меню data-exclude аттрибут, в котором через ";" должны быть перечислены id разделов, котрые нужно исключить.
Исключение раздела-родителя так же исключает из меню и все дочерние разделы меню.
Пример:

<!--Исключили одну категорию-->
<div class="lsp-block-menu-tree" data-exclude="48e7b46d-a93b-4f54-8369-216954215b88"></div>
<!--Исключили несколько категорий-->
<div class="lsp-block-menu-tree" data-exclude="48e7b46d-a93b-4f54-8369-216954215b88;3b983f1b-d05c-4d0c-b4fc-5370bd4804b5"></div>

ID раздела можно получить из data-id атрибута, которыё проставляется всем пунктам меню при генерации, воспользовавшись панелью разработчика

Отображение корзины:

<div id="lsp-block-cart" class="lsp-block-cart"></div>

Отображение блока подарков:

<div id="lsp-block-gift" class="lsp-block-gift"></div>

Отображение состояния пользователя:

<div id="lsp-block-userinfo" class="lsp-block-userinfo"></div>

Блок "Счасливый час"(подробнее):

<div id="lsp-block-happy-hour" class="lsp-block-happy-hour"></div>

Блок выбора текущего ресторана:

<div class="lsp-block-terminalinfo jstore-block"></div>

Блок выбора текущего города:

<div id="lsp-block-restinfo" class="lsp-block-restinfo"></div>

"Хлебные крошки":

<div id="lsp-block-breadcrumbs" class="lsp-block-breadcrumbs"></div>

"Также попробуйте"(подробнее ):

<div class="jstore-block lsp-block-recommendation"></div>

"Сейчас покупают"(подробнее):

<div class="jstore-block lsp-block-lastPurchases"></div>

Блок поиска:

<div class="jstore-tag jstore-block-search"></div>


Нагляднее можно ознакомиться вот на этой Схеме

jstore.me © 2023