了解 Ajax 并添加购物车数量

Question

网站：https://www.fermento24.com 如果您将产品添加到购物车，它将向您显示最近添加的产品、总数以及进入购物车的可能性。我想添加的是此类计数，例如：购物车中目前还有 5 件产品。

我尝试使用 {{ car​​t.item_count }}，但由于弹出窗口在 Ajax 上有效，它似乎没有按时更新，仅在第一次显示购物车中有多少产品（因此，不正确信息）。

我该如何去实现这样的东西？下面是我根据我在此处找到的其他答案所做的测试，但这仍然不起作用。

<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

您需要更新代码，您的 JS 代码类似于下面的演示代码：

$(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);
                    }
                });
            }
        });
    });
});

这里是 cart.js over Shopify 文档的参考。 Link