Shopify post阿贾克斯添加到购物车成功消息在购物车页面

Question

我正在使用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 &raquo;</a>').fadeIn('300'); 
} 

我添加了window.location的行自己在想它会发布的购物车页面上，但无济于事消息。如果我删除了该代码，则当按下“添加到购物车”按钮时，成功消息将发布到产品页面上，因此它可以在不做任何修改的情况下实际工作

我也试图与一个POST命令来创建自己的功能，但真正我最好的猜测，因为我没有这个水平的jQuery的/阿贾克斯

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 &raquo;</a>').fadeIn('300'); 
    } 
}); 

任何指点我在哪里任何以往的经验出错了？教程，指南等将是美好的。谢谢

Answer 1

您将不得不将用户重定向到购物车页面，并在URL中带有一个参数，告诉购物车页面显示消息。喜欢的东西下面：

你阿贾克斯添加到购物车电话和回调

$.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。