Shopify使用AJAX更新cart.item_count

Question

當您單擊“ Add To Cart ”時，在我的Shopify網站的產品詳細信息頁面上，該頁面使用AJAX進行操作。 但是有一個名為cart.item_count的變量，除非刷新頁面，否則該變量不會更新。

問題：如何獲取AJAX來更新cart.item_count面上的cart.item_count 。

以下是HTML頁面的代碼：

        <div id="mini-cart" >

            <span class="cart_count_info">Cart ({{ cart.item_count }})</span>//THIS SPAN IS WHAT NEEDS TO BE UPDATED 

        </div>

         <p id="add-to-cart-msg"></p> //THIS "P" IS UPDATED BY THE AJAX WITH MESSAGING SEE BELOW JAVASCRIPT

          <form action="/cart/add" method="post" class="variants" id="product-actions" enctype="multipart/form-data">
              //TOOK OUT SOME OF THE FORM DATA THAT IS NOT NEED FOR THIS EXAMPLE

          </form>

JavaScript代碼。 底部有一行代碼可以更新同一頁面上的某些副本...如果我可以更新頁面上已經找到的cart.item_count變量。

function addToCartSuccess (jqXHR, textStatus, errorThrown){

  $.ajax({
    type: 'GET',
    url: '/cart.js',
    async: false,
    cache: false,
    dataType: 'json',
    success: updateCartDesc
  });
  $('#add-to-cart-msg').hide().addClass('success').html('Item added to cart! <a href="/cart" title="view cart">View cart and check out &raquo;</a>').fadeIn();

$('span#cart_count_info').load(Cart ({{ cart.item_count }})); 
//MAYBE HERE IS WHERE I CAN ADD MY CODE TO UPDATE THE VARIABLE I NEED. MY CODE IS JUST A GUESS SINCE ID DON'T DO MUCH JAVASCRIPT PROGRAMMING.


}

Answer 1

去掉

$('span#cart_count_info').load(Cart ({{ cart.item_count }})); 

然后將其替換為“ UpdateCartDesc”功能（請參見成功消息）

function updateCartDesc(data){
  var $cartLinkText = $('.cart_count_info').html(data.item_count);
}

Answer 2

單擊“添加到購物車”時，將其作為與標題相關的信息，即可在購物車中獲取更新的產品數量。

只需將class cart-count添加到div。 您的結構應如下所示：

#pageheader > .cart-summary > .cart-count