Виджет корзины

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

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

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

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

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

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

 

Настройка Google Analytics и Yandex Metrica для корзины

Базовая настройка аналитики:

kaktusWidget({
	domain: kak2c_domain,
            
	basketClickCallback: function(){
    	//События аналитики при открытии корзины
      	yaCounter53862778.reachGoal('checkout_started');
      	gtag('event', 'checkout_started', {
        	'event_category' : 'ecommerce'
      	});
    },
 
    newOrderCreatedCallback: function(){
        //События аналитики при формированиии заказа
        var goalParams = {
          order_price: kaktusWidget.totalSum,
          currency: "RUB"
        }
        yaCounter53862778.reachGoal('checkout_finished', goalParams);
        gtag('event', 'checkout_finished', {
          'event_category' : 'ecommerce'
        });
    },
 });

dataLayer для расширенной электронной торговли Google Analytics совместно с Google Tag Manager корзина формирует автоматически. Также использование этого dataLayer можно настроить в Яндекс.Метрике: https://yandex.ru/support/metrica/data/e-commerce.html . Если к Вашей странице не подключена библиотека gtm.js и не настроен данный режим Яндекс.Метрики, это не на что не влияет. Однако если Вы собираетесь формировать эти события вручную, данный автоматический функционал можно отключить. Для этого при инициализации kaktusWidget укажите параметр enableDataLayer: false;

Кроме описанных выше событий открытия корзины и формирования заказа также можно использовать события добавления и удаления товаров в корзину. Для этого перед инициализацией виджета корзины добавьте следующий код:

document.addEventListener("kaktusEvent", function (e){
  if (e.detail.type == 'cart_item_add') {
    //Добавление товара в корзину. Данные добавляемого товара (включая добавленное количество) находятся в e.detail.content.item
  }
  
  if (e.detail.type == 'cart_item_removed') {
    //Удаление товара из корзины. Данные товара (включая удаляемое количество) находятся в e.detail.content.item
  }
});

В таком же обработчике событий можно реализовать более продвинутую google аналитику при оформлении заказа, которая передает не только сам факт покупки но и всю информацию о товарах в заказе. Для этого перед инициализацией виджета добавьте следующий код

document.addEventListener("kaktusEvent", function (e){
  //создан заказ
  if (e.detail.type == 'order_created') {
    var content = e.detail.content;
    var cart = kaktusWidget.getCart();

    var items = cart.items.map(function (item) {
      return {
        "id": item.productId,
        "name": item.name,
        "price": item.price,
        "quantity": item.count,
        "brand": item.brandName,
      }
    });

    var tansaction = {
      "transaction_id": content.orderId,
      "value": content.totalOrderSum,
      "currency": "RUB",
      "items": items,
    }
    gtag('event', 'purchase', tansaction);
  }
});

Стилизация корзины

Иконка корзины имеет следующую структуру

<div className="basket-round">
	<span className="basket-count">1</span>
    <span className="basket-money">1234 ₽</span>
</div>

где

Задавая стили для этих классов в файле css Вашего сайта можно изменить внешний вид корзины. Например заменить цвет иконки корзины с черного на зеленый, а кружочек с количеством покупок из нижнего правого угла перенести в верхний левый:

.basket-round {
	background-color: green !important;
}

.basket-count {
  top: 0 !important;
  left: 0;
  right: auto !important;
}

Также имеется возможность полностью заменить иконку корзины на кастомную, например вписанную в заголовок Вашего сайта.

Замена иконки корзины по умолчанию на собственную

Для заменя иконки корзины по умолчанию на свою собственную, достаточно:

