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 &raquo;</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 &raquo;</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屋！