Плагин позволяет реализовать функционал корзины во всплывающем окне без необходимости использования отдельной страницы корзины и страниц оформления.
Для работы используется встроенный функционал Shop-Script, плагина и тем дизайна.
Что необходимо? Настроить шаблон
- Выбрать элемент, при нажатии на который будет появляться корзина. Указать для него атрибут:
data-quickorder-cart-button
- Выбрать элемент, в котором будет информация о количестве товаров в корзине (не обязательно). Указать для него атрибут:
data-quickorder-cart-count
- Выбрать элемент, в котором будет информация об общей сумме заказа (не обязательно). Указать для него атрибут:
data-quickorder-cart-price
Готово!
Возможные трудности
Проблема: Выполнили пункт 1, но все равно при нажатии происходит переход на страницу корзины.
Решение:
а) Укажите атрибут data-quickorder-cart-button для родительского блока или
б) Оберните элемент в блок:
<div data-quickorder-cart-count>активный элемент</div>
Пример изменений для темы дизайна Гипермаркет
Открываем шаблон pane.html. Если его нет в списке, то необходимо нажать на "Новый файл" и "Выбрать из родительской темы".
Находим конструкцию:
<div class="s-pane-item {if !empty($_cart_count)}with-hover{/if}">
<div class="s-cart-wrapper {if empty($_cart_count)}is-empty{/if}" id="js-cart-wrapper">
<span class="s-label"><i class="icon16 cart"></i> [`Cart`] </span>
<span class="s-count js-cart-count">{if !empty($_cart_count)}{$_cart_count}{else}0{/if}</span>
<span class="s-price js-cart-price">{$_price}</span>
Заменяем на:
<div class="s-pane-item {if !empty($_cart_count)}with-hover{/if}" data-quickorder-cart-button>
<div class="s-cart-wrapper {if empty($_cart_count)}is-empty{/if}" id="js-cart-wrapper">
<span class="s-label"><i class="icon16 cart"></i> [`Cart`] </span>
<span class="s-count js-cart-count" data-quickorder-cart-count>{if !empty($_cart_count)}{$_cart_count}{else}0{/if}</span>
<span class="s-price js-cart-price" data-quickorder-cart-price>{$_price}</span>
Пример работы представлен на демонстрационной странице.