Мини-корзина сбоку

Ранее описывал функционал мини-корзины в Header’е, теперь реализуем данное решение в виде боковой кнопки, если нужно разгрузить шапку, либо интернет-магазин добавился после создания основной верстки сайта, либо нужно внедрить ИМ как можно скорее.

Основные элементы

В основе функции, скрипты и стили из предыдущего решения, но с некоторыми доработками:

//Ajax Обновление кратких данных из корзины
add_filter( 'woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment' );

function woocommerce_header_add_to_cart_fragment( $fragments ) {
	ob_start();	?>
	<span class="cart-ico">
	<i class="fa fa-shopping-cart"><small><?php echo sprintf (_n( '%d', '%d', WC()->cart->cart_contents_count ), WC()->cart->cart_contents_count ); ?></small></i>
	</span>
	<?php $fragments['.cart-ico'] = ob_get_clean();
	return $fragments;
}


//Вывод кратких данных из корзины
if ( ! function_exists( 'cart_link' ) ) {
	function cart_link() { ?>
	<span class="cart-ico">
	<i class="fa fa-shopping-cart"><small><?php echo sprintf (_n( '%d', '%d', WC()->cart->cart_contents_count ), WC()->cart->cart_contents_count ); ?></small></i>
	</span>
	<?php }
}

Стили

/* Мини корзина */

#cart-punkt {
    position: fixed;
	z-index: 999;
    right: -400px;
    top: 40%;
	-o-transition: all 0.3s;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease 0s;
}

#cart-punkt > a {
    display: block;
    background: #69cece;
    color: #fff;
    position: absolute;
    left: -60px;
    width: 60px;
    padding: 15px 0;
    text-align: center;
    border-radius: 5px 0 0 5px;
	cursor: pointer;
}

#cart-punkt .fa {font-size: 30px; margin-right: 0; position: relative;}

.cart-ico small {
    font-size: 10px;
    background: #111;
    position: absolute;
    left: 13px;
    top: -5px;
    border-radius: 50px;
    width: 18px;
    line-height: 18px;
    font-weight: 600;
    text-align: center;
    font-family: sans-serif;
}

.widget_shopping_cart {
    width: 400px !important;
    z-index: 99;
    background: #fff;
    box-shadow: 1px 1px 6px rgba(0,0,0,0.2) !important;
    padding: 30px 30px 15px 30px !important;
}

#cart-punkt.widget_shopping_cart-open {right: 0px;}

.woocommerce-cart #cart-punkt, .woocommerce-checkout #cart-punkt {display: none;}

@media screen and (max-device-width: 1280px) { #cart-punkt {top: 25%;} }

@media screen and (max-device-width: 480px) {
	#cart-punkt {right: 0;}
	#cart-punkt > a {left: -50px; width: 50px; padding: 10px 0;}
	#cart-punkt .fa {font-size: 25px;}
	.cart-ico small {left: 8px;}
	#cart-punkt > a .cart-ico {width: 100%;}
	#cart-punkt > a .cart-txt {display: none;}
    .widget_shopping_cart {display: none !important;}
}

@media screen and (max-device-width: 330px) { #cart-punkt > a {left: -40px; width: 40px;} }


/* Мини-корзина в шапке (скрытая часть) */

#cart-punkt .product_list_widget {max-height: 300px; overflow-x: hidden; overflow-y: scroll; font-size: 13px;}

#cart-punkt .product_list_widget::-webkit-scrollbar {width: 2px;}

.woocommerce-mini-cart li {display: flex; padding: 0 5px; margin-bottom: 7px; align-items: center; justify-content: space-between; position: relative;}
	
.woocommerce-mini-cart li a {display: -webkit-flex; display: flex; align-items: center; width: 480px; color: #111 !important;}
.woocommerce-mini-cart li a:hover {color: #2196f3;}
.woocommerce-mini-cart li img {width: 50px; margin-right: 7px;}
.woocommerce-mini-cart li .quantity {text-align: right; min-width: 100px;}
.woocommerce-mini-cart li .remove_from_cart_button {order: 11; margin-left: 7px; color: red !important; font-size: 15px; width: auto !important;}


.woocommerce-mini-cart li {display: flex; padding: 0 5px; margin-bottom: 7px; align-items: center; justify-content: space-between; position: relative;}
	

/* Сумма, кнопки */

.woocommerce .widget_shopping_cart .total, .woocommerce.widget_shopping_cart .total {
	display: -webkit-flex; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ccc;
	margin-bottom: 15px;
}

.woocommerce .widget_shopping_cart .total strong, .woocommerce.widget_shopping_cart .total strong {color: #ccc;}	  
	  
.widget_shopping_cart .total .amount {float: right; font-size: 28px; color: #111; line-height: 50px; font-weight: bold;}
	  
.widget_shopping_cart .total .amount .rubl {font-size: 16px;}

.empty {width: 100%; color: #111; text-align: center;}

.widget_shopping_cart .buttons {display: -webkit-flex; display: flex; margin: 5px 0 15px 0; width: 100%; justify-content: space-between;}

.widget_shopping_cart_content .button.wc-forward {background: #3a3382 !important; padding: 7px 25px; width: 48%;}
.widget_shopping_cart_content .button.wc-forward:hover {background: #312973 !important;}

Скрипты

$(document).ready(function() {
	
	// Открытие корзины
	jQuery(document).ready(function($){
		$('#cart-btn').on('click', function(){
			$('#cart-punkt').toggleClass('widget_shopping_cart-open');
		});

		$(document).mouseup(function (e){ // событие клика по веб-документу
			var div = $("#cart-punkt"); // тут указываем ID элемента
			if (!div.is(e.target) // если клик был не по нашему блоку
				&& div.has(e.target).length === 0) { // и не по его дочерним элементам
				$('#cart-punkt').removeClass('widget_shopping_cart-open');
			}
		});
	});
 
});	

Добавляем и адаптируем кнопку

Выглядеть будет примерно так:

Добавляем кнопку в самом низу (после подвала):

<?php if(function_exists('cart_link')) : ?><div id="cart-punkt"><a id="cart-btn"><?php echo cart_link(); ?></a><?php the_widget( 'WC_Widget_Cart' ); ?></div><?php endif; ?>

В десктопной версии нажатие на кнопку открывает миникорзину, чтобы в мобильной версии при нажатии кнопки происходил переход в корзину прописываем следующий скрипт:

if (screen && screen.width < 480) {
	$(document).ready(function() {
		$('#cart-punkt > a').attr("href","/cart/");
	});
}

Или еще один вариант прицепить на кнопку ссылку

$(document).ready(function() {
	width = $(window).width();
	if (width <= 600) {

	jQuery('#cart-btn').click(function() {
		var url = "/cart/";
		$(location).attr('href',url);
	});
		
	}
});

[site-socialshare]