+/- в карточке товра
Если для вашего товара не существует каких либо модификаторов, то существует возможность заменить стандартную кнопку "В корзину" на кнопки "+"/"-" для большего удобства пользователя
Данный пример показывает, как можно заменить кнопку "В корзину" на "+"/"-":
<!-- Код необходимо разместить внутри тега <head> -->
<!-- <head> -->
<script>
//window.jStoreConfig.restaurant - Содержит идентификатор ресторана.
window.jStoreConfig = {
"restaurant" : "3f46ac68-54f4-4ea5-84c1-b7db224a544e",
'templates': [
{
'type': 'catalogItem',
'template': '#plusMinus',
'filter' : {
'categories': [
'163f3282-2f71-4bc0-86be-a6392474e838',//Только для соусов
'5a54b622-b4c7-4976-b1ce-4aefc6617cbc'//и напитков
]
}
},
{
'type': 'itemPopUp',
'template': '#plusMinusPopUp',
'properties' : {
'closeAfterToCartSuccess' : false//После того, как товар добавлен в корзину, попап не закрываем
},
'filter' : {
'categories': [
'163f3282-2f71-4bc0-86be-a6392474e838',//Только для соусов
'5a54b622-b4c7-4976-b1ce-4aefc6617cbc'//и напитков
]
}
}
]
};
</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="plusMinus">
<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 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>
<!-- Шаблон в всплывающем окне -->
<script type="text/html" id="plusMinusPopUp">
<div class="jstore-tag lsp-popup-item-image-c">
<div class="jstore-tag lsp-popup-item-image">
<% if(tags.length){ %><div class="jstore-tag lsp-block-item-tags"><% _.each(tags, function(tag){ %><!--
--><span class="jstore-tag lsp-block-item-tag lsp-block-item-tag-<%= tag.translitName %>" title="<%= tag.name %>"></span><!--
--><% }); %></div><% } %>
<img class="jstore-tag" title="<%= name %>"
data-jstore-src="largeImageUrl">
</div>
</div>
<div class="jstore-tag lsp-popup-item-description-block">
<div class="jstore-tag lsp-popup-item-name"
data-jstore-value="name"></div>
<div class="jstore-tag lsp-popup-item-description"
data-jstore-value="description"></div>
<div class="jstore-tag lsp-js-typeModifiers-block">
<div class="jstore-tag lsp-modifier-group lsp-js-types-container"></div>
</div>
<div class="jstore-tag lsp-popup-item-price-c">
<div class="jstore-tag lsp-popup-item-count-c">
<!-- Цель кастомизации. Заменяем кнопки на нужные нам -->
<div class="jstore-tag">
<input type="button" value="-" class="jstore-tag lsp-button-minus jstore-js-amountMinus">
<input data-jstore-value="cartCount" class="jstore-tag" style="width: 30px; text-align: center">
<input type="button" value="+" class="jstore-tag lsp-button-plus jstore-js-amountPlus">
</div>
<!-- / -->
</div>
<strong class="jstore-tag lsp-popup-price-total"
data-jstore-value="count * cost"></strong> <em class="jstore-tag lsp-popup-price-total-valute"><%= jStoreApp.getCurrency()%></em>
<div class="jstore-tag jstore-share js-share" data-services="vkontakte,facebook,odnoklassniki,gplus,twitter"></div>
</div>
<div class="jstore-tag lsp-popup-energy-cont"
data-jstore-if="fiberAmount || fatAmount || carbohydrateAmount || carbohydrateAmount || energyAmount || weight">
<div class="jstore-tag lsp-popup-energy-title"><%= jStoreApp.t('energy_sum') %>:</div>
<table class="jstore-tag lsp-popup-energy-table">
<tbody>
<tr class="jstore-tag lsp-detail-table-fiberAmount"
data-jstore-if="fiberAmount">
<td class="jstore-tag lsp-popup-table-property-name"><%= jStoreApp.t('Proteins')%><span class="jstore-tag lsp-popup-table-property-enum">, <%= jStoreApp.t('Gram')%></span></td>
<td class="jstore-tag lsp-popup-table-property-value">
<span class="jstore-tag lsp-popup-table-property-value lsp-js-item-fiberAmount-value"
data-jstore-value="fiberAmount"></span>
</td>
</tr>
<tr class="jstore-tag lsp-detail-table-fatAmount"
data-jstore-if="fatAmount">
<td class="jstore-tag lsp-popup-table-property-name"><%= jStoreApp.t('Fats')%><span class="jstore-tag lsp-popup-table-property-enum">, <%= jStoreApp.t('Gram')%></span></td>
<td class="jstore-tag lsp-popup-table-property-value">
<span class="jstore-tag lsp-popup-table-property-value lsp-js-item-fatAmount-value"
data-jstore-value="fatAmount"></span>
</td>
</tr>
<tr class="jstore-tag lsp-detail-table-carbohydrateAmount"
data-jstore-if="carbohydrateAmount">
<td class="jstore-tag lsp-popup-table-property-name"><%= jStoreApp.t('Carbohydrates')%><span class="jstore-tag lsp-popup-table-property-enum">, <%= jStoreApp.t('Gram')%></span></td>
<td class="jstore-tag lsp-popup-table-property-value">
<span class="jstore-tag lsp-popup-table-property-value lsp-js-item-carbohydrateAmount-value"
data-jstore-value="carbohydrateAmount"></span>
</td>
</tr>
<tr class="jstore-tag lsp-detail-table-energyAmount"
data-jstore-if="energyAmount">
<td class="jstore-tag lsp-popup-table-property-name"><%= jStoreApp.t('Nutritional_value')%><span class="jstore-tag lsp-popup-table-property-enum">, <%= jStoreApp.t('CCal')%></span></td>
<td class="jstore-tag lsp-popup-table-property-value">
<span class="jstore-tag lsp-popup-table-property-value lsp-js-item-energyAmount-value"
data-jstore-value="energyAmount"></span>
</td>
</tr>
<tr class="jstore-tag lsp-detail-table-weight"
data-jstore-if="weight">
<td class="jstore-tag lsp-popup-table-property-name"><%= jStoreApp.t('Weight')%><span class="jstore-tag lsp-popup-table-property-enum">, <%= jStoreApp.t('Gram')%></span></td>
<td class="jstore-tag lsp-popup-table-property-value">
<span class="jstore-tag lsp-popup-table-property-value lsp-js-item-weight-value"
data-jstore-value="weight"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="jstore-tag lsp-modifiers-container lsp-js-modifiers-block">
<div class="jstore-tag lsp-popup-modifier-title"><%= jStoreApp.t('Additional_ing')%>:</div>
<div class="jstore-tag lsp-modifier-group lsp-js-modifiers-container"></div>
</div>
<div class="jstore-tag lsp-block-additional-text"
data-jstore-if="seoText"
data-jstore-value="seoText"
></div>
</div>
</script><!-- </body> -->