Подключение к теме

Одностраничное оформление

Плагин подключается через хуки frontend_head, frontend_order и frontend_order_cart_vars. Он добавляет чекбоксы в cart_custom_html строк товаров, панель перед списком, блок отложенных после списка и блок недоступных вместе с инициализацией в нижнюю часть корзины.

В штатном одностраничном оформлении отдельный вызов хелпера не нужен. Если тема заменила шаблоны оформления, проверьте, что она выводит эти результаты хуков и дополнительный HTML строк товаров.

Пошаговая корзина: подключить скрипт и состояние

Вставьте в шаблон корзины активной темы cart.html:

{if !empty($wa->shop->ewshopmpcartPlugin->version())}
    {$wa->shop->ewshopmpcartPlugin->cart()}
{/if}

cart() не принимает аргументов и возвращает HTML подключения скрипта, CSS при включённой настройке «Подключать оформление плагина» и начального состояния корзины. При выключенном «Включить плагин» или отсутствии кода текущей корзины метод возвращает пустую строку.

Проверка через version() защищает вызов хелпера при отсутствии или отключении плагина средствами Webasyst. Внутренняя настройка «Включить плагин» дополнительно проверяется самим cart().

Если тема уже выводит результаты хука frontend_cart, подключение происходит через него:

{foreach $frontend_cart as $_}
    {$_}
{/foreach}

Для этого варианта отдельный вызов cart() не требуется. Хелпер защищён от повторного вывода в одном запросе, если тема всё же вызвала его вместе с хуком.

Пошаговая корзина: разметить строки и места вывода

Одного вызова хелпера недостаточно для произвольной вёрстки: JavaScript должен найти строки товаров и места для блоков. Добавьте классы в существующую разметку cart.html, сохранив её содержимое и обработчики темы.

Пример структуры; комментарий внутри строки нужно заменить существующим содержимым вашей темы:

{if !empty($wa->shop->ewshopmpcartPlugin->version())}
    {$wa->shop->ewshopmpcartPlugin->cart()}
{/if}

<div class="js-ewmpcart-panel-slot"></div>

<div class="js-ewmpcart-items">
    {foreach $cart.items as $item}
        <div class="js-ewmpcart-row"
             data-product-id="{$item.product_id}"
             data-sku-id="{$item.sku_id}">
            <span class="js-ewmpcart-cbslot"></span>
            {* Здесь остаётся существующая разметка товара вашей темы. *}
        </div>
    {/foreach}
</div>

<div class="js-ewmpcart-unchecked-slot"></div>
<div class="js-ewmpcart-unavailable-slot"></div>

Этот фрагмент показывает размещение классов, а не готовую замену всей корзины. Если цикл темы содержит отдельные строки услуг, класс js-ewmpcart-row ставьте на товарные строки.

Слоты должны быть пустыми: плагин заменяет их содержимое своей разметкой. Для панели и каждого блока используйте одно место на странице.

Если отдельные слоты не заданы

Плагин умеет использовать контейнер .wa-products, кроме контейнеров собственных блоков, или js-ewmpcart-items. При наличии такого контейнера:

• панель добавляется перед списком товаров;
• «Не пойдёт в заказ» — после списка;
• «Недоступны к заказу» — после .wa-cart-details, а если этого элемента нет, после списка.

Отсутствие слота само по себе не скрывает блок. Если нет ни слота, ни подходящего контейнера, JavaScript не сможет разместить соответствующую часть интерфейса.

Кроме js-ewmpcart-row, распознаются строки .wa-product[data-id]. Для работы чекбокса им также нужны data-product-id и data-sku-id. Разметка такого вида подходит и для пошаговой корзины:

<div class="wa-products">
    {foreach $cart.items as $item}
        <div class="wa-product"
             data-id="{$item.id}"
             data-product-id="{$item.product_id}"
             data-sku-id="{$item.sku_id}">
            <div class="wa-product-body">
                {* Существующая разметка товара. *}
            </div>
        </div>
    {/foreach}
</div>

Проверка после изменения темы

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

Для изменения внешнего вида используйте переопределение шаблонов.