使用AJAX Shopify更新cart.item_count [英] Shopify update cart.item_count using AJAX

问题描述

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

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

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

 ＆LT; D​​IV ID =迷你车＆GT;

            ＆LT;跨度类=cart_count_info＆GT;车（{{cart.item_count}}）＆LT; / SPAN＆GT; //这个跨度是什么需要更新

        ＆LT; / DIV＆GT;

         ＆其中，P ID =添加到购物车-MSG＆GT;＆LT; / P＆GT; //这个P为更新的AJAX与Messaging见下文JAVASCRIPT

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

          ＆LT; /形式GT;
 

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

 函数addToCartSuccess（jqXHR，textStatus，errorThrown）{

  $阿贾克斯（{
    键入：GET，
    网址：/cart.js，
    异步：假的，
    缓存：假的，
    数据类型：JSON，
    成功：updateCartDesc
  }）;
  $（'＃添加到购物车-MSG）隐藏（）addClass（成功）HTML（项目添加到购物车＆LT;！A HREF =/购物车称号=查看购物车＆GT;查看购物车，并检查了与放大器; RAQUO;＆LT; / A＆GT;'）淡入（）。

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


}
 

解决方案

删除

  $（'＃跨度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);
}

这篇关于使用AJAX Shopify更新cart.item_count的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！