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

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

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

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

  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 – само значение количества.

Миша

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

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

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

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

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

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

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