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

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

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

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

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

Иван 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
  Вообще кнопка сама включаться должна.
MIsha 14 Фев 2022
Здравствуйте, у меня не обновляет автоматически, только через стандартное поле ввода если меняешь но обновляет! Не понимаю кто где!
PS Спасибо
- MIsha 14 Фев 2022
  Заработало сделал вот так. Вставлял на Elementore тема Astra. Не работало обновление при добавление одной единицы товара, отрабатывало только при добавлении двух единиц. Подправил всё робит!
  PS: Большое спасибо за пост очень помог!!!!
  <?php // Авто обновление корзины при добавление количества. 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']").removeAttr("disabled").trigger("click"); }); </script> <?php endif; }
  Работает в связке с кнопками плюс/минус
  Всем удачи!
  - Миша 16 Фев 2022
    Огонь! Спасибо, что поделились своим кодом!
  - mr.vladimirkozlov 15 Июн 2022
    Спасибо!!! Работает с Elementor Hello Theme :)
    - mr.vladimirkozlov 15 Июн 2022
      Единственное, убрал div перед классом .woocommerce

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