Корзина во всплывающем окне

Плагин позволяет реализовать функционал корзины во всплывающем окне без необходимости использования отдельной страницы корзины и страниц оформления.

Для работы используется встроенный функционал Shop-Script, плагина и тем дизайна.

Что необходимо? Настроить шаблон

  1. Выбрать элемент, при нажатии на который будет появляться корзина. Указать для него атрибут:
    data-quickorder-cart-button        
  2. Выбрать элемент, в котором будет информация о количестве товаров в корзине (не обязательно). Указать для него атрибут:
    data-quickorder-cart-count        
  3. Выбрать элемент, в котором будет информация об общей сумме заказа (не обязательно). Указать для него атрибут:
    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}" <b style="color:#e8385c">data-quickorder-cart-button</b>>
    <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" <b style="color:#e8385c">data-quickorder-cart-count</b>>{if !empty($_cart_count)}{$_cart_count}{else}0{/if}</span>
        <span class="s-price js-cart-price" <b style="color:#e8385c">data-quickorder-cart-price</b>>{$_price}</span>