使用AJAX Shopify更新cart.item_countShopify、AJAX、item_count、cart

2023-09-10 14:06:47 作者:我愿意为你换根烟

在我的 Shopify 网​​站当您单击产品详细信息页面放入购物车页面使用 AJAX 做的事情。但有一个变量名为 cart.item_count 不更新,除非刷新页面。

问:如何让AJAX来更新 cart.item_count 在该网页上

下面是$ C $下的HTML页面:

 < D​​IV ID =迷你车>

            <跨度类=cart_count_info>车({{cart.item_count}})< / SPAN> //这个跨度是什么需要更新

        < / DIV>

         &其中,P ID =添加到购物车-MSG>< / P> //这个P为更新的AJAX与Messaging见下文JAVASCRIPT

          <形式的行动=/车/加的方法=后级=变种ID =产品行动ENCTYPE =的multipart / form-data的>
              //拿出一些形式的数据,这些数据并不需要在这个例子中

          < /形式GT;
 

JavaScript的code。有一行code底部,更新同一页上的一些副本...如果我可以更新我的这是他网页上已经找到cart.item_count 变量。

 函数addToCartSuccess(jqXHR,textStatus,errorThrown){

  $阿贾克斯({
    键入:GET,
    网址:/cart.js,
    异步:假的,
    缓存:假的,
    数据类型:JSON,
    成功:updateCartDesc
  });
  $('#添加到购物车-MSG)隐藏()addClass(成功)HTML(项目添加到购物车<!A HREF =/购物车称号=查看购物车>查看购物车,并检查了与放大器; RAQUO;< / A>')淡入()。

$('#跨度cart_count_info')负载(车({{cart.item_count}}));
// MAYBE这里是我可以加我的code来更新我需要的变量。 MY code只是一个猜测以来ID没有做很多JavaScript编程。


}
 
Shopify工具介绍 Countdown Cart,推动客户的行动的倒计时购物车

解决方案

删除

  $('#跨度cart_count_info')负载(车({{cart.item_count}}));
 

和更换的UpdateCartDesc功能,波纹管(看到你成功的消息)

 函数updateCartDesc(数据){
  变量$ cartLinkText = $('cart_count_info。)HTML(data.item_count)。
}
 

On the product detail page of my Shopify site when you click "Add To Cart" the page uses AJAX to do its thing. BUT there is a variable named cart.item_count that does not update unless the page refreshes.

Question: How to get AJAX to update the cart.item_count on that page.

Below is the code for the HTML page:

        <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 Code. There is a line of code at the bottom that updates some copy on the same page... If I can update my cart.item_count variable that is already found on he page.

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.


}

解决方案

Remove

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

and replace it for "UpdateCartDesc" function bellow (see your success message)

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