Пример страницы с кастомной корзиной со всеми вышеперечисленными функциями:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Кастомная корзина</title>

	<script src="https://static.kak2c.ru/v2/kak2c.checkout.js"></script>
	<link rel="stylesheet" href="https://static.kak2c.ru/v2/kak2c.checkout.css">

	<style>
		/*Скрывает иконку корзины по умолчанию. Примечание: используя этот же css-класс корзину можно не скрывать, а изменить ее дизайн. */
	    .basket-round {
	        display: none;
	    }
	</style>

	<script>
	    document.addEventListener("DOMContentLoaded", function (){
	    	var kak2c_domain = "XXXXXX"; //	Укажите здесь Ваш идентификатор магазина

	    	document.addEventListener("kaktusEvent", function (e){
		        //Отображение количества товаров в корзине при любых его изменениях. Если Вашв иконка корзины не предусматривает отображения количества товаров - не обязетельно. ВНИМАНИЕ! 'custom-cart-quantity' заменить на ID элемента Вашей иконки корзины, в которой будет отображаться количество товаров.
		        var quantityEl = document.getElementById('custom-cart-quantity');
		        if (quantityEl) {
		        	var cart = kaktusWidget.getCart().items;
		        	if (cart) {
			        	var count = cart.reduce(function(count, item) {
			        		return count + item.count;
			        	}, 0);	
			        } else {
			        	count = 0;
			        }
		       		quantityEl.innerHTML = count;
		        };

		        //Сообщение "товар добавлен в корзину". Не обязательно.
		        if (e.detail.type == 'cart_item_add' && e.detail.content.fromOutsidePopup) {
		        	alert('Товар добавлен в корзину');
		        }
		    });

	    	kaktusWidget({
		        domain: kak2c_domain
		    });

	    	//ВНИМАНИЕ! 'custom-shopping-cart' замените на атрибут ID Вашей кастомной иконки, при клике на которую Вы хотите открывать попап корзины.
	        document.getElementById('custom-shopping-cart').addEventListener("click", function (){
	       		document.getElementsByClassName('basket-round')[0].click();     
	        });
	    });
	</script>
</head>
<body>
	<!--BODY документа здесь служит исключительно для примера. Вместо него предусмотрите логику добавления товара в корзину в зависисмости от используемой Вами интеграции с сайтом магазина. Также сверстайте свой кастомный элемент корзины. Для примера это просто ссылка с отображением количества товаров. -->
	<h1>Кастомная корзина</h1>	
	<div>
		<a href="javascript: void(0);" id="custom-shopping-cart">Корзина (всего товаров <span id="custom-cart-quantity">0</span>)</a>
	</div>

	<button onclick="kaktusWidget.changeCart({
        variantId: 'BR00T-000132',
        count: 1,
        operation: 'ADD'
    });">Добавить в корзину</button>
</body>
</html>

Интеграция в Ecwid

1. В настройках внешнего вида сайта Ecwid включите отображение артикула на странице товара. Это важно для правильной работы виджета корзины Кактус. Если Вы не хотите чтобы артикул отображался покупателю, его можно скрыть (см. комментарии в коде ниже). Но тем не менее включать в настройках его все равно обязательно.

Войдите в редактирование внешнего вида сайта.

image-1591995135914.png

Затем магазин/страница товара

image-1591995301181.png

image-1591995383089.png

image-1591995451446.png

 

2. В поле "мета-теги для верификации сайта" после уже имеющегося там кода добавьте код интеграции виджета корзины Кактус. При этом вместо "XXXXX" не забудьте указать свой ID аккауната, который можно посмотреть в настройках ЛК Кактуса.

image-1591995599898.png

<script src="https://static.kak2c.ru/v2/kak2c.checkout.js"></script>
<link rel="stylesheet" href="https://static.kak2c.ru/v2/kak2c.checkout.css">
<style>
	.details-product-purchase__checkout, .float-icons__icon--cart, .ec-footer {
		display: none !important;
	}

	/* Необязательная возможность скрыть поле артикула на страницы товара. При надобности раскомментируйте */
	/*.product-details__product-sku {
		display: none !important;	
	} */
</style>

