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

WooCommerce, Корзина / 8 комментариев

Буквально вчера (за день до написания этого поста), создавал для клиентов кастомную корзину на 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 вашей текущей или дочерней темы.

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

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

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

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

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

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

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

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

Иван 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 не срабатывает. Я немного новичок, поэтому, не судите строго. По сути проблема та же, что была в человека выше, но я не разобрался)
Эдуард 21 Янв 2021
Использовав данный метод, обнаружил, что только со второго раза срабатывает триггер.
Поискав еще информации, понял, что необходимо сначала включать кнопку "Обновить корзину", а потом вызывать триггер.
const update_cart = $('[name=update_cart]') $(document.body).on( 'change', '.qty', function() { // поле с количеством имеет класс .qty update_cart.removeAttr('disabled'); update_cart.trigger( 'click' ); } );
- Миша 23 Янв 2021
  Вообще кнопка сама включаться должна.

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.