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。