Июл

Автоматическое обновление Ajax корзины в WooCommerce магазине

Недавно я публиковал инструкцию по настройке страницы корзины в WooCommerce, а сейчас хочу дополнить ее одним полезным «бонусом». По умолчанию в магазине после изменения количества заказанных товаров пользователю нужно кликать по кнопке «Обновить корзину». С одной стороны это вполне логичные действия — вы сначала выбираете определенные значения, а потом подтверждаете их. Кто-то для этих целей добавляет небольшие иконки напротив каждой позиции, другие используют общую кнопку, установленную изначально. Но можно поступить и третьим способом — внедрить в WooCommerce Ajax корзину с обновлением, которое выполняется автоматически при любых ее изменениях. Этим и займемся.

Как часто бывает в WP, есть 2 метода решения — через сниппеты или плагины. Перед тем как их рассмотреть пару слов о совместимости кода. В сети я находил разные варианты, но НЕ все они могут сработать в вашей ситуации:

Во-первых, некоторые хаки ориентированы на прошлые версии WooCommerce (в частности 2.6.) и не подходят для последнего значимого релиза до 3.х, произошедшего в этом году.
Во-вторых, иногда бывают конфликты с другими модулями/хаками.

Эти два момента нужно учитывать.

Автоматическое обновление корзины WooCommerce 2.6

Первый способ найден здесь. Он содержит скрипт, позволяющий обновить корзину WooCommerce автоматически при изменении количества товара (через ввод числа или стрелочки). Добавляете в function.php или другой файл, используемый вами для функций.

/**
 * Auto update cart after quantity change
 *
 * @return  string
 **/
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
    if (is_cart()) :
    ?>
    <script>
        jQuery('div.woocommerce').on('change', '.qty', function(){
            jQuery("[name='update_cart']").trigger("click"); 
        });
    </script>
    <?php
    endif;
}

Я лично тестировал его на версии 2.6. — работает отлично. Тем не менее, в ветке обсуждения есть предположения, что в WooCommerce 3.х решение может глючить. Судя по всему, проблема в классе «qty», который разработчики убрали. Попробуйте заменить строку:

jQuery('div.woocommerce').on('change', '.qty', function(){

На такую:

jQuery('div.woocommerce').on('change', '.quantity .button', function(){

Либо скопируйте код полностью из обсуждения.

Автообновление обычной и мини корзины

Еще один вариант, найденный по ссылке, совместим с другим хаком, добавляющим AJAX подсчет товаров в мини корзину.

/**
 * Auto update cart after quantity change
 *
 * @return  string
 **/
add_action( 'woocommerce_after_cart', 'custom_after_cart' );
function custom_after_cart() {
    echo '<script>
    jQuery(document).ready(function($) {
        var upd_cart_btn = $(".update-cart-button");
        upd_cart_btn.hide();
        $(".cart-form").find(".qty").on("change", function(){
            upd_cart_btn.trigger("click");
        });
    });
    </script>';
}

Здесь интересен не сам код, который плюс-минус похож на предыдущий, а обсуждение под ним. Некоторые люди делились там своими правками, позволяющими сделать сниппет рабочим и в других ситуациях — возможно, вам пригодится. Данный метод я не тестировал, так как первый мне показался более толковым.

WooCommerce Ajax Cart Plugin

Репозиторий содержит несколько модулей Ajax корзины в WooCommerce, но лишь этот выглядит максимально профессиональным. Да, и оценки у него получше других — 4 балла на 4тыс. скачиваний + относительно недавнее обновление и частый багфикс.

Скачать WooCommerce Ajax Cart Plugin можно тут либо через поиск в админ панели. Плагин начинает работать сразу после активации без каких-либо действий. Вот как приблизительно это выглядит:

В целом Ajax обновление корзины улучшит юзабилити вашего интернет-магазина и позволит сразу видеть общую стоимость покупок при изменении количества товаров.

Как я уже сказал, после активации ничего дополнительного делать не нужно, однако в модуле есть парочка настроек. Найдете их в «Инструментах» — «Woo Ajax Cart»:

Здесь:

Quantity buttons — показ в WooCommerce корзине дополнительных иконок/кнопок «+» и «-» сбоку от поля количества товаров;
Quantity select — если я правильно понял, то это отображение числа продукции в поле типа «select» вместо числового/текстового блока.
Quantity confirmation — вывод запроса на подтверждение удаления товара, если вы ставите количество = 0 (по умолчанию, система просто удаляет позицию).

Из всех опций, как по мне, самая последняя только и нужна — она отмечена сразу при установке плагина, значения двух других можете активировать самостоятельно.

Единственный недостаток этой Ajax корзины в Woocommerce — там нет локализации, поэтому придется самостоятельно добавлять переводы в исходный код.

Второй важный нюанс (!) — для реализации автоматического обновления корзины на странице должна быть кнопка «Обновить корзину». Без нее никакой Ajax скрип срабатывать не будет.

Если вы считаете, что данная кнопка отвлекает пользователя и теперь она, по сути, лишняя, то можете скрыть ее через CSS стиль display: none; но в HTML коде данная конструкция должна быть.

Если у вас есть что дополнить про сниппеты/модули Woocommerce для Ajax обновления корзины, пишите ниже.

Оцените статью:

(голосов - 2, средний балл: 7,00 из 7)

Загрузка...

Категории: WooCommerce; Плагины; Хаки и секреты;

Теги: WooCommerce плагины, интернет-магазин, корзина WooCommerce, сниппеты, электронная коммерция.

комментариев 16 к статье “Автоматическое обновление Ajax корзины в WooCommerce магазине”

Михаил 25.07.2017
Тоже думаю, что Ajax корзина поярче будет смотреться, хотя всегда есть 1-2 человека, которые не разберутся в ситуации.
Seoonly 25.07.2017
Спасибо!!
Сергей 26.07.2017
Подскажите пожалуйста где искать и перевести Proceed to Checkout , после прибавления товара получается не оформить а Proceed to Checkout
Tod 27.07.2017
Сергей, тут есть нюансы. По умолчанию переводы WooCommerce находятся в wp-content/languages/plugins/woocommerce-ru_RU.po — посмотрите там. Но ведь в самом модуле есть локализация, странно что она не срабатывает. Бывают ситуации, когда фразы на сайте добавляются через шаблон или другой плагин — тогда нужно разбираться как именно это реализовано. В крайнем случае, если ничего не получается, используйте быстрый перевод с gettext.
Сергей 26.09.2017
Добрый день Может кто сталкивался. После установки плагина WooCommerce Ajax Cart
Все работает отлично. С переводом тоже разобрался. НО!
У меня идут в корзине кросселы и при обновление цены через плюс или минус, эти кросселы появлябтся еще и правее (там где должно быть перейти к оформлению). и так же находятся под самой корзиной. ТО есть их сразу 2.
Никакие кэш плагины не использую
Если же обновить страницу, то все становится нормально.
Может кто что подскажет как быть
Tod 26.09.2017
Сергей, я не сталкивался с этим, но делал бы следующим образом: 1) гуглить на английском, 2) искать место куда они появляются (вероятно там какой-то хук указан), после чего прогнал бы поиск по названию хука в файлах модуля WooCommerce Ajax Cart вдруг там он где-то дополнительно вызывается (срабатывает по событию).
Ирина 24.01.2018
Добрый вечер! Есть проблема, которую никто не может решить. Может вы мне поможете в этом вопросе. Я хочу что бы после нажатия кнопки *добавить в корзину* товар добавился в корзину, а клиент остался в той же рубрике и на том товаре что он добавил в корзину. А у меня перекидывает сразу совсем в другое меню, в каталог товаров. Клиент например добавил в корзину шорты и что бы ему добавить к примеру футболку с этой же рубрики, ему нужно снова войти в каталог товаров — детская одежда — шорты и футболки.
Нажимаю фунцкцию ajax — сохранить изменения. Пишет *Ваши настройки сохранены*. Выхожу с этого меню. И когда снова захожу галочка напротив ajax уже не стоит. С кнопкой *Перенаправить в корзину после успешного добавления* тоже самое. Тема Spacious от ThemeGrill. Активные плагины стоят: All In One SEO Pack, Contact Form 7,WooCommerce Direct Checkout,WooCommerce,VKMarket for WooCommerce,Saphali Woocommerce Russian,Orbit Fox Companion
Tod 25.01.2018
Ирина, по описанию похоже на то, что какой-то модуль или сама тема создают данный глюк. Я бы на вашем месте сначала попробовал сменить шаблон на другой и проверить будет ли работать эта функция, а затем убрать лишние плагины, оставив только магазин. Если после этих тестов все равно будет перебрасывать в ненужное место, то возможно это баг (временный) самого WooCommerce. Тогда без заказа доработки на фрилансе не решить проблему.
Александр 07.09.2018
Здравствуйте, а есть такое же решение для карточки товара? Чтобы при изменении кол-ва товара через плюс или минус, цена менялась, чтобы клиент видел сколько он заплатит за 2 или 3 единицы этого товара…
Подскажите пожалуйста, третий день ищу и все в пустую..
Заранее спасибо.
Tod 07.09.2018
Александр, я такого кода не нашел, встречал, какой-то модуль и позволяет так сделать. Это решение работает, т.к. на странице корзины изначально есть кнопка «обновить» и, насколько я понимиаю, Ajax решение просто автоматически нажимает.
Александр 07.09.2018
Нашел код который обновляет цену в карточке товара в зависимости от выбранного кол-ва единиц.
// we are going to hook this on priority 31, so that it would display below add to cart button.
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_total_product_price’, 31 );
function woocommerce_total_product_price() {
global $woocommerce, $product;
// let’s setup our divs
echo sprintf(‘%s %s’,__(‘Product Total:’,’woocommerce’),».$product->get_price().»);
echo sprintf(‘%s %s’,__(‘Cart Total:’,’woocommerce’),».$product->get_price().»);
?>

jQuery(function($){
var price = get_price(); ?>,
current_cart_total = cart->cart_contents_total; ?>,
currency = »;

$(‘[name=quantity]’).change(function(){
if (!(this.value < 1)) {
var product_total = parseFloat(price * this.value),
cart_total = parseFloat(product_total + current_cart_total);

$('#product_total_price .price').html( currency + product_total.toFixed(2));
$('#cart_total_price .price').html( currency + cart_total.toFixed(2));
}
$('#product_total_price,#cart_total_price').toggle(!(this.value <= 1));

});
});

<?php
}

Но в коде есть проблема, с цены пропадает разделитель тысяч, может вы поможете его вернуть? ;)
Tod 07.09.2018
Александр, код разбирать времени, к сожалению, нет. Я бы присмотрелся/потестил функции parseFloat и toFixed — судя по всему, именно они преобразуют числовые значения цен.
Александр 11.09.2018
Установил этот код и выходит следующее.
Автоматическое обновление корзины происходит только на второй клик.
То есть:
Если в корзине 1 единица, я жму на Плюс выбирается уже 2 единицы, но ничего не происходит, но как только я жму на плюс еще раз (уже 3 единицы) сразу идет автоматическое обновление корзины…
Это проблема с кодом или с моим магазином?
Заранее спасибо!
Tod 11.09.2018
Александр, нужно вернуть на время шаблон по умолчанию + отключить лишние модули кроме магазина дабы понять настояющую причину глюка — если и в том случае все будет работать со второго раза, то проблема в коде/хаке.
Александр 12.09.2018
Сделал как вы говорите, проблема такая же, срабатывает со второго раза(
Tod 12.09.2018
Александр, значит проблема в данном решении. Попробуйте уточнить в комментах на сайте у автора хака почему так происходит. Я, если честно, без понятия.