/ Сайтостроение / Scripts & jquery / Мини-корзина в Header

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

HIT

18.09.2015

9431

8

Мини-корзина обязательно должна быть на сайте интернет-магазина.
После установки плагина 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 улетающими в корзину, при нажатии кнопки «В КОРЗИНУ». Основной скрипт Включаем jquery функцию $(document).ready(function(){ $(".ajax_add_to_cart").on("click",function(){ id = $(this).parent('li').attr("id"); $("#"+id).find("img") .clone() .css({'position' : 'absolute', 'z-index' : '11100', top: Читать далее »

Настраиваем woocommerce

Настраиваем woocommerce

Настраиваем различные аспекты плагина woocommerce, под текущие задачи. Ваша корзина пуста Шаблон для настроек страницы корзины (когда она пуста) находится здесь: woocommerce (локализованная в теме)/cart/cart-empty.php Можно отцентрировать и добавить какое-либо Читать далее »

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

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

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

/ /

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

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

  1. Сергей

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

    1. maker1447
      maker1447

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

  2. андрей

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

  3. nik

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

    1. Alexandr
      Alexandr

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

  4. Виталий

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

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

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

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