Автоматическое обновление корзины при изменении количества единиц товара в ней

Буквально вчера (за день до написания этого поста), создавал для клиентов кастомную корзину на WooCommerce и в дизайне их корзины не предусматривалось наличие кнопки «Обновить».

Дело в том, что в WooCommerce кнопка «Обновить корзину» нужна для того, чтобы вы её нажимали после того, как изменили количество какого-либо товара в ней, примерно вот так:

Кнопка ручного обновления корзины в WooCommerce после смены количества товаров

А мне нужно было настроить вот так:

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

А иногда ещё бывают нестандартные кнопки изменения количества товаров! Но об этом чуть ниже.

В этом уроке я не буду подробно останавливаться на каких-то базовых вещах. Нужно подробное объяснение? Тогда смотрите мой видеоурок по корзине WooCommerce.

Вообще принцип действия всего этого основан на том, что:

  • Скрываем кнопку «Обновить корзину» через CSS display:none.
  • Триггерим её нажатие при изменении поля с количеством.
jQuery( function( $ ) {
 
	$( 'body' ).on( 'change', '.qty', function() { // поле с количеством имеет класс .qty
		$( '[name="update_cart"]' ).trigger( 'click' );
	} );
 
} );

Вставить этот код можете либо в отдельный JS файл, либо через хук wp_footer, в functions.php вашей текущей или дочерней темы.

И небольшой бонус для вас 🎁 – а что делать, если у нас кастомные кнопки изменения количества товаров в корзине? Целый код не буду сюда вставлять, так как там может быть индвидуально.

Алгоритм такой:

  1. Стандартное поле .qty скрываем через display:none, но не удаляем ни за что.
  2. При нажатии на кнопки (допустим .plus и .munis) мы получаем текущее количество товара, и меняем его внутри поля .qty.
  3. После изменения триггерим метод .change() на поле .qty, иначе кнопка обновления корзины у нас так и останется в стейте disabled.
  4. Триггерим кнопку обновления корзины.

Тогда ваш код будет примерно таким:

jQuery( function( $ ) {
 
	$( 'body' ).on( 'change', '.plus, .minus', function() {
 
		// делаем всё, что нужно сделать, меняем количество в полях
 
		input.val( quantity ).change();
		$( '[name="update_cart"]' ).trigger( 'click' );
	} );
 
} );

Переменнаая input – это как раз наше поле .qty, именно для того товара, у которого меняется количество, а quantity – само значение количества.

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Комментарии — 6

Комментирование этого поста более не доступно.
  • Иван 6 мая 2020 #

    Добрый день!
    Почему-то последний метод не работает. После изменения value в поле qty кнопка остается в состоянии disable и не срабатывает trigger (((

    • Миша 6 мая 2020 #

      Добрый день!

      А вы обратили внимание, что там не готовый код?

      • Иван 6 мая 2020 #

        Да, само собой)

        При нажатии .plus или .minus значение quantity в поле .qty меняется, а кнопка [name="update_cart"] остается в состоянии disable. Если меняю значение руками, то она становится активной.

      • Иван 6 мая 2020 #

        Все, решил.

        Спасибо большое!

        Дело, как обычно, в грамотных селекторах )))

        PS Спасибо за такие статьи!!!

        • Миша 6 мая 2020 #

          Супер!🔥

          Пожалуйста 🙃

  • Ростислав 17 сентября 2020 #

    Здравствуйте. Использовал ваш метод автообновления корзины вместе с этими кастомными кнопками. Не работает момент с автообновлением: не становиться активной кнопка обновления корзины. Количество меняеться, а тригер change не срабатывает. Я немного новичок, поэтому, не судите строго. По сути проблема та же, что была в человека выше, но я не разобрался)