Как обновить количество товаров в корзине без перезагрузки?

Question

[ligisayan]

Всем привет! Есть стандартный интернет-магазин на wordpress+woocommerce в котором на странице
корзины плюсами/минусами можно увеличивать или уменьшать количество товара, но обновление стоимости происходит только после нажатия на кнопку обновить. Как сделать так, чтобы обновление срабатывало по технологии ajax без перезагрузки страницы и без кнопки обновить?
Есть плагин woocommerce ajax cart, но с последними версиями wordpress и woocommerce не работает.
Пробую подвязать под изменение поля input значение value и привязать к одному из триггеров, но инфа не сохраняется при переходе на страницу оформления

$('.cart_item .input-text.qty.text').change(function () {
    this.setAttribute('value',$(this).val());
    //$( document.body ).trigger( 'update_checkout' );
    //$( document.body ).trigger( 'updated_cart_totals' );
    $( document.body ).trigger( 'updated_wc_div' );
  });

Answer 1

[Антон Тихомиров]

Вот у Вас триггеры какие-то висят, они куда-то ведут? Как это часто бывает в такого рода поделках - все реализовано через заднее место. Ладно бы индусы писали, но ведь вроде бы нормальные люди пишут.

А конкретно по Вашему примеру - что-то на подобии

$('.elem.plus').click (function () {
  $.post ('ajax.php', { 'action':'cart', 'area':'plus' }, function (result) {
     $('.total').html (result);
  });
});

И теперь на словах: у Вас имеется какой-то элемент <div class="elem plus"></div> - это кнопка плюса. Мы вешаем на нее обработчик нажатия, который при нажатии шлет постом данные в какой-то скрипт ajax.php (лучше всего указывать абсолютный url к нему (который http://), этот скрипт уже выполняет нужные запросы в БД и отдает результат через echo, который затем выводится в объекте с классом .total где-то на странице. Например, каким-то таким:

Количество: <div class="total"></div>

Вот и все)

Answer 2

[IceJOKER]

Вешаете слушатель на плюсы/минусы , после нажатия вызываете событие клика на кнопку "Обновить"

Comments

[ligisayan]

IceJOKER имеете ввиду что-то вроде этого? но, у меня пока не выходит...

function click_update_cart_btn(upd_cart_btn) {
    jQuery(".cart_item").parents('form').find('[name="update_cart"]');
        upd_cart_btn.trigger('click');
	}
	jQuery(document).ready(function($) {
		var update_cart;
		jQuery('body').delegate(".cart_item .qty").on("change", function(){
			if(update_cart != null){
				clearTimeout(update_cart);
			}
			update_cart = setTimeout(click_update_cart_btn, 1000);
		});
	});

[IceJOKER]

ligisayan: зачем таймаут?

jQuery('body').delegate(".cart_item .qty").on("change", function(){
  jQuery(".cart_item").parents('form').find('[name="update_cart"]').trigger('click');
});

как-то так, если я все правильно понял

[ligisayan]

IceJOKER пока не срабатывает. делаю по такой схеме и тоже пока не выходит

jQuery('body').delegate(".cart_item .qty").on("change", function(){
	  $( document.body ).trigger( 'update_checkout' );
	  $( document.body ).trigger( 'updated_cart_totals' );
	});