Skip to main content

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

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

<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' заменить на имя промокода

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

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

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

 

Наверх