Июл
23
4

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

Автообновление корзины 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

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

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

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

Настройки Woo Ajax Cart

Здесь:

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

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

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

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

Обновление корзины

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 1, средний балл: 7,00 из 7)
Загрузка...

категория Категории: Плагины; Хаки и секреты;
теги Теги: , , , , .

комментария 4 к статье “Автоматическое обновление 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.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости