Работа с корзиной WooCommerce. Скрипты

Для начала создаем блок с кнопками, где будет находится кнопка "Купить" и так же сразу сделаем разметку всплывающего сообщение о добавлении в корзину.

Пример

<div class="container-003__items-itm-links">
	<a class="container-003__items-itm-links-lnkbuy cart_add<?php echo $product->get_id(); ?>">Купить</a>
	<p id="rec_cart_info<?php echo $product->get_id(); ?>" class="container-003__items-itm-links-cartinfotxt">
		Товар добавлен в корзину
	</p>
	<a class="container-003__items-itm-links-lnkmore" href="<?php echo esc_url(get_the_permalink());?>">Подробнее</a>
</div>

К этой кнопке мы добавляем стиль "cart_add<?php echo $product->get_id(); ?>", а сообщению делаем id - "id="rec_cart_info<?php echo $product->get_id(); ?>""? как показано в примере выше.

Для всплывающего сообщения мы напишем стили.

Стили

.container-003__items-itm-links p.container-003__items-itm-links-cartinfotxt {
	position: absolute;
    bottom: 65px;
    left: 20px;
    margin: 0;
    padding: 2px 7px;
    background-color: #ffffff;
    border-radius: 10px;
    border: 2px solid #a2000d;
    font-family: 'Verdana';
    font-size: 11px;
    color: #000000;
    opacity: 0;
    transition: 1s;}
.cartinfo_opacity {
	opacity: 1!important;
	transition: 1s;}

После этого в файл function.php добавим Ajax запрос отвечающий за добавление в корзину.

Код

//Adjax запросы//
add_action( 'wp_ajax_call', 'add_cart' );
add_action( 'wp_ajax_nopriv_call', 'add_cart' );
function add_cart() {
	global $woocommerce;
	$productID = ($_POST["idtovar"]);
	$counttovar = ($_POST["counttovar"]);
	$woocommerce->cart->add_to_cart($productID, $counttovar);
	echo 'Добавлен товар';
	wp_die();
}

Далее пишем скрипт и помещаем его в каждую карточку где есть кнопка "Купить", т.е. скрипт будет у каждой карточки товара формироваться свой.

Скрипт

<script>    
	$('.cart_add<?php echo $product->get_id(); ?>').click(function() {
	var $idtovar = <?php echo $product->get_id(); ?>;
	var $counttovar = 1;
	console.log ($idtovar);
	console.log ($counttovar);

	var data = {
	action: 'call',
	idtovar: $idtovar,
	counttovar: $counttovar
	};
	jQuery.post('/wp-admin/admin-ajax.php', data);	
	
	$("#cartblock").load("'' #cartblock");
	$("#cartblock").load("'' #cartblock");
	//console.log ("Товар добавлен в корзину");
	$('#rec_cart_info<?php echo $product->get_id(); ?>').addClass('cartinfo_opacity');
	setTimeout(function(){
	$('#rec_cart_info<?php echo $product->get_id(); ?>').removeClass('cartinfo_opacity');
	}, 3000);
	});
</script>

Не забыв при этом на верху шаблона, где находятся карточки добавить строчку подключения JQuery.

Вот такую

<script src="/wp-content/themes/mielemos/assets/js/jquery-3.7.1.min.js"></script>

Теперь, что бы наша корзина меняла свой вид когда в ней есть хоть один товар, пропишем немного условий для этого.

Код

<a id="cartblock" class="container-header2__right-link" href="/cart/">
	
	<?php
	global $woocommerce;
	$cart_contents_count = WC()->cart->get_cart_contents_count();
	$cart_total_count = WC()->cart->get_cart_subtotal();
	//echo $cart_contents_count;
	//echo $cart_total_count;
	?>
	
	<?php 
	if ($cart_contents_count == 0) {
	?>
	<img class="container-header2__right-link-img" src="/wp-content/themes/mielemos/assets/images/menuicon005.png" alt="">
	<?php 
	}
	else
	{ 
	?>
	<img class="container-header2__right-link-img" src="/wp-content/themes/mielemos/assets/images/menuicon005full.png" alt="">
	<?php
	}
	?>
	
</a>

А если нам нужно еще указывать количество и цену товаров в корзине то тогда такой код.

Код

<a id="cartblock" class="container-header2__rightblock-link" href="/ruswool-new_wp/cart">
	
	<?php
	global $woocommerce;
	$cart_contents_count = WC()->cart->get_cart_contents_count();
	$cart_total_count = WC()->cart->get_cart_subtotal();
	//echo $cart_contents_count;
	//echo $cart_total_count;
	?>
	
	<?php 
	if ($cart_contents_count == 0) {
	?>
	<i class="fa-solid fa-cart-shopping"></i>
	<p class="container-header2__rightblock-link-txt">0 товар(ов)<br>0.00 р.</p>
	<?php 
	}
	else
	{ 
	?>
	<i class="fa-solid fa-cart-shopping"></i>
	<p class="container-header2__rightblock-link-txt"><?echo $cart_contents_count?> товар(ов)<br><?echo $cart_total_count?> р.</p>
	<?php
	}
	?>
</a>