My cart is incremented using an ajax call. I want to add a class when the counter is 1 and remove a class when the counter is 0. Can someone tell me how can I achieve this without a page load? Is there any ajax query which fires automatically when the counter increments and decrements? https://prnt.sc/1xaim0a
https://prnt.sc/1xaipj8

CodePudding user response：

$(document).on("click", function () {
  var count_new = 0;
  var subtotal_new = 0;
  setTimeout(function () {
    jQuery.getJSON('/cart.js', function (data) {
      count_new = data.item_count;
      if (parseInt(count_new) == 0) {      
        $(".Cart_click").find(".mobile-icons").find(".hotiya").removeClass("cart_ping")
      } else {
        $(".Cart_click").find(".mobile-icons").find(".hotiya").addClass("cart_ping")
      }
    });
  }, 500);
});

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I devised a solution.

CodePudding user response：

Why not check, after the ajax call, the value of counter and update according that the class? This is an exemple of ajax callback:

function (data) {
    if(data.counter == 0){
         $('#id').removeClass('the-class');
    }else{
         $('#id').addClass('the-class');
    }
}