Блок корзины
Для отображения корзины на странице необходимо добавить тег с 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>
Внутри этого блока будут выводиться поочередно товары, добавленные пользователем в корзину. Каждый такой блок возможно кастомизировать.