Мини-корзина обязательно должна быть на сайте интернет-магазина.
После установки плагина 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>
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
}
}
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(); ?>
Решение как сделать мини-корзину не в шапке а на экране справа.
[site-socialshare]
Я, первый раз на этом сайте. И мне всё понравилось, чётко, коротко и ясно. Ещё шрифт текста супер. Спасибо админ за код!
Спасибо, за добрые слова!
не хватает демо примера, фото, а так хорошо
А подскажите — у меня при добавлении в корзину все ок в каталоге а на странице твоара и при удалении из корзины — обновляется страница. Если ли какие нибуть варианты решешения?
Ajax исходно работает только на добавление. В карточке товара можно добавить Ajax с помощью плагина WooCommerce Ajax Add to Cart, но он платный. Уверен, что реально и без плагина сделать, но еще не пробовал.
Благодарочка тебе админ. Хороший сайт. Для людей +++
Спасибо!
Бесценный материал, спасибо автору за труды! Отправил сайт в закладки.
Все работает, но кроме карточки товара. В карточке товара AJAX не отрабатывает… надо на кнопку «В корзину» класс добавить?
В карточке немного другой алгоритм. Чтобы товар в карточке добавлялся ajax’ом (без перезагрузки), нужно еще кое что изменить в WC.
Alexandr, спасибо. Супер сайт, добавил к закладки.