Skip to main content

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

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

  • Скрыть существующую иконку корзину (скрыть класс .basket-round)
  • Создать свои иконку корзины с любым другим дизайном и указать для неё класс .custom-shopping-cart
  • Если необходимо, в иконку корзины можно добавить иконку количества. Чтобы количество в ней обновлялось при любых действиях в корзине, нужно при событии kaktusEvent получать данные о товарах kaktusWidget.getCart().items и обновлять цифру в иконке количества
  • Если необходимо, возможно сделать свой собственный попап "Товар добавлен в корзину". Для этого возможно при типе события cart_item_add отобразить свой попап.

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

<!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>
Наверх