Набор товаров
Для размещения блока необходимо разместить div c class="jstore-block lsp-block-items-filter"
Блок служит для вывода списка товаров, которые он получает через настройки window.jStoreConfig ( свойства items,categories,showLastPurchases, tags ).
Шаблон "по-умолчанию" выглядит так:
<div class="jstore-tag lsp-js-items"></div>
В div c class="lsp-js-items" добавляются блоки товаров, которые можно кастомизировать. Подробнее тут
В отдельном блоке выведем соусы и добавим им кнопки +/- вместо "в корзину":
<!-- Код необходимо разместить внутри тега <head> --> <!-- <head> --> <script> //window.jStoreConfig.restaurant - Содержит идентификатор ресторана. window.jStoreConfig = { "restaurant" : "3f46ac68-54f4-4ea5-84c1-b7db224a544e", 'templates': [ { 'type': 'itemsFilter#custom-block', 'template': '#custom-block-template', 'properties': { 'categories': [ ""//выводим конкретную категорию ] } }, { 'type': 'itemsFilter#custom-block->catalogItem', 'class': 'page-toppings', 'template': '#custom-block-item-template'//кастомизируем ещё и элементы блока } ] }; </script> <script src="https://deliverywiget.iiko.ru/v2_0/libs/require.js" data-main="https://deliverywiget.iiko.ru/v2_0/app/config"></script> <!-- <\head> --> <!-- Код размещаем перед контентной областью виджета #lsp-block-content. --> <!-- #lsp-block-content Top --> <div id="custom-block" class="jstore-block lsp-block-items-filter"></div> <!-- End of #lsp-block-content Top --> <!-- Шаблоны. Размещаем внутри тега <body>. Следим, чтобы не было дублей "id": --> <!-- <body> --> <script type="text/html" id="custom-block-template"> <h2 class="h1" style="margin: 20px 0 20px">Отдельный блок категории:</h2> <div class="lsp-js-items lsp-block-items-list"></div> </script> <script type="text/html" id="custom-block-item-template"> <div class="jstore-tag lsp-block-item-name"> <a href="<%= url %>" class="jstore-tag jstore-js-detailLink"><%= name %></a> </div> <div class="jstore-tag lsp-block-item-image"> <a class="jstore-tag lsp-block-item-image-link jstore-js-detailLink" 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><% } %> <img class="jstore-tag" title="<%= name %>" data-jstore-src="mediumImageUrl"> </a> </div> <div class="jstore-tag lsp-block-item-description" data-jstore-value="description"></div> <div class="jstore-tag lsp-block-item-price"> <span class="jstore-tag lsp-block-item-price-value" data-jstore-value="cost"></span> <span class="jstore-tag lsp-block-item-measurement"><%= jStoreApp.getCurrency()%></span> </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 select-plus-minus"> <input type="button" value="-" class="jstore-tag lsp-button-minus jstore-js-amountMinus"> <input data-jstore-value="cartCount" class="jstore-tag"> <input type="button" value="+" class="jstore-tag lsp-button-plus jstore-js-amountPlus"> </div> <!-- --> </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; } .jstore-tag.lsp-type-modifer-group-title { margin-bottom: 5px; font-weight: bold; } </style><!-- </body> --> <!-- </body> -->