Shopify post Ajax添加到购物车页面上的购物车成功消息

我正在使用Shopify构建一个在线商店，并在默认模板中遇到了一些jQuery / Ajax代码，我想根据自己的需要进行修改。

function addToCartSuccess (jqXHR, textStatus, errorThrown){ $.ajax({ type: 'GET', url: 'https://stackoverflow.com/cart.js', async: false, cache: false, dataType: 'json', success: updateCartDesc }); window.location = "https://stackoverflow.com/cart"; $('.add-cart-msg').hide().addClass('success').html('Item added to cart! View cart and check out »').fadeIn('300'); } 

我添加了window.location行，我以为它会在Cart页面上发布消息，但无济于事。 如果我删除该代码，则在按下“添加到购物车”按钮时会在产品页面上发布成功消息，因此无需修改即可完成实际工作。

我也尝试使用POST命令创建自己的函数，但我最好猜测，因为我没有任何此级别的jQuery / Ajax的经验

 function updateCartDesc (jqXHR, textStatus, errorThrown){ $.ajax({ type: 'POST', url: 'https://stackoverflow.com/cart', async: false, cache: false, dataType: 'html', success: function (){('.add-cart-msg').hide().addClass('success').html('Item added to cart! View cart and check out »').fadeIn('300'); } }); 

关于我哪里出错的指示？ 教程，指南等都很精彩。 谢谢

Answer 1

您将不得不将用户重定向到购物车页面，其中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类的元素。