<script>
	document.addEventListener("DOMContentLoaded", function (){
    	var kak2c_domain = "shopXXXXXX"; //	Укажите здесь Ваш идентификатор магазина

    	kaktusWidget({
	        domain: kak2c_domain
	    });

    	document.body.addEventListener('click', function(e) {
    		if (e.target.closest('.details-product-purchase__add-to-bag, .details-product-purchase__add-more')) {
    			var sku = document.querySelector('.product-details__product-sku').textContent.replace(/артикул/gui, '').trim();
    			kaktusWidget.changeCart({
					variantExtId: sku,
					count: 1, 
					operation: 'ADD' 
				});
    			event.stopPropagation();
            	event.preventDefault();
    		}
    	}, {capture: true});

    });
</script>

3. В ecwid задайте артикулы всем товарам. Если Вы не ведете артикулы, можно задать любое значение, лишь бы оно было уникально для каждого товара. Для товаров с вариантами нужно задать уникальный артикул для каждого варианта. И то же самое значение нужно указать в поле "Внешний ID" товара или варианта в ЛК Кактуса.

image-1591996199470.png

image-1591996272639.png

Интеграция в Tilda

1. Из ЛК Кактус перейдите в редактор интернет-магазина

image-1592447531907.png

Кликнув по иконке с изображением шестеренки откройте панель настроек витрины

image-1592447692555.png

Выберите вкладку "Интеграции"

image-1592447798913.png

В данной вкладке настройте счетчики Яндекс.Метрики и Google Analytics (не обязательно).

Переключатель "Режим работы по внешнему ID варианта" отвечает за то, какой код товара следует задавать в качестве "Артикула" в Тильде. Если он выключен - указывается ID товара из ЛК Кактуса. Если включен - внешний ID.

image-1592448931677.png

ID товара автоматически создается системой и его нельзя изменить. В качестве внешнего ID Вы можете задать любое значение. Например артикул. Главное чтобы оно было уникальным у всех товаров. А для товаров с вариантами - у всех вариантов всех товаров.

Примечание

При изменении любого значения во вкладке Интеграции, чтобы оно отразилось в Вашем магазине на Тильде надо заново скопировать в Тильду код виджета (см. п. 2)

2. Скопируйте содержимое поля "Виджет корзины для конструктора Тильда" из вкладки "интеграции" витрины в Html-код для вставки внутрь HEAD в Тильде.

Войдите в настройки сайта.

image-1593725864877.png

Далее "еще", "Html-код для вставки внутрь HEAD"

image-1593726077346.png

После редактирования кода обязательно заново опубликуйте все страницы сайта!

3. Для всех товаров в Тильде в поле артикул задайте значение Id или внешнего Id (в зависимости от настроек из п.1) со страницы соответствующего товара ЛК Кактус.

image-1592449279579.png

Для товаров с вариантами надо задать артикул каждого варианта в Тильде равный Id (или внешнему Id) соответствующего варианта в ЛК Кактус.

4.Для того, чтобы связать товары в кактусе и в тильде по ID следует:

А. Перейти на редактирование страницы сайта.

Screenshot_2.png

В разделе где расположены товары нажать на кнопку «Контент».

Screenshot_3.png

 

В карточке товара, который нужно связать следует нажать на «Еще: кнопка, метка, параметры».

Screenshot_4.png

Найти поле «Подзаголовок или артикул» и вписать в него ID товара из кактуса.

Screenshot_5.png

Б. Перейти в раздел товаров.

Screenshot_6.png

Выбрать товар который нужный связать и нажать на него.

Screenshot_7.png

В разделе товара нажать на кнопку "Контент".

Screenshot_8.png

Найти поле «Подзаголовок или артикул» и вписать в него ID товара из кактуса.

Screenshot_9.png

 

 

Открытие попапа корзины при каждом добавлении в нее товара

Полное описание интеграции корзины находится здесь. Нужно добавить следующий фрагмент кода:

