В инструкции описаны и приведены примеры использования data-атрибутов формы корзины и карточки товара внутри корзины.
Обязательный атрибут тега form:
<form data-cart-form action="{{ cart_items }}" method="post">
<!-- Код формы -->
</form>
Перезагрузка страницы после применения купона. Чтобы отключить перезагрузку, нужно указать false в качестве значения.
<form data-reload-on-coupon="false" data-cart-form action="{{ cart_items }}" method="post">
<!-- Код формы -->
</form>
Обязательный атрибут для позиций в корзине. В качестве значения необходимо передать ID позиции.
Обязательный атрибут для инициализации товара. В качестве значения необходимо передать ID товара.
{% for item in cart.items %}
<div data-product-id="{{ item.product.id }}" data-item-id="{{ item.id }}" class="cart-item {{ cart_class }}">
<!-- Код товара -->
</div>
{% endfor %}
Обязательный атрибут для обёртки кнопок изменения количества и инпута quantity:
<div data-quantity>
<button type="button" data-quantity-change="-1">-</button>
<input type="text" value="{{ item.quantity }}" name="cart[quantity][{{item.id}}]"/>
<button type="button" data-quantity-change="1">+</button>
</div>
Атрибут для кнопок изменения количества +/-, принимает число
Цена позиции товара
Итоговая цена позиции товара в зависимости от его количества
Итоговая цена всех позиций в корзине без учёта скидок
Итоговая цена всех позиций в корзине с учётом скидок
Количество позиций в корзине
Количество товаров в корзине
Кнопка удаления позиции из корзины
<button data-item-delete="{{ item.id }}" type="submit">{{ messages.delete }}</button>
Получение и вывод информации о скидках (в форму корзины нужно добавить data-reload-on-coupon="false")
<div data-cart-discounts-ajax></div>
Элемент, в котором будут выводиться ошибки при вводе купона или применении других скидок
<div data-cart-discounts-error></div>
Кнопка очистки корзины
<button data-cart-clear>Очистить</button>
Кнопка отправки купона
<div class="coupon-content">
<input type="text" placeholder="{{ messages.coupon_placeholder }}" name="cart[coupon]" value="{{ cart.coupon }}"/>
<button type="submit" class="coupon-button" data-coupon-submit>{{ messages.activate }}</button>
</div>
<form action="{{ cart_url }}" method="post" data-cart-form>
<input type="hidden" name="_method" value="put">
<input type="hidden" name="make_order" value="">
{% for item in cart.items %}
<div data-product-id="{{ item.product.id }}" data-item-id="{{ item.id }}">
<div data-quantity>
<input type="text" name="cart[quantity][{{ item.id }}]" value="{{ item.quantity }}">
<span data-quantity-change="-1">-</span>
<span data-quantity-change="1">+</span>
</div>
<span data-item-delete="{{ item.id }}">X</span>
</div>
{% endfor %}
<div>
<label> Купон </label>
<input type="text" name="cart[coupon]" value="{{ cart.coupon }}" />
<input type="button" value="Применить" data-coupon-submit/>
</div>
<input type="submit" value="Оформить" data-cart-submit>
<button data-cart-clear>Очистить</button>
<button data-cart-update>Обновить</button>
</form>
Добавление в корзину заданного количества товаров:
/**
* @param {Object} items объект с параметрами variant_id: quantity
* @param {Object} comments комментарий к позиции заказа. Ключ ID варианта, значение текст комментария
* @param {string} coupon купон
*/
{
items: {
123456: 2,
123457: 1
},
comments: {
123457: 'Мой комментарий'
},
coupon: 'Мой купон'
}
События класса EventBus:
EventBus.subscribe('add_items:insales:cart', function (data) {
console.log('Товар добавлен');
});
Удаление позиции из корзины:
/**
* @param {Array} items массив ID вариантов к удалению
*/
Cart.delete({
items: [160549240, 160549242]
})
События класса EventBus:
EventBus.subscribe('delete_items:insales:cart', function (data) {
console.log('Товары удалены');
});
Полное очищение корзины:
Cart.clear();
События класса EventBus:
EventBus.subscribe('clear_items:insales:cart', function (data) {
console.log('Корзина очищена');
});
Принудительное обновление данных корзины:
Cart.forceUpdate()
Удаление из корзины заданного количества товаров:
/**
* @param {Array} items объект с параметрами variant_id: quantity
*/
Cart.remove({
items: {
138231315: 1,
138231316: 1
}
})
События класса EventBus:
EventBus.subscribe('remove_items:insales:cart', function (data) {
console.log('Товары удалены');
});
Устанавливает количество для каждой позиции товара в корзине:
/**
* @param {Array} items объект с параметрами variant_id: quantity
*/
Cart.set({
items: {
138231315: 1,
138231316: 1
}
})
События класса EventBus:
EventBus.subscribe('set_items:insales:cart', function (data) {
console.log('Корзина обновлена');
});
Устанавливает купон:
/**
* @param {string} coupon код купона
*/
Cart.setCoupon({
coupon: 'Мой купон'
})
События класса EventBus:
EventBus.subscribe('set_coupon:insales:cart', function (data) {
console.log('Добавлен купон');
});
Получить состав корзины:
var order = Cart.order.get();
console.log(order);
Получить информацию о позиции по ID:
var item = Cart.order.getItemByID(138231315);
console.log(item);
