[英]Shopify update cart.item_count using AJAX
On the product detail page of my Shopify
site when you click " Add To Cart
" the page uses AJAX
to do its thing. 当您单击“
Add To Cart
”时,在我的Shopify
网站的产品详细信息页面上,该页面使用AJAX
进行操作。 BUT there is a variable named cart.item_count
that does not update unless the page refreshes. 但是有一个名为
cart.item_count
的变量,除非刷新页面,否则该变量不会更新。
Question: How to get AJAX to update the cart.item_count
on that page. 问题:如何获取AJAX来更新
cart.item_count
面上的cart.item_count
。
Below is the code for the HTML page: 以下是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 Code. JavaScript代码。 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. 底部有一行代码可以更新同一页面上的某些副本...如果我可以更新页面上已经找到的
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 »</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) 然后将其替换为“ UpdateCartDesc”功能(请参见成功消息)
function updateCartDesc(data){
var $cartLinkText = $('.cart_count_info').html(data.item_count);
}
Taking it as its related to header when you click Add to Cart, you get the updated number of products in your Cart. 单击“添加到购物车”时,将其作为与标题相关的信息,即可在购物车中获取更新的产品数量。
Just add class cart-count
to the div. 只需将class
cart-count
添加到div。 Your structure should look like this: 您的结构应如下所示:
#pageheader > .cart-summary > .cart-count
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.