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

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 вашей текущей или дочерней темы.

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

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

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

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

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

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

Миша

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

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

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

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

× Отменить ответ

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код меньше одной строчки, то можно и в <code></code>.

Нажав на кнопку, вы соглашаетесь с тем, как обрабатываются персональные данные.