javascript - 了解 Ajax 并添加购物车数量
问题描述
网站:https ://www.fermento24.com 如果您将产品添加到购物车,它将向您显示最近添加的产品、总数以及进入购物车的可能性。我想添加的是此类计数,例如:购物车中目前还有 5 种产品。
我尝试使用 {{ cart.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 }}: <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>
解决方案
您需要更新代码,您的 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
Shopify 文档的参考。
关联
推荐阅读
- mysql - 为多个语言相关表创建视图,但语言只有一列
- c - Contiki 中是否有类似于 time.h 中的 clock_gettime() 的函数?
- javascript - 中间件返回错误 express-Validator 不是函数
- python - 使用 Keras 的 Python 代码在调用 model.fit 时崩溃,没有错误代码
- macos - Parallels - MacOS 主机和来宾 - 如何允许绕过某些快捷方式来主机操作系统
- reactjs - 从父组件调用子组件函数
- python - pandas.DataFrame.assign() 方法中的“in”行为
- r - 如何使用 json 格式为参考类型收集每年的数量?
- css - 如何禁用css:链接社交图标上的非伪类
- authentication - 带有身份验证的 asp.net core 2.2 razor pages 应用程序在生产服务器上的会话超时非常快