javascript - Understanding Ajax and adding cart count

Question

website: https://www.fermento24.com If you add a product to the cart, it'll show you the recently added product, total and possibility to go to cart. What I wanted to add was a count of the sort, like: There are currently another 5 products in the cart.

I tried to use {{ cart.item_count }}, but since the popup works on Ajax it doesn't seem to update on time, only showing me at the first time how many products were in the cart (thus, incorrect informations).

How do I go and implement something like this? What follows under is a test I did based on other answers I found here, but that still didn't work.

<div class="loading-modal modal">{{ 'general.search.loading' | t }}</div> 

<div class="newsletter-success-modal">
  <div class="modal-overlay"></div>
  <div class="ajax-modal-content">
    <a class="close close-window btn" title="{{ 'general.password_page.close' | t }}">
      <i class="fa fa-times"></i>
    </a>
    <i class="fa fa-check" aria-hidden="true"></i>
    <span>{{ 'general.newsletter_form.mailing_list_success_message' | t }}</span>
  </div>
</div>  

<div class="ajax-error-modal modal">
  <div class="modal-inner">
    <div class="ajax-error-title">{{ 'general.search.error' | t }}</div>
    <div class="ajax-error-message"></div>
  </div>
</div>
<div class="ajax-success-modal modal">
    <div class="overlay"></div>
    <div class="content"> 
      
      
      <div class="ajax-left">    
        <p class="added-to-cart info">{{ 'cart.general.added_to_cart' | t }}</p>
      <p class="added-to-wishlist info">{{ 'products.wishlist.added_to_wishlist' | t }}</p>
      <img class="ajax-product-image" alt="modal window" src="/" />
       <div class="ajax-cart-desc">
        <h3 class="ajax-product-title"></h3>
        <span class="ajax_price"></span>
        <p>{{ 'cart.general.qty' | t }}:&nbsp;<span class="ajax_qty"></span></p>
        </div>
      </div>
      <div class="ajax-right"> 
      
        <div>Totale nel carrello: <span class="ajax_cartTotal"></span><br>
          <span class="cart-item-count"> </span>
        </div>
          <button class="btn continue-shopping" onclick="javascript:void(0)">{{ 'cart.general.continue_shopping' | t }}</button>
        <div class="success-message added-to-cart"><a href="/cart" class="btn"><i class="fa fa-shopping-cart"></i>{{ 'cart.general.view_cart' | t }}</a> </div>  
      
      </div>
    <a href="javascript:void(0)" class="close-modal"><i class="fa fa-times-circle"></i></a>
    </div>    
</div>
   <script type="text/javascript">
$(function(){
    var cartCount = {{ cart.item_count }};
    $('.varients-item').on('click', function(){
        var obj = $(this);
        $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            data: {
                quantity: 1,
                id: $(this).attr("data-variant")
            },
            dataType: 'json',
            success: function (data) {
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    url: '/cart.json',
                    success: function(cart){
                        cartCount++;
                        $('.cart-item-count').html(cartCount);
                    }
                });
            }
        });
    });
});

  </script>

Answer 1

You need to update the code and your JS code is looks like similar to demo code below:

$(function(){
    $('.varients-item').on('click', function(){
        var obj = $(this);
        $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            data: {
                quantity: 1,
                id: $(this).attr("data-variant")
            },
            dataType: 'json',
            success: function (data) {
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    url: '/cart.js',
                    success: function(cart){
                        // once you get the data from AJAX API you need to get the latest count
                        let total = cart.item_count;
                        $('.cart-item-count').html(total);
                    }
                });
            }
        });
    });
});

Here is the reference for the cart.js over Shopify documentation. Link