Руководство для разработчиков виджета корзины
Инициализация корзины:
<script src="https://static.kak2c.ru/v2/kak2c.checkout.js"></script>
<link rel="stylesheet" href="https://static.kak2c.ru/v2/kak2c.checkout.css">
<script>
document.addEventListener("DOMContentLoaded", function (){
var kak2c_domain = "XXXXXX"; // Укажите здесь Ваш идентификатор магазина
//Необязательные обработчики событий корзины. Могут использоваться например для генерации событий аналитики, вывода сообщений пользователю
//типа "товар добавлен в корзину" и т.п.
document.addEventListener("kaktusEvent", function (e){
//Здесь можно обработать любые изменения набора товаров в корзине, выбора доставки и т.п. Например вывести количество и сумму покупки в
//свою кастомную иконку корзины и это количество и сумма будут изменяться при любых действиях пользователя с корзиной.
var cart = kaktusWidget.getCart().items; //Получение товаров в корзине
//...
//Для обработки более специфичных событий, например отдельно только добавления товара в корзину, можно анализировать вид события: e.detail.type
//Добавление товара в корзину. Не важно новый, или дюбавлено количество к существующему.
if (e.detail.type == 'cart_item_add') {
//В e.detail.content.fromOutsidePopup содержится булево занчение, указывающее что товар был добавлен в корзину не при помощи
//кнопок "+" и "-" внутри попапа корзины. Может быть полезен поскольку сообщение "товар добавлен в корзину" не надо выводить,
//когда корзина уже открыта.
//Данные добавляемого товара (включая добавленное количество) находятся в e.detail.content.item.
//e.detail.content.item.count - количество, добавленное за данную операцию, а не всего в корзине
}
//удаление товара из корзины. Кнопкой удаления или клавишей минус. Не важно, удален ли товар или только уменьшено его количество.
if (e.detail.type == 'cart_item_removed') {
//Данные события аналогичны cart_item_add
}
//Другие события:
//init_complete - корзина инициализирована
//item_removed - удаление товара из корзины. Выполнятеся вместе с cart_item_removed, но только в том случае если товар полностью удален,
//а не только уменьшено количество
//order_created - создан заказ
});
//Собственно инициализация виджета корзины
kaktusWidget({
domain: kak2c_domain
//Необязательные коллбэки. Назначение похоже на события выше.
basketClickCallback: function(){
//Вызывается при открытии попапа корзины
},
newOrderCreatedCallback: function(){
//Вызывается при создании заказа
}
});
};
</script>
Добавление или удаление товар из корзины:
kaktusWidget.changeCart({
variantId: 12345, //ID варианта товара. Можно посмотреть в ЛК2. Если у товара не задано несколько вариантов id единственного варианта будет равен id товара.
count: 1, //Количество добавляемых или удаляемых твоаров
operation: 'ADD' //или 'DELETE'
});
Примером использования событиямйсобытий и коллбэков корзины может служить работа с аналитикой.
Визуальная настройка иконки корзины описана здесь.
Полная замена иконки корзины на кастомную. Тоже может служить примером работы с событиями для обновления количества товаров в кастомной корзине, а также вывода сообщения "товар добавлен в корзину".