Как изменить количество товара в корзине?

Question

[Alycia17]

Я получаю count сессии корзины, но счетчик обновляется только после перезагрузки страницы. Как сделать, что бы количество товара в корзине обновлялось без перезагрузки, а сразу после нажатия кнопки добавить в корзину?

#Добавляю товар в корзину 
$(document).ready(function(){

	$("#add_to_cart").on('click', function() {
		var article = $("#article").val();
		var size = $("#size").val();
		var quantity = $("#quantity").val();
		
		$.ajax({
			url: window.location.href,
			type: 'POST',
			data: { 'article': article, 
					'size': size, 
					'quantity': quantity
				},
			 beforeSend: function(){
				$("#add_to_cart").prop("disabled", true);
			},
			dataType: 'html',
		})
	});
});

#Пытаюсь обновить счетчик
var session;
$.ajaxSetup({cache: false})
$.get('includes/header.php', {requested: 'foo'}, function (data) {
    session = data;
});

if (isset($_GET['requested'])) {
    echo $_SESSION[$_GET['requested']];
} else {
    echo count($_SESSION['cart']);
}

Answer 1

[Ольга]

у Jquery.ajax есть коллбек .done, вы можете вызывать его в запросе, получать свой счетчик и сразу обновлять, например:

#Добавляю товар в корзину 
$(document).ready(function(){

  $("#add_to_cart").on('click', function() {
    var article = $("#article").val();
    var size = $("#size").val();
    var quantity = $("#quantity").val();
    
    $.ajax({
      url: window.location.href,
      type: 'POST',
      data: { 'article': article, 
          'size': size, 
          'quantity': quantity
        },
       beforeSend: function(){
        $("#add_to_cart").prop("disabled", true);
      },
      dataType: 'html',
      .done(function(data) {
         //здесь находим html-элемент содержащий информацию о добавленных в корзину товарах и присваиваем ему новое значение
       })
    })
  });
});

Comments

[Alycia17]

Почитала доки о .done и толком не поняла ничего.
Допустим у меня счетчик в #"count" и вот как его обновить?
P.S. Я с jQuery и ajax 2 день работаю

<a href="/cart.php" id="count"><i class="fa fa-shopping-cart"></i> Корзина 
 <?php 
if (empty($_SESSION['cart']))
{    
    echo 0;
} else {
    $count = count($_SESSION['cart']);
    echo $count;
}
?>
</a>

[Ольга]

Alycia17, в разметку внутри #count нужно добавить элемент-обертку для собственно числа товаров, например <span>

<a href="/cart.php" id="count"><i class="fa fa-shopping-cart"></i> Корзина 
<span>
 <?php 
if (empty($_SESSION['cart']))
{    
    echo 0;
} else {
    $count = count($_SESSION['cart']);
    echo $count;
}
?>
</span>
</a>

а в сам done добавить следующее, при условии что с бекенда после выполнения запроса возвращается кол-во товаров

.done(function(data) {
    $('#count').find('span').text(data);
})

[Alycia17]

Ольга, возвращает в ссылке #count весь файл, но при этом если найти там наш span, то он также равен 0