Question 219750 in Shopify Question posted in
The Shopify help center can be found here.

Shopify – Counter Not Incrementing After Adding Items to Cart

I hope you are doing well. Recently, I encountered an issue with my code after making modifications to remove the popup of the side bar cart. The problem now is that the counter no longer increments when items are added to the cart using the quick add button. Strangely, the counter only reflects the correct number of items added when I refresh the page, which was not the case before I made the code changes.
I would be extremely grateful if anyone could kindly assist me with this issue. Below is the modified code I used to remove the popup:

function onQuickBuyButtonClicked(id, pro_id) {
    const CartCount = document.getElementsByClassName('Header__CartCount')[0];

    $(".loader_" + id).addClass("add-success--adding");
    const product = {
        id: id,
        quantity: 1
    };

    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        data: JSON.stringify(product),
        dataType: 'json',
        headers: {
            'Content-Type': 'application/json'
        },
        success: function(cart) {
            setTimeout(function() {
               $(".loader_" + id).removeClass("add-success--adding");
                $(".loader_" + id).addClass("add-success--added");
//              cartRecommended(pro_id);
            }, 500);

/*
setTimeout(function() {
    document.dispatchEvent(new CustomEvent('product:added', {
        bubbles: true,
        detail: {
            variant: cart,
            quantity: 1
        }
    }));
}, 1200);
*/

            setTimeout(function() {
                $(".loader_" + id).removeClass("add-success--adding").removeClass("add-success--added");
              
            }, 1600);
          setTimeout(function() {
  //        $('#backdrop').addClass('backdrop_active');
          }, 2000);
        },
        error: function(errorThrown) {
            $(".loader_" + id).removeClass("add-success--adding");

            var r = jQuery.parseJSON(errorThrown.responseText);
            $(".error_" + pro_id).html("Error: " + r.description).show();
            setTimeout(function() {
                $(".error_" + pro_id).html("").hide(100);
            }, 3000);
        }
    });
return false;
}

Thank you so much for your help!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    function onQuickBuyButtonClicked(id, pro_id) {
    const CartCount = document.getElementsByClassName('Header__CartCount')[0];

    $(".loader_" + id).addClass("add-success--adding");
    const product = {
        id: id,
        quantity: 1
    };

    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        data: JSON.stringify(product),
        dataType: 'json',
        headers: {
            'Content-Type': 'application/json'
        },
        success: function(cart) {
            setTimeout(function() {
                $(".loader_" + id).removeClass("add-success--adding");
                $(".loader_" + id).addClass("add-success--added");
    //            cartRecommended(pro_id);
            }, 500);

            setTimeout(function() {
                document.dispatchEvent(new CustomEvent('cart:refresh', {
                    bubbles: true,
                    detail: {
                        variant: cart
                    }
                }));
            }, 1200);

            setTimeout(function() {
                $(".loader_" + id).removeClass("add-success--adding").removeClass("add-success--added");

            }, 1600);
            setTimeout(function() {
    //            $('#backdrop').addClass('backdrop_active');
            }, 2000);
        },
        error: function(errorThrown) {
            $(".loader_" + id).removeClass("add-success--adding");

            var r = jQuery.parseJSON(errorThrown.responseText);
            $(".error_" + pro_id).html("Error: " + r.description).show();
            setTimeout(function() {
                $(".error_" + pro_id).html("").hide(100);
            }, 3000);
        }
    });
    return false;
}

// Listen for the 'cart:refresh' event and update the cart count
document.addEventListener('cart:refresh', function() {
    $.getJSON('/cart.js', function(cart) {
        const cartCount = cart.item_count || 0;
        const CartCount = document.getElementsByClassName('Header__CartCount')[0];
        if (CartCount) {
            CartCount.innerHTML = cartCount;
        }
    });
});

  2. 0

    Simply refresh the cart using the custom event coded into the theme code already.

    So replace the custom event product:added code with cart:refresh
    change commented code with this code.

    setTimeout(function() {
    document.dispatchEvent(new CustomEvent('cart:refresh', {
        bubbles: true,
        detail: {
            variant: cart,
            quantity: 1
        }
    }));
}, 1200);

    I hope this helps you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search