<script>	
    document.addEventListener("kaktusEvent", function (e){
    	if (e.detail.type == 'cart_item_add' && e.detail.content.fromOutsidePopup) {
           document.getElementsByClassName('basket-round')[0].click();
        }
    });
</script>

Примечание: Если у Вас уже есть обработчик события kaktusEvent с другой логикой, рекомендуется еще один не создавать, а добавить в конец существующего (если параметр обработчика у Вас называется не "e", не забудьте заменить его имя в коде ниже):

if (e.detail.type == 'cart_item_add' && e.detail.content.fromOutsidePopup) {
  document.getElementsByClassName('basket-round')[0].click();
}

 

Интеграция в LPMotor

Подключение виджета умной корзины Кактус

Войдите в общие настройки сайта

image-1593529592525.png

image-1593529658594.png

В поле "Вставка в тэг head" добавьте следующий код

image-1593529788777.png

<script src="https://static.kak2c.ru/v2/kak2c.checkout.js"></script>
<link rel="stylesheet" href="https://static.kak2c.ru/v2/kak2c.checkout.css">

<script>
    var kak2c_domain = "shopXXXXXX";

    document.addEventListener("DOMContentLoaded", function (){
        kaktusWidget({
            domain: kak2c_domain,
        });

        var buttons=document.querySelectorAll('a[href^="#order"]');

        if (buttons.length) {
	        buttons.forEach(function(elem) {
	        	elem.addEventListener('click', function(event) {
		            event.preventDefault();
		            event.stopPropagation();
		            var article = $(this).attr('href').replace(/^#order:?/gi, '').trim();
		            if (article) {
		                kaktusWidget.changeCart({
							variantId: article, 
							count: 1, 
							operation: 'ADD' 
						});
		            }
		        })
	        });
	    }
    });
    
</script>

Внимание! В строке

var kak2c_domain = "shopXXXXXX";

XXXXXX заменить на ID аккаунта, который можно посмотреть в настройках ЛК Кактус.

Создание кнопки для добавления товара в корзину

Войдите в редактор страницы IPMotor. Добавьте на Вашу страницу новую кнопку.

image-1593530247544.png

image-1593530288683.png

Кликните на эту кнопку, затем войдите в ее редактирование. Выберите Действие - "Переход по ссылке"

image-1593530593983.png

В качестве ссылки задайте следующую строку (начиная со знака "#", без пробелов)

#order:XXXX

Вместо XXXX укажите ID товара, который должна добавлять в корзину эта кнопка. ID товара можно посмотреть в личном кабинете Кактуса:

image-1593530876179.png

Примечание: для товаров с вариантами нужно указывать ID варианта.

Вместо ID товара или варианта можно использовать артикул, который в этом случае указывается в поле "Внешний ID" ЛК Кактуса. Для этого нужно изменить код из предыдущего раздела: фрагмент

 kaktusWidget.changeCart({
   variantId: article, 
   count: 1, 
   operation: 'ADD' 
 });

Заменить на

kaktusWidget.changeCart({
   variantExtId: article, 
   count: 1, 
   operation: 'ADD' 
 });

Интеграция в WordPress

При наличии WooCommerce (или одной из тем, базирующихся на нем)

1. Зайти в редактор тем WP и найти там файл, содержащий head всех страниц. Обычно он называется header.php

image-1594993490487.png

2. Добавить в <head> страницы следующий код:

  <script src="https://static.kak2c.ru/v2/kak2c.checkout.js"></script>
  <link rel="stylesheet" href="https://static.kak2c.ru/v2/kak2c.checkout.css"> 
  <script>
    var kak2c_domain = "shopXXXX";
      document.addEventListener('DOMContentLoaded', function () {
      kaktusWidget({
            domain: kak2c_domain,
		  
        	//Аналитика. Это примерный код. Вместо YYYY подставьте ID вашего счетчика Яндекс. 
        	//Если Вы используете счетчик, отричный от Яндекс.Метрики замените этот код на код Вашей метрики. 
        	//Необязательно. Если аналитика вообще не нужна, удалите франмент до комментария "Конец аналитики"
		  	basketClickCallback: function(){
				//События аналитики при открытии корзины
				yaCounterYYYY.reachGoal('checkout_started');
			},

            newOrderCreatedCallback: function(){
              //События аналитики при формированиии заказа
              var goalParams = {
                order_price: kaktusWidget.totalSum,
                currency: "RUB"
              }
              yaCounterYYYY.reachGoal('checkout_finished', goalParams);
            },
        	//Конец Аналитики
          });
       
      //Лисенер клика по кнопке "купить"
      jQuery('body').on('click', "a[href='#buy']", function(e){
        e.preventDefault();
		var varForm = jQuery(this).closest('.variations_form');
		var article = '';
		if (varForm.length) {
			//Товар с вариантами
			var variations = JSON.parse(varForm.attr('data-product_variations'));
			var variationId = varForm.find('input.variation_id').val();
			if (!variationId) {
				return;
			}
			variations.some(function(variation) {
				if(variation.variation_id == variationId) {
					article = variation.sku;
					return true;
				}
			});
		} else {
			article = jQuery(this).data('itemId');	
		}
		if (article) {
			kaktusWidget.changeCart({
				variantExtId: article, 
				count: 1, 
				operation: 'ADD', 
			});
		}
      });
    }); 
  </script>

Внимание! Вместо "XXXXX" не забудьте указать свой ID аккауната, который можно посмотреть в настройках ЛК Кактуса.

Вместо YYYY - ID Вашего счетчика в Яндекс.Метрике. Или если Вы не используете Яндекс.Метрику - удалите код аналитики (см. комментарии по коду). Подробное руководство по подключению аналитики.

3. Найдите в коде темы все кнопки, при нажатии на которые товар должен добавляться в корзину. Файлы в которых они расположены зависят от темы. Возможно этих файлов вообще нет в теме, тогда их надо создать скопировав из кода плагина Woocommerce (см. документацию WP по созданию тем). И модифицируйте их код наподобие следующего:

<a href="#buy" data-item-id="<?php echo $product->sku ?>" name="add-to-cart" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></a>

Выделенный жирным фрагмент (включая, что кнопка должна представлять из себя именно тег <a>) важен для правильной работы кнопки. Остальной код рекомендуется не копировать отсюда а оставить тот который есть в теме, чтобы сохранить внешний вид кнопки. Или кастомизировать на свое усмотрение.

4. В каталоге товаров WP проставьте для всех товаров Артикул (или любой другой удобный Вам идентификатор лишь бы он был уникален для каждого товара и варианта). Для простого товара:

image-1594995617940.png

Для вариантного товара. Важно! Это нужно сделать отдельно для каждого варианта:

image-1594995883927.png

5. Такие же артикулы нужно проставить в полях "Внешинй ID" товаров (или вариантов для товаров с вариантами) в ЛК Кактуса. Важно! Сопоставление товаров в ЛК Кактус выполняется именно по полю "Внешний ID", а не Артикул.

Без WooCommerce (каталог товаров отсутствует, кнопка "Добавить в корзину" добавляется вручную к верстке и вручную привязывается ко внешнему ID товара в Кактусе)

В п.2 добавить следующий код:

<script src="https://static.kak2c.ru/v2/kak2c.checkout.js"></script>
<link rel="stylesheet" href="https://static.kak2c.ru/v2/kak2c.checkout.css">

<script>
    var kak2c_domain = "shopXXXXXX";

    document.addEventListener("DOMContentLoaded", function (){
        kaktusWidget({
            domain: kak2c_domain,
        });

        var buttons=document.querySelectorAll('a[href^="#buy"]');

        if (buttons.length) {
	        buttons.forEach(function(elem) {
	        	elem.addEventListener('click', function(event) {
		            event.preventDefault();
		            event.stopPropagation();
		            var article = $(this).attr('href').replace(/^#buy:?/gi, '').trim();
		            if (article) {
		                kaktusWidget.changeCart({
							variantExtId: article, 
							count: 1, 
							operation: 'ADD' 
						});
		            }
		        })
	        });
	    }
    });
    
</script>

Внимание! Вместо "XXXXX" не забудьте указать свой ID аккауната, который можно посмотреть в настройках ЛК Кактуса.

Код приведен без аналитики. Если она нужна, она будет аналогична варианту с Woocommerce, можно скопировать оттуда. Подробное руководство по подключению аналитики.

3. В верстку добавить кнопки добавления товара в корзину

<a href="#buy:NNNNNN">Добавить в корзину</a>

где вместо NNNNNN указать Внешний ID товара или варианта (для товара с вариантами) из ЛК Кактус. Код приведен в минимально необходимом для работы кнопки виде. Скорее всего к нему следует добавить классы или стили для придания кнопке желаемого вида. А также заменить текст кнопки.

пп.4 не нужен. Но нужно задать всем товарам и вариантам в ЛК Кактус внешний ID, как это описано в п.5.

Внимание! Весь код в этом руководстве сильно зависит от используемой темы WP и может потребоваться его модификация.

Интеграция с Platforma LP

Для интеграции корзины Кактус необходимо зайти в админку сайта на Platforma LP и открыть настройки необходимой страницы.

image-1599743103520.png

В разделе Метрика и скрипты нажать кнопку "Добавить плагин".

image-1599743214067.png

В открывшемся списке выбрать "Произвольный код".

image-1599743302089.png

Плагину нужно задать имя, и в "Произвольный код HEAD" вставить следующее:

<script src="https://static.kak2c.ru/v2/kak2c.checkout.js"></script>
<link rel="stylesheet" href="https://static.kak2c.ru/v2/kak2c.checkout.css">

<script>
    var kak2c_domain = "shopXXXXXXX";

    document.addEventListener("DOMContentLoaded", function (){
        kaktusWidget({
            domain: kak2c_domain,
        });

    });
  
  function add2cart(item) {
    kaktusWidget.changeCart({
    variantId: item, 
    count: 1, 
    operation: 'ADD' 
    });
  }
    
</script>

shopXXXXXXX необходимо заменить на ID магазина в формате shop + ID аккаунта в Кактусе (можно найти в настройках).

image-1599743609300.png

image-1599743366265.png

Сохранить плагин и проверить, что он включён.

image-1599743677656.png

Далее открыть редактор страницы.

image-1599743726898.png

Для кнопки "Купить" выбрать действие "Выполнить Javascript" и в соответствующее поле вставить:

add2cart('1040');

1040 -- ID товара в Кактусе, который можно найти в ЛК Кактус в разделе Товары.

image-1599743900864.png

image-1599743766033.png

 

Интеграция с MODX

Установка корзины Кактус в CMS MODX

В панели управления MODX перейти в Элементы - Шаблоны. Составляющие вашего магазина на MODX можно кастомизировать по своему усмотрению. В случае, на примере которого описана инструкция, необходимо зайти в шаблон Home.

image-1599723877215.png

В открывшемся поле с кодом шаблона в тег head вставить следующее:

<!-- умная корзина kak2c -->
	<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";
	 kaktusWidget({
      	domain: kak2c_domain,
      
      	//Необязательные коллбэки. Назначение похоже на события выше.
      	basketClickCallback: function(){
          //Вызывается при открытии попапа корзины
        },

        newOrderCreatedCallback: function(){
          //Вызывается при создании заказа
        }
    });
    $(".open-cart").on('click', function(event) {
            event.stopPropagation();
            event.preventDefault();
            var productId = $(this).data('productId');
            console.log('productId: ' + productId);
            kaktusWidget.changeCart({
							variantId: productId,
							count: 1, 
							operation: 'ADD'
						});
						setTimeout(function () {
							$(".basket-round").click();
						}, 1000);	
			
		});
  });
	</script>
	
	<!-- /умная корзина kak2c -->

