mixin catalog.twig

Подключает JavaScript библиотеку для реализации функционала корзины в каталоге.

Опции скрипта

Ключ	По-умолчанию	Описание
storage	'catalog-cart'	Ключ под которым в localStorage хранятся данные корзины
init.listeners	true	Инициализировать ли слушатели событий автоматически
init.handlers	true	Инициализировать ли обработчики автоматически
cart.columns	[...]	Настройка колонок корзины
cart.style	'table'	На основе каких тегов генерировать таблицу 1. table, 2. div
cart.class	''	Дополнительный класс корзины
cart.url	''	Адрес обработчика корзины
selectors	{}	Селекторы для меток, свойств, блоков и кнопок
events	{}	Дополнительные обработчики событий

cart.columns

Параметры колонки корзины:

{
    label: '', // заголовок
    attr: 'thumb', // тип колонки
    view: null, // html содержимое
    text: null, // зарезервировано
    class: null, // имя класса колонки
    style: null // стили колонки
}

cart.columns.attr

Варианты значения: title, thumb, decrement, increment, quantity, price, total, remove

cart.style

Таблица корзины может быть сгенерирована на основе table или div блоков, в зависимости от нужд.

selectors

Список селекторов по-умолчанию, значения можно изменить на удобные.

selectors: {
    'product': 'data-catalog-product', // продукт
    'product-attr': 'data-catalog-product-attr', // атрибут продукта
    'product-add': 'data-catalog-product-add', // кнопка добавления продукта в корзину
    'cart': 'data-catalog-cart', // место для корзины
    'cart-data': 'data-catalog-cart-data', // поле корзины
    'cart-checkout': 'data-catalog-cart-checkout', // кнопка отправки корзины
    'count-items': 'data-catalog-cart-count', // счетчик количества наименований
    'count-total': 'data-catalog-cart-total', // счетчик общей стоимости товаров
}

Селекторы используются для упрощения поиска товара и его параметров.

events

events: {
    'on:ready': null,
    'on:cart': null,
    'on:cart:add': null,
    'on:cart:update': null,
    'on:cart:remove': null,
    'on:cart:remove:all': null,
    'on:cart:checkout:before': null,
    'on:cart:checkout:after': null,
}

Эти события будут отрабатывать в нужное время.

Кроме того, эти события можно слушать через $(window):

$(window).on('event:catalog:ready', (data, cart, window_catalog) => { ... });

Пример использования

<div class="row">
    <div class="col-md-12">
        В корзине <span data-catalog-cart-count>0</span><br>
        На сумму <span data-catalog-cart-total>0</span>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <section data-catalog-product>
            <h2>Товар 1</h2>
            <h3>300.00</h3>
            
            <input type="number" data-catalog-product-attr="quantity" min="1" value="1">
            <a href="#" data-catalog-product-add>В корзину</a>
            
            <div style="display: none;">
                <span data-catalog-product-attr="url">/catalog/example/product</span>
                <span data-catalog-product-attr="title">Товар 1</span>
                <span data-catalog-product-attr="price">300.00</span>
            </div>
        </section>
        
        <section data-catalog-product>
            <h2>Товар 2</h2>
            <h3>250.00</h3>
            
            <input type="number" data-catalog-product-attr="quantity" min="1" value="1">
            <a href="#" data-catalog-product-add>В корзину</a>
            
            <div style="display: none;">
                <span data-catalog-product-attr="url">/catalog/example/other-product</span>
                <span data-catalog-product-attr="title">Товар 2</span>
                <span data-catalog-product-attr="price">250.00</span>
            </div>
        </section>
    </div>
</div>

<div class="row">
    <div class="col-md-12" data-catalog-cart></div>
</div>

<script>
    window.catalog = {
        cart: {
            columns: [
                {label: '', attr: 'thumb', view: null, text: null, class: null, style: 'width: 10%; text-align: center;'},
                {label: 'Наименование', attr: 'title', view: null, text: null, class: null, style: null},
                {label: 'Артикул', attr: 'vendorcode', view: null, text: null, class: null, style: null},
                {label: '-', attr: 'decrement', view: null, text: null, class: null, style: 'width: 10%; text-align: center;'},
                {label: 'Количество', attr: 'quantity', view: null, text: null, class: null, style: 'width: 15%;'},
                {label: '+', attr: 'increment', view: null, text: null, class: null, style: 'width: 10%; text-align: center;'},
                {label: 'Стоимость', attr: 'price', view: null, text: null, class: null, style: 'text-align: right;'},
                {label: 'Всего', attr: 'total', view: null, text: null, class: null, style: 'text-align: right;'},
                {label: 'Убрать', attr: 'remove', view: null, text: null, class: null, style: 'text-align: center;'},
            ],
            style: 'table'
        },
        events: {
            'on:cart:update': (data, cart, obj) => {
                alert('Корзина обновлена' + data.title + ' (x' + data.quantity + ') теперь в корзине.');
            },
            'on:cart:add': (data) => {
                alert('Товар добавлен ' + data.title + ' (x' + data.quantity + ') в корзине.');
            }
        }
    }
</script>

{% include 'mixin/catalog.twig' %}