Руководство для разработчиков виджета корзины

Инициализация корзины:

<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 = "shopXXXXXX"; //	Укажите здесь Ваш идентификатор магазина

 

 //Необязательные обработчики событий корзины. Могут использоваться например для генерации событий аналитики, вывода сообщений пользователю 

 //типа "товар добавлен в корзину" и т.п.

 document.addEventListener("kaktusEvent", function (e){

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

 	//свою кастомную иконку корзины и это количество и сумма будут изменяться при любых действиях пользователя с корзиной.

 	var cart = kaktusWidget.getCart();

 	console.log(cart.items); //Получение товаров в корзине

 console.log(cart.promocode); //Получение учтенного в цене заказа валидного промокода

 	//...

 

 	//Для обработки более специфичных событий, например отдельно только добавления товара в корзину, можно анализировать вид события: 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,

 

 	//Если это значение указано, корзина будет работать не с продакшн, а с тестовым сервером Кактус. При создании аккаунта на продакшн,

 //на тестовом одноименный аккаунт автоматически не создается. Это надо учитывать при указании domain совместно с ключем host

 	host: '//app-test.kak2c.ru',

 

 	//Необязательные значения по умолчанию

 	default: {

 city: 'Москва', // выбранный город доставки по умолчанию

 promocode: 'promocodeName' // промокод, который будет применяться по умолчанию

 },

 

 	//Необязательные коллбэки. Назначение похоже на события выше.

 	basketClickCallback: function(){

 //Вызывается при открытии попапа корзины

 },

 newOrderCreatedCallback: function(){

 //Вызывается при создании заказа

 }

 });

 	

 };

</script>

Добавление или удаление товар из корзины:

kaktusWidget.changeCart({

	variantId: 12345, //ID варианта товара. Можно посмотреть в ЛК2. Если у товара не задано несколько вариантов id единственного варианта будет равен id товара.

 	//variantExtId: 'AB123CD', - можно указать вместо variantId. Тогда поиск варианта товара будет выполняться не по id а по полю "Внешинй Id". 

 	//которому в ЛК можно задать любое произвольное значение. Например указать его равным артикулу товара. И таким образом реализовать добавление товара по артикулу.

	count: 1, //Количество добавляемых или удаляемых товаров

	operation: 'ADD' //или 'DELETE' 

});

Автоматическое добавление промокода:

kaktusWidget.setDefaultPromocode('promocodeName'); // 'promocodeName' заменить на имя промокода

Примером использования событий и коллбэков корзины может служить работа с аналитикой.

Визуальная настройка иконки корзины описана здесь.

Полная замена иконки корзины на кастомную. Тоже может служить примером работы с событиями для обновления количества товаров в кастомной корзине, а также вывода сообщения "товар добавлен в корзину".