shopXXXXXX необходимо заменить на ID аккаунта, который можно найти в ЛК Кактус в Настройках.

Установка кнопки "Купить"

Зайдите в раздел Элементы - Чанки и выберите необходимый чанк, в котором будет размещаться кнопка.

image-1599725491274.png

Код кнопки:

	<a href="javascript:void(0);" class="shop__btn btn add_item open-cart quick-order__link" data-product-id="[[+productId]]">Купить</a>
Связка товаров

Для корректной интеграции товаров необходимо поле идентификатора, связывающее товары, заведённые в MODX, с товарами в Кактусе.

В разделе Элементы - Дополнительные поля необходимо создать новое поле идентификатора- в нашем случае добавить дополнительную колонку к существующей форме товаров. 

image-1599726178307.png

Создать новое дополнительное поле tvproductId

Инструкцию о создании дополнительных полей в MODX можно найти здесь.

image-1599728980346.png

После чего данное поле необходимо добавить в существующую форму товара.

image-1599728674473.png

image-1599729233460.png

После этого в разделе с товарами появится искомая колонка.

image-1599726178307.png

ID товара можно найти в Личном кабинете Кактуса в разделе Товары - Все товары в карточке искомого товара.

image-1599729503730.png

 

 

Интеграция с Shop-Script

