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

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

```HTML
<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>
```

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

```JavaScript
kaktusWidget.changeCart({
	variantId: 12345, //ID варианта товара. Можно посмотреть в ЛК2. Если у товара не задано несколько вариантов id единственного варианта будет равен id товара.
  	//variantExtId: 'AB123CD', - можно указать вместо variantId. Тогда поиск варианта товара будет выполняться не по id а по полю "Внешинй Id". 
  	//которому в ЛК можно задать любое произвольное значение. Например указать его равным артикулу товара. И таким образом реализовать добавление товара по артикулу.
	count: 1, //Количество добавляемых или удаляемых товаров
	operation: 'ADD' //или 'DELETE' 
});
```

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

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

Примером использования событий и коллбэков корзины может служить [работа с аналитикой](https://wiki.kak2c.ru/books/%D0%BA%D0%B0%D0%BA%D1%82%D1%83%D1%81-%D0%B4%D0%BB%D1%8F-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2/page/%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-google-analytics-%D0%B8-yandex-metrica-%D0%B4%D0%BB%D1%8F-%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D1%8B).

Визуальная настройка иконки корзины описана [здесь](https://wiki.kak2c.ru/books/%D0%BA%D0%B0%D0%BA%D1%82%D1%83%D1%81-%D0%B4%D0%BB%D1%8F-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2/page/%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D1%8B).

[Полная замена иконки корзины на кастомную](https://wiki.kak2c.ru/books/%D0%BA%D0%B0%D0%BA%D1%82%D1%83%D1%81-%D0%B4%D0%BB%D1%8F-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2/page/%D0%B7%D0%B0%D0%BC%D0%B5%D0%BD%D0%B0-%D0%B8%D0%BA%D0%BE%D0%BD%D0%BA%D0%B8-%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D1%8B-%D0%BF%D0%BE-%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E-%D0%BD%D0%B0-%D1%81%D0%BE%D0%B1%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D1%83%D1%8E). Тоже может служить примером работы с событиями для обновления количества товаров в кастомной корзине, а также вывода сообщения "товар добавлен в корзину".