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

Блок корзины

Для отображения корзины на странице необходимо добавить тег с class "lsp-block-cart".
Базовые стили для блока корзины, завязаны на id "lsp-block-cart"
Пример:

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

Блок возможно кастомизировать.
Шаблон "по-умолчанию":

<div class="jstore-tag lsp-block-cart-inner">
    <div class="jstore-tag lsp-info-message">
        <%= jStoreApp.t( (totalItems ? 'cart_top_1' : 'cart_top_2'), {
            'totalItems' : totalItems,
            'urlsCart' : urls.cart,
            'goods' : jStoreApp.declination(totalItems,[
                jStoreApp.t('goods_5'),
                jStoreApp.t('goods_1'),
                jStoreApp.t('goods_2')
            ])
        }) %>
    </div>
    <div class="jstore-tag ordered-left-block lsp-cart-items-list"></div>
    <div class="jstore-tag lsp-info-message-bottom">
        <div class="jstore-tag jstore-cart-order-sum <%if(!(discountSum || bonusSum)){%>lsp-js-hidden<%}%>">
            <%= jStoreApp.t('Order_Sum')%>: <span class="jstore-tag lsp-block-cart-sum lsp-block-cart-sum-item"><span class="jstore-js-cart-order-sum-value"><%= costWithoutDiscount %></span> <%= jStoreApp.getCurrency()%></span><br>
        </div>
        <div class="jstore-tag jstore-cart-discount <%if(!discountSum){%>lsp-js-hidden<%}%>">
            <%= jStoreApp.t('Discount')%>: <span class="jstore-tag lsp-block-cart-discount lsp-block-cart-sum-item"><span class="jstore-js-cart-discount-value"><%= discountSum %></span> <%= jStoreApp.getCurrency()%></span><br>
        </div>
        <div class="jstore-tag jstore-cart-bonus">
            <%= jStoreApp.t('Bonus_pay')%>: <span class="jstore-tag lsp-block-cart-bonus lsp-block-cart-sum-item"><span class="jstore-js-cart-bonus-value"><%= bonusSum %></span> <%= jStoreApp.getCurrency()%></span><br>
        </div>
        <div class="jstore-tag jstore-cart-delivery">
            <%= jStoreApp.t('Delivery_pay')%>: <span class="jstore-tag lsp-block-cart-bonus lsp-block-cart-sum-item"><span class="jstore-js-cart-delivery-value"><%= deliverySum %></span> <%= jStoreApp.getCurrency()%></span><br>
        </div>
        <div class="jstore-tag jstore-cart-total">
            <%= jStoreApp.t('Total')%>: <span class="jstore-tag lsp-block-cart-total"><span class="jstore-js-cart-total-value"><%= totalCost %></span> <%= jStoreApp.getCurrency()%></span><br>
        </div>
        <% if(totalItems){ %>
        <div class="jstore-tag lsp-block-cart-order-button-cont"><a class="jstore-tag lsp-button" href="<%= urls.order %>"><%= jStoreApp.t('Make_order')%></a></div>
        <% } %>
    </div>
</div>

Код на вашем сайте будет выглядеть примерно так:

<script type='text/javascript'>
	window.jStoreConfig = {
		'restaurant' : '#REST_ID#',
		'templates' : [
		//...
			{
				'type': 'cart#my-cart',
				'template': '#my-cart-template'
			}
		//...
		]
	};
</script>
//..
<div id='my-cart'></div><!-- Где-то на странице подключаем наш блок корзины -->
//..
//далее подключаем сам шаблон
<script id='my-cart-template' type='text/template'>
<div class="jstore-tag lsp-block-cart-inner">
    <div class="jstore-tag lsp-info-message">
        <%= jStoreApp.t( (totalItems ? 'cart_top_1' : 'cart_top_2'), {
            'totalItems' : totalItems,
            'urlsCart' : urls.cart,
            'goods' : jStoreApp.declination(totalItems,[
                jStoreApp.t('goods_5'),
                jStoreApp.t('goods_1'),
                jStoreApp.t('goods_2')
            ])
        }) %>
    </div>
    <div class="jstore-tag ordered-left-block lsp-cart-items-list"></div>
    <div class="jstore-tag lsp-info-message-bottom">
        <div class="jstore-tag jstore-cart-order-sum <%if(!(discountSum || bonusSum)){%>lsp-js-hidden<%}%>">
            <%= jStoreApp.t('Order_Sum')%>: <span class="jstore-tag lsp-block-cart-sum lsp-block-cart-sum-item"><span class="jstore-js-cart-order-sum-value"><%= costWithoutDiscount %></span> <%= jStoreApp.getCurrency()%></span><br>
        </div>
        <div class="jstore-tag jstore-cart-discount <%if(!discountSum){%>lsp-js-hidden<%}%>">
            <%= jStoreApp.t('Discount')%>: <span class="jstore-tag lsp-block-cart-discount lsp-block-cart-sum-item"><span class="jstore-js-cart-discount-value"><%= discountSum %></span> <%= jStoreApp.getCurrency()%></span><br>
        </div>
        <div class="jstore-tag jstore-cart-bonus">
            <%= jStoreApp.t('Bonus_pay')%>: <span class="jstore-tag lsp-block-cart-bonus lsp-block-cart-sum-item"><span class="jstore-js-cart-bonus-value"><%= bonusSum %></span> <%= jStoreApp.getCurrency()%></span><br>
        </div>
        <div class="jstore-tag jstore-cart-delivery">
            <%= jStoreApp.t('Delivery_pay')%>: <span class="jstore-tag lsp-block-cart-bonus lsp-block-cart-sum-item"><span class="jstore-js-cart-delivery-value"><%= deliverySum %></span> <%= jStoreApp.getCurrency()%></span><br>
        </div>
        <div class="jstore-tag jstore-cart-total">
            <%= jStoreApp.t('Total')%>: <span class="jstore-tag lsp-block-cart-total"><span class="jstore-js-cart-total-value"><%= totalCost %></span> <%= jStoreApp.getCurrency()%></span><br>
        </div>
        <% if(totalItems){ %>
        <div class="jstore-tag lsp-block-cart-order-button-cont"><a class="jstore-tag lsp-button" href="<%= urls.order %>"><%= jStoreApp.t('Make_order')%></a></div>
        <% } %>
    </div>
</div>


</script>

Шаблон предусматривает использование следующих переменных:

Название Тип Описание
costWithoutDiscount Integer Стоимость заказа без учёта скидки
discountSum Integer Сумма скидки
bonusSum Integer Сумма заказа, которая будет оплачиваться бонусами
totalCost Integer Сумма заказа, за вычетом bonusSum и discountSum
totalItems Integer Количество товаров в корзине
urls.order String Ссылка на страницу оформления заказа
urls.cart String Ссылка на страницу корзины

Список товаров

Для вывода списков товаров нужно использовать тег с class "lsp-cart-items-list" в шаблоне блока корзины.
Пример:

<div class="lsp-cart-items-list"></div>

Внутри этого блока будут выводиться поочередно товары, добавленные пользователем в корзину. Каждый такой блок возможно кастомизировать.

jstore.me © 2023