Для установки умной корзины Кактус в магазин на Shop-Script зайдите в админку магазина, перейдите во вкладку Сайт и откройте Настройки сайта. 

В поле "Дополнительный JavaScript-код для вставки перед закрывающим тегом </head>" вставьте приведённый ниже код.

image-1602146343628.png

<script src="https://static.kak2c.ru/v2/kak2c.checkout.js"></script>
<link rel="stylesheet" href="https://static.kak2c.ru/v2/kak2c.checkout.css">

<script>
    var kak2c_domain = "shopXXXXXXX";

    document.addEventListener("DOMContentLoaded", function (){
        kaktusWidget({
            domain: kak2c_domain,
        });
    
    //
    $('.js-submit-button').on('click', function(event) {
      event.stopPropagation();
      event.preventDefault();
      var productExtId = $('input[name ="product_id"]').val();
      console.log("product_id: " + productExtId);
      add2cart(productExtId)
    });

    });
  
  function add2cart(item) {
    kaktusWidget.changeCart({
    variantExtId: item, 
    count: 1, 
    operation: 'ADD' 
    });
  }
    
</script>

shopXXXXXXX нужно взять в ЛК Кактус в Настройках, где XXXXXXX -- это ID вашего аккаунта.

image-1602146715636.png

После этого в админке Shop-Script перейти во вкладку Магазин, выбрать раздел Товары -- Все товары. ID товара в Shop-Script необходимо скопировать во Внешний ID товара в Кактусе.

image-1602147118068.png

 

image-1602147196099.png

Интеграция с Magento

Установка корзины

Зайдите в админку вашего сайта на Magento. На панели управления выберите "Система", и в выпадающем списке выберите "Конфигурация".

image-1603772933609.png

В Конфигурации выбрать Дизайн.

image-1603772990559.png

В разделе Дизайн выбрать HTML заголовок, после чего выбрать Разнообразные скрипты.

image-1603773031936.png

image-1603773068066.png

Вставить в поле следующее:

<!-- Kak2c checkout -->
<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 = "shop4547084"; //	Укажите здесь Ваш идентификатор магазина
    
    //Собственно инициализация виджета корзины
    kaktusWidget({
      	domain: kak2c_domain,
      
      	//Необязательные коллбэки. Назначение похоже на события выше.
      	basketClickCallback: function(){
          //Вызывается при открытии попапа корзины
        },

        newOrderCreatedCallback: function(){
          //Вызывается при создании заказа
        }
    });
	
	var add2cartButtons = document.getElementsByClassName("addtocart");
	for (var i = 0; i < add2cartButtons.length; i++) {
		//add2cartButtons[i].addEventListener('click', add2cart, false);
		addSomeEvent('click', add2cartButtons[i], add2cart);
	}
	
	var add2cartButtons2 = document.getElementsByClassName("btn-cart");
	for (var i = 0; i < add2cartButtons2.length; i++) {
		//add2cartButtons2[i].addEventListener('click', add2cart2, false);
		addSomeEvent('click', add2cartButtons2[i], add2cart2);
	}
    	
  });
  
function getProductExtId(onClickString) {
	var startIndex = onClickString.indexOf('/product/') + 9;
	var endIndex = onClickString.indexOf('/form_');
	return onClickString.substring(startIndex, endIndex);
}

function addSomeEvent(evnt, elem, func) {
   if (elem.addEventListener)  // W3C DOM
      elem.addEventListener(evnt,func,false);
   else if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }
   else { // No much to do
      elem["on"+evnt] = func;
   }
}

var add2cart = function() {
    var attribute = this.getAttribute('onclick');
	var extId = getProductExtId(attribute);
	console.log(extId);
	kaktusWidget.changeCart({
		variantExtId: extId,
		count: 1, 
		operation: 'ADD'
	});
};
var add2cart2 = function() {
	var offerFormAction = document.getElementById("product_addtocart_form").getAttribute('action');
	var qtyVal = parseInt(document.getElementById("qty").value);
	var extId = getProductExtId(offerFormAction);
	console.log(extId);
	kaktusWidget.changeCart({
		variantExtId: extId,
		count: qtyVal, 
		operation: 'ADD'
	});
	
}; 

//# sourceURL=kak2cInit.js
</script>
<!-- /Kak2c checkout -->

Внимание! В shopXXXXXXX вместо XXXXXXX нужно указать ваш идентификатор магазина в ЛК Кактус в разделе Настройки -- Общие.

image-1603774130751.png

Связка товаров

В админке сайта зайти в Каталог и найти товары. Значения ИД из Magento скопировать в поле Внешний ID в ЛК Кактус.

image-1603773342352.png

Внешний ID можно найти непосредственно в карточке товара в ЛК Кактус.

image-1603773705473.png

Интеграция с Insales

Установка корзины Кактус в Insales

В админ панели Insales перейти в Настройки > Настройки сайта > Счётчики и коды.

image-1629731155571.png

В поле "JavaScript-код для вывода на всех страницах магазина" вставить следующее:

<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 (){
        kaktusWidget({
            domain: "shopXXXXXXX",            
        });
     	$('.header__cart').hide();
        $('.add-cart-counter__btn').on('click', function(event) {
            event.stopPropagation();
            event.preventDefault();
            var extId = $('.sku-value').text();
            if (extId) {
				console.log('extId: ' + extId)
                kaktusWidget.changeCart({
                    variantExtId: extId,
                    count: 1,
                    operation: 'ADD'
                });
            }
        });
    });
  //# sourceURL=kak2c_cart.js
</script>

Код для вставки выше проверялся на работоспособность только с шаблоном дизайна "Fourth". Работоспособность на других шаблонах не гарантируется.

В зависимости от используемого вами шаблона вам может понадобиться изменить определённые детали в скрипте для его корректной работы.

В shopXXXXXXX значение XXXXXXX необходимо заменить на ID аккаунта, который можно найти в ЛК Кактус в Настройках.

Для оптимальной работы корзины поле Внешний ID в карточке товара в Кактусе должно совпадать с Артикулом товара в InSales.

Обратите внимание, что заказы, оформляющиеся через корзину Кактуса, автоматически попадают в ЛК Кактуса, минуя админку InSales.