/ Scripts & jquery / Мини-корзина в Header

Мини-корзина в Header

HIT

18.09.2015

25817

11

Мини-корзина обязательно должна быть на сайте интернет-магазина.
После установки плагина woocommerce нам надо чтобы в HEADER была небольшая иконка корзины с указанием количества закинутого в нее товара и общей суммой покупки.

Простой вариант (только количество)

Добавляем в файл funсtions.php

//Вывод кратких данных из корзины
if ( ! function_exists( 'cart_link' ) ) {
	function cart_link() {
		?>
		<a class="cart-contents" href="/cart/" title="<?php _e( 'Перейти в корзину' ); ?>">
		<i class="fa fa-shopping-cart"></i>
		<?php echo sprintf (_n( '%d товар', '%d товаров', WC()->cart->cart_contents_count ), WC()->cart->cart_contents_count ); ?> - <?php echo WC()->cart->get_cart_total(); ?>
		</a> 
		<?php
	}
}

Добавляем, также в funtions ajax обновление корзины, при добавлении товаров

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

function woocommerce_header_add_to_cart_fragment( $fragments ) {
	ob_start();
	?>
	<a class="cart-contents" href="/cart/" title="<?php _e( 'Перейти в корзину' ); ?>">
	<i class="fa fa-shopping-cart"></i><?php echo sprintf (_n( '%d товар', '%d товаров', WC()->cart->cart_contents_count ), WC()->cart->cart_contents_count ); ?> - <?php echo WC()->cart->get_cart_total(); ?>
	</a> 
	<?php
	$fragments['a.cart-contents'] = ob_get_clean();
	return $fragments;
}

В месте вывода элемента вставляем код (выделен жирным). При этом cart_link(); это наша функция которую мы создали выше. А the_widget( ‘WC_Widget_Cart’, ‘title=’ ); — это стандартный виджет мини-корзины woocommerce. Нам надо чтоб он появлялся только при наведении мыши на мини-корзину, об этом ниже.

<nav id="navigate" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
<li class="menu-item cart-punkt" ><?php cart_link(); ?><?php the_widget( 'WC_Widget_Cart', 'title=' ); ?></li>
</nav>
В данном примере мини-корзина добавлена в навигационное меню, но не 100% правильно. Фактически после вывода самого меню. Нужно как-то допилить чтоб добавлялось непосредственно в меню.

CSS

.widget_shopping_cart {
display: none;
background-color: #fff;
border: 5px solid #e1e5ea;
width: 275px;
padding: 10px 2%;
box-sizing: border-box;
position: absolute;
right: 0px;
box-shadow: 1px 2px 4px;
}

.open {display: block !important;}  

.widget_shopping_cart > div {padding: 0;}

.widget_shopping_cart a.remove {position: absolute; top: 1em; left: 0; opacity: 1;}

.widget_shopping_cart p.total, .widget_shopping_cart  p.buttons {
 padding: 1em 0;
 margin: 0;
 text-align: center;
 line-height: 40px;
}

.buttons a {clear:both;}

.widget_shopping_cart p.total, .widget_shopping_cart p.buttons {padding:0 !important;}  
  
.mini_cart_item, .to_top.mini_cart_item {line-height: 20px !important;  }
 
.mini_cart_item:hover, .empty:hover {border-top: none !important; }
  
.mini_cart_item a::after {display: none !important;}

li.empty {line-height: 20px !important; width: 100% !important;}

И небольшой script, чтобы виджет миникорзины появлялся при наведении на иконку

$(document).ready(function() {
	// Открытие корзины при наведении
	$('.cart-punkt').hover(function() {
	$('.widget_shopping_cart').toggleClass('open');
	});
});

Более качественный скрипт открытия корзины — не глючит при удалении товаров

$('#cart-punkt').hover(function () {
	$('.widget_shopping_cart').addClass('widget_shopping_cart-open'); 
}, function () {
	$('#cart-punkt').data('timer', setTimeout(function () {
		$('.widget_shopping_cart').removeClass('widget_shopping_cart-open'); 
	}, 200));
});

Продвинутый вариант (количество + общая стоимость)

Функции

function woocommerce_header_add_to_cart_fragment( $fragments ) { 
	ob_start(); 
	?>
	<a class="cart-contents" href="/cart/" title="<?php _e( 'Перейти в корзину' ); ?>">  
	<span class="cart-ico"> <i class="fa fa-shopping-cart"></i></span>  
	<span class="cart-txt">товаров: <strong><?php echo sprintf (_n( '%d', '%d', WC()->cart->cart_contents_count ), WC()->cart->cart_contents_count ); ?></strong><br> 
	на сумму: <strong><?php echo WC()->cart->get_cart_total(); ?></strong></span>
	</a>
	<?php 
	$fragments['a.cart-contents'] = ob_get_clean(); 
	return $fragments;
}

//Вывод кратких данных из корзины
if ( ! function_exists( 'cart_link' ) ) {
	function cart_link() { 
		?><a class="cart-contents" href="/cart/" title="<?php _e( 'Перейти в корзину' ); ?>">
		<span class="cart-ico"> <i class="fa fa-shopping-cart"></i></span>
		<span class="cart-txt">товаров: <strong><?php echo sprintf (_n( '%d', '%d', WC()->cart->cart_contents_count ), WC()->cart->cart_contents_count ); ?></strong><br> 
		на сумму: <strong><?php echo WC()->cart->get_cart_total(); ?></strong></span>
		</a>
		<?php 
	}
}
Ajax обновление не будет происходить без стиля class=»cart-contents»

CSS

#cart-punkt > a {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #94e100;
    background-color: #fff;
}

#cart-punkt:hover > a {box-shadow: 2px 2px 20px rgba(33, 150, 243, 0.5);}

#cart-punkt > a .cart-ico {width: 30%; background-color: #94e100; color: #fff;}

#cart-punkt > a .cart-txt {width: 70%; text-align: left; padding-left: 15px; font-size: 12px;}

#cart-punkt > a br {display: none;}

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

#cart-punkt:hover .fa { color: #fff;}

.widget_shopping_cart {
    width: 400px !important;
    right: 0;
    top: 100%;
    position: absolute;
    z-index: 999;
    background-color: whitesmoke;
    box-shadow: 1px 3px 20px rgba(0,0,0,0.4) !important;
    border-radius: 5px 0 5px 5px;
    display: none;
}

.widget_shopping_cart-open {display: block;}

Скрипт открытия тот же.

Пустая мини-корзина

Содержимое пустой мини-корзины редактируется в файле woocommerce/cart/mini-cart.php

Количество наименований

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

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

function name_item_in_cart_count() {
	global $woocommerce;
	$product_ids = array();
	foreach(WC()->cart->get_cart() as $cart_item_key => $values) { $product_ids[] = $values['product_id']; }
	$product_ids_unique = array_unique($product_ids);
	echo count($product_ids_unique);
}

и изменить в выводе миникорзины код

<?php echo sprintf (_n( '%d', '%d', WC()->cart->cart_contents_count ), WC()->cart->cart_contents_count ); ?>

на

<?php name_item_in_cart_count(); ?>

Решение как сделать мини-корзину не в шапке а на экране справа.

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

  • Похожие записи
  • Комментарии
  • Вложения
Модификация Woocommerce

Модификация Woocommerce

Продолжаем серию модификаций модуля интернет коммерции Woocommerce. Скрыть колонки редактирования товаров add_filter( 'manage_edit-product_columns', 'change_columns_filter',10, 1 ); function change_columns_filter( $columns ) { unset($columns['product_tag']); unset($columns['sku']); unset($columns['featured']); return $columns; } Тоже самое можно Читать далее »

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

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

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

Доработка функционала Woocommerce

Доработка функционала Woocommerce

Продолжаем дорабатывать различные аспекты модуля Woocommerce. Общий вес заказа Чтобы выводить общий вес заказа, нужно в шаблонах cart-totals.php (в корзине) и/или review-order.php (в заказе) добавить следующий код (перед закрывающим тегом Читать далее »

/ /

Добавить комментарий

11 комментариев

  1. Сергей

    Я, первый раз на этом сайте. И мне всё понравилось, чётко, коротко и ясно. Ещё шрифт текста супер. Спасибо админ за код!

    1. maker1447

      Спасибо, за добрые слова!

  2. андрей

    не хватает демо примера, фото, а так хорошо

  3. nik

    А подскажите — у меня при добавлении в корзину все ок в каталоге а на странице твоара и при удалении из корзины — обновляется страница. Если ли какие нибуть варианты решешения?

    1. Alexandr

      Ajax исходно работает только на добавление. В карточке товара можно добавить Ajax с помощью плагина WooCommerce Ajax Add to Cart, но он платный. Уверен, что реально и без плагина сделать, но еще не пробовал.

  4. Виталий

    Благодарочка тебе админ. Хороший сайт. Для людей +++

  5. Ислам Ибакаев

    Бесценный материал, спасибо автору за труды! Отправил сайт в закладки.

  6. Dan Zakirov

    Все работает, но кроме карточки товара. В карточке товара AJAX не отрабатывает… надо на кнопку «В корзину» класс добавить?

    1. Alexandr

      В карточке немного другой алгоритм. Чтобы товар в карточке добавлялся ajax’ом (без перезагрузки), нужно еще кое что изменить в WC.

  7. Dan Zakirov

    Alexandr, спасибо. Супер сайт, добавил к закладки. 

Мини-корзина в Header
Плагин Posts 2 Posts
Рекомендации для васПлагин Posts 2 PostsOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.