Добавим корзину на сайт. Angry-cart.js

Будем добавлять на сайт корзину, без использования плагина woocomemrce.

Подключаем к сайту js-плагин angry-cart.js. Из всех файлов по сути нужен только angry-cart.js. Данное решение работает на чистом js. Данные корзины хранятся в LocalStorage.

Я добавил в скрипт несколько своих небольших доработок (уменьшить кол-во на 1 единицу, изменить кол-во вручную):

const angryCartKey = 'angry-cart';

class AngryCart {

	constructor(options) {
		this.$counter = document.querySelector(options.counter),
		this.$totalPrice = document.querySelectorAll(options.totalPrice),
		// this.$cartContainer = document.querySelectorAll(options.cartContainer),
		this.__init()
	}

	__init(){
		if( localStorage.getItem(angryCartKey) )
		{
			let angryCartData = JSON.parse(localStorage.getItem(angryCartKey));
			this.$counter.innerHTML = angryCartData.length;
			this.__save(angryCartData);
		}
		else
		{
			localStorage.setItem(angryCartKey, JSON.stringify([]));
		}
	}

	__save(angryCartData){
		localStorage.setItem(angryCartKey, JSON.stringify(angryCartData));
		this.__calcTotal();
		this.outputCart();
	}

	__calcTotal(){
		try
		{
			if(this.$totalPrice.length != 0){
				
				let angryCartData = JSON.parse( localStorage.getItem(angryCartKey) ),
					total = 0,
					products = [],
					i = 0;

				Array.from(angryCartData ?? []).forEach( (product) => {
					let price = product.data.price,
						quantity = product.quantity;

					total += price * quantity;
					products[i++] = product.product_id;
				});

				if (total == 0) {
					Array.from(this.$totalPrice).forEach( (totalPrice) => {
						totalPrice.innerHTML = '';
						jQuery('.form-cart-total').val('0'); //обновим поле заказа с итоговой суммой
						jQuery('.form-cart-products').val('0'); //обновим поле заказа с id товаров
					});
				} else {
					Array.from(this.$totalPrice).forEach( (totalPrice) => {
						// totalPrice.innerHTML = total.toFixed(2); // c .00
						totalPrice.innerHTML = 'Сумма к оплате: '+total.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")+' ₽';
						jQuery('.form-cart-total').val(total); //обновим поле заказа с итоговой суммой
						jQuery('.form-cart-products').val(products.toString()); //обновим поле заказа с id товаров
					});
				}

			}
		}
		catch(error)
		{
			console.warn('No price for this item');
			localStorage.setItem(angryCartKey, JSON.stringify([]));
		}
	}

	outputCart(){
		try
		{
			angryCPR();
		}
		catch(error)
		{
			console.warn('Function angryCPR() is not defined');
		}
	}

	addToCart(product_id, data){
		let angryCartData = JSON.parse( localStorage.getItem(angryCartKey) ) ?? null,
			existingProducts = angryCartData.find(product => product.product_id === product_id);

		if( !existingProducts )
		{
			angryCartData.push({
				product_id: product_id,
				quantity: 1,
				data: data
			});
		}
		else
		{
			existingProducts.quantity++;
		}


		this.__save(angryCartData);
		this.$counter.innerHTML = angryCartData.length;
	}

	removeFromCart(product_id){
		let angryCartData = JSON.parse(localStorage.getItem(angryCartKey) ?? null),
			existingProducts = angryCartData.findIndex(product => product.product_id === product_id);

		angryCartData.splice( existingProducts, 1 );

		this.__save(angryCartData);
		this.$counter.innerHTML = angryCartData.length;
	}

	removeFromCartOne(product_id){
		let angryCartData = JSON.parse(localStorage.getItem(angryCartKey) ?? null),
			existingProducts = angryCartData.find(product => product.product_id === product_id);

		if (existingProducts.quantity > 1) {
			existingProducts.quantity--;
		} else {
			existingProducts = angryCartData.findIndex(product => product.product_id === product_id);
			angryCartData.splice( existingProducts, 1 );
		}

		this.__save(angryCartData);
		this.$counter.innerHTML = angryCartData.length;
	}

	updateFromCart(product_id){
		let angryCartData = JSON.parse(localStorage.getItem(angryCartKey) ?? null),
			existingProducts = angryCartData.find(product => product.product_id === product_id);

		var newQuantity = jQuery('#pr-' + product_id + ' input.qty').val();

		if (newQuantity == 0) {
			existingProducts = angryCartData.findIndex(product => product.product_id === product_id);
			angryCartData.splice( existingProducts, 1 );
		} else {
			existingProducts.quantity = newQuantity;
		}

		this.__save(angryCartData);
		this.$counter.innerHTML = angryCartData.length;
	}



	clearCart(){
		localStorage.setItem(angryCartKey, JSON.stringify([]));
		this.$counter.innerHTML = 0;
		this.__calcTotal();
		this.outputCart();
	}

}

Далее инициируем скрипт:

let cart = new AngryCart({
    counter: '#cartCount', // Quantity output
    totalPrice: '#totalPrice', // Cost derivation
    // cartContainer: '#cartContainer' // Cart Container
});

/* We write the function of withdrawing goods from the basket (optional, required angryCPR() ) */
function angryCPR() {
    let myCart = JSON.parse(localStorage.getItem(angryCartKey)), // "angryCartKey" - cart key in localStorage (const)
        renderBlock = document.getElementById('cartPreview');

    /* Clearing the block before displaying */
    renderBlock.innerHTML = '';

    if(myCart.length == 0) {

        renderBlock.insertAdjacentHTML('beforeEnd', `
            <div class="cart-empty">Корзина пуста</div>
        `);        

    } else {

        /* We withdraw products from the cart */
        Array.from(myCart).forEach( function(product) {
            itemTotal = (product.data.price * product.quantity).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
            itemPrice = product.data.price.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")
            renderBlock.insertAdjacentHTML('beforeEnd', `
                <div class="cart-item" id="pr-${product.product_id}">
                    <div class="cart-item-image"><img src="${product.data.image}" alt="${product.data.title}"></div>
                    <div class="cart-item-name">${product.data.title}</div>
                    <div class="cart-item-price">${itemPrice} ₽</div>
                    <div class="cart-item-quantity">
                        <button class="btn" onclick="cart.removeFromCartOne(${product.product_id})">-</button>
                        <input type="number" class="qty" value="${product.quantity}" onchange="cart.updateFromCart(${product.product_id})">
                        <button class="btn" onclick="cart.addToCart(${product.product_id})">+</button>
                    </div>
                    <div class="cart-item-total">${itemTotal} ₽</div>

                    <div class="cart-item-remove"><a onclick="cart.removeFromCart(${product.product_id})"><i class="icon-xmark1"></i></a></div>
                </div>
            `);
        });
        renderBlock.insertAdjacentHTML('beforeEnd', `
            <div class="clearCart"><button class="btn" onclick="cart.clearCart()"><i class="icon-xmark1"></i> Очистить корзину</button></div>
        `);
        

    }

}

Верстка корзины:

<div id="cartContainer">

	<div id="cartPreview"></div>

	<div id="cartTotal">
		<div id="totalPrice"></div>
	</div>

</div>

В шапку можно добавить индикатор кол-ва товаров:

<div class="col" id="header-cart">
	<a href="/cart/" title="В корзину">
		<i class="icon-cart-shopping3"></i>
		<span id="cartCount">0</span>
	</a>
</div>

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

<button class="btn" onclick="cart.addToCart(49, {title: 'Товар', price: 25000, image: '/wp-content/uploads/2023/08/image.jpg'})">В корзину</button>

Поделиться в соц. сетях: