我正在使用Shopify构建一个在线商店,并且在默认模板中遇到了一些jQuery / Ajax代码,我想根据自己的需要进行修改。
function addToCartSuccess (jqXHR, textStatus, errorThrown){
$.ajax({
type: 'GET',
url: '/cart.js',
async: false,
cache: false,
dataType: 'json',
success: updateCartDesc
});
window.location = "/cart";
$('.add-cart-msg').hide().addClass('success').html('Item added to cart! <a href="/cart" title="view cart">View cart and check out »</a>').fadeIn('300');
}
我自己添加了window.location行,认为它会在Cart页面上发布消息,但无济于事。如果我删除该代码,则在按下“添加到购物车”按钮时会在产品页面上发布成功消息,因此无需修改即可完成实际工作。
我也尝试使用POST命令创建自己的函数但是我最好猜测,因为我之前没有任何关于jQuery / Ajax级别的经验
function updateCartDesc (jqXHR, textStatus, errorThrown){
$.ajax({
type: 'POST',
url: '/cart',
async: false,
cache: false,
dataType: 'html',
success: function (){('.add-cart-msg').hide().addClass('success').html('Item added to cart! <a href="/cart" title="view cart">View cart and check out »</a>').fadeIn('300');
}
});
关于我哪里出错的指示?教程,指南等都很精彩。感谢
答案 0 :(得分:3)
您将不得不将用户重定向到购物车页面,其中URL中的参数告诉购物车页面显示消息。如下所示:
您的Ajax添加到购物车电话和回拨
$.ajax({
type: 'GET',
url: '/cart.js',
async: false,
cache: false,
dataType: 'json',
success: updateCartDesc
});
var updateCartDesc = function() {
//redirect the user to the cart and pass showSuccess=true in the URL
window.location = "/cart?showSuccess=true";
};
购物车页面上的脚本
$(function() {
//if the current URL contains showSuccess,
//display the success message to the user
if(window.location.href.indexOf('showSuccess') != -1) {
$('.add-cart-msg').hide()
.addClass('success')
.html('Item added to cart!')
.fadeIn('300');
}
});
请注意,此代码假设您在/ cart页面上有一个包含类add-cart-msg
的元素。