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

Выбор модификаторов в карточке товра

Вы можете вывести выбор модификаторов для товара в список каталога. За это отвечают два блока в шаблоне товара
"lsp-js-types-container" - если у вас в административном разделе выставлен флаг "Показывать групповые модификаторы с мин-макс 1 как переключатель" то этот блок выведет данные модификаторы
"lsp-js-modifiers-container" - Выведет все модификаторы товара
Вам будет необходимо кастомизировать шаблон товара и указать эти блоки.
Так же вам будет необходимо настроить css стили сайта под изменившейся контент, что персонально для каждого сайта.

Данный пример показывает, как можно вывести выбор модификаторов в список каталога:
<!-- Код необходимо разместить внутри тега <head> -->
<!-- <head> -->
<script>
//window.jStoreConfig.restaurant - Содержит идентификатор ресторана.
window.jStoreConfig = {
    "restaurant" : "3f46ac68-54f4-4ea5-84c1-b7db224a544e",
    
    'templates': [
        {
            'type': 'catalogItem',
            'template': '#pageToppings',
            'filter' : {
                'categories': [
                    '53c67733-3cfe-45bd-abc0-c3aa0d329050',//выводим только для категории "Пицца 30 см"
                    '969826ec-6e1b-45a3-b407-977bea1cceed'//и "Пицца 40 см"
                ]
            },
            'class' : 'page-toppings'//добавим класс для блока, чтобы увеличить место для него
        }
    ]
};
</script>
<script src="https://deliverywiget.iiko.ru/v2_0/libs/require.js" data-main="https://deliverywiget.iiko.ru/v2_0/app/config"></script>
<!-- <\head> -->


<!-- Шаблоны. Размещаем внутри тега <body>. Следим, чтобы не было дублей "id":  -->
<!-- <body> -->
<!-- Шаблон в списке товаров -->
<script type="text/html" id="pageToppings">
    <div class="jstore-tag lsp-block-item-name">
        <a href="<%= url %>" class="jstore-tag lsp-js-detail-link"><%= name %></a>
    </div>
    <div class="jstore-tag lsp-block-item-image">
        <a class="jstore-tag lsp-block-item-image-link lsp-js-detail-link" href="<%= url %>">
            <% if(tags.length){ %><div class="jstore-tag lsp-block-item-tags"><% _.each(tags, function(tag){ %><!--
        --><span data-id="<%= tag.translitName %>" class="jstore-tag lsp-block-item-tag <%= tag.className %>" title="<%= tag.name %>"></span><!--
    --><% }); %></div><% } %>
            <% if(typeof(mediumImageUrl) === 'string' && mediumImageUrl){ %>
            <img class="jstore-tag" src="<%= mediumImageUrl %>" title="<%= name %>">
            <% } %>
        </a>
    </div>
    <div class="jstore-tag" style="margin-bottom: 40px;">
        <div class="jstore-tag lsp-modifier-group lsp-js-types-container"></div>
    </div>
    <div class="jstore-tag lsp-block-item-price">
        <span class="jstore-tag lsp-block-item-price-value lsp-js-item-price-value"><%= cost %></span> <span class="jstore-tag lsp-block-item-measurement"><%= jStoreApp.getCurrency()%></span>
    </div>
    <span class="jstore-tag lsp-block-item-add-to-cart lsp-js-tocart lsp-button"><%= jStoreApp.t('To_cart')%></span>
</script>

<!-- Немного стилей, чтобы карточка товара выглядела удобно для пользователя -->
<style type="text/css">
    .jstore-tag.page-toppings {
        width: 45%!important;
        margin: 0 1% 10px 0!important;
        padding: 2% 10px!important;
        height: auto!important;
    }
</style><!-- </body> -->

Демонстрация кода

jstore.me © 2023