Shopify 在购物车页面上发布 Ajax 添加到购物车成功消息

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/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 &raquo;</a>').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。