Shopify后阿贾克斯添加到购物车成功消息上车页面 [英] Shopify post Ajax add to cart success message on Cart page
问题描述
我建立使用Shopify在线商店和所遇到的一些jQuery /阿贾克斯code在默认的模板,我想修改我的需要。
I'm building an online store using Shopify and have come across some jQuery/Ajax code in the default template that I would like to modify for my needs.
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行自己想它会发布消息上车页面,但无济于事。如果我删除$ C C的成功消息$张贴在产品页面上时,加入购物车按钮是pressed所以它实际的工作而无需修改。
I added the window.location line myself thinking it would post the message on the Cart page but to no avail. If I remove that code the success message is posted on the product page when the Add to Cart button is pressed so it does actual work without modification.
我也试过用POST命令来创建自己的功能,但实际上我最好的猜测,因为我没有使用jQuery /阿贾克斯
I also tried creating my own function with a POST command but really I am best guessing as I don't have any previous experience with this level of 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');
}
});
这是我要去的地方错了任何指针?教程,指南等,将是美好的。谢谢
Any pointers on where I am going wrong? Tutorials, guides etc. would be wonderful. Thanks
推荐答案
您将不得不将用户重定向到购物车页面中,告诉车页面显示一条消息,URL中的参数。有点像如下:
You are going to have to redirect the user to the cart page with a param in the URL that tells the cart page to show a message. Something like the below:
您阿贾克斯添加到购物车电话和回调
$.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');
}
});
只是要注意,这code假设你有一个类/车页面上的元素添加-车-MSG
。
这篇关于Shopify后阿贾克斯添加到购物车成功消息上车页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!