使用 ajax 更新 Shopify 购物车而不刷新页面

Question

我正在使用 Ajax 更改用户 Shopify 购物车，购物车已成功更改，但为了显示更新后的购物车，用户必须刷新页面。我想在不刷新的情况下显示购物车更改。

我正在使用 ajax api 就好了，我可以添加和删除项目：

Shopify.addItem();
Shopify.removeItem();

这些效果很好，但它们需要用户重新加载页面才能看到购物车中的 new/changed 项。您知道无需重新加载页面即可显示更新后的购物车的方法吗？

这样大家就有完整的图了，下面是我的代码：

function poll(products) {
$.ajax({
    url: "/apps/proxy",
    data: {products: products},
    type: "GET",
    dataType: "json",
    complete: setTimeout(function() 
      {cartAdd(); poll(products)}, 15000),
    success: function(data) {
      $.each(data, function(incoming_key, incoming_value){
        Shopify.getCart(function(cart){
          $.each(cart.items, function(cart_key, cart_value){
            if(cart_value.variant_id == incoming_value.id_to_remove){                 
              Shopify.addItem(incoming_value.variant_id, incoming_value.quantity);
              Shopify.removeItem(incoming_value.id_to_remove);
              console.log("some reason the incoming id is null or maybe not " + incoming_value.variant_id );
            }
            else if(cart_value.variant_id == incoming_value.variant_id && cart_value.quantity != incoming_value.quantity){
              Shopify.changeItem(cart_value.variant_id, incoming_value.quantity);
            }
          });
        });
      });
    },
});
}

Answer 1

对购物车页面 /cart 进行 ajax 调用，获取所需的元素并在当前页面上替换它们。

在第一个 $.each 函数之后添加上述代码。

Answer 2

您可以使用 shopify ajax 购物车，在插入或更新后调用 GET 操作：
using-ajax-api#get-cart

使用 ajax 更新 Shopify 购物车而不刷新页面

Update Shopify cart with ajax without page refresh

javascript

ajax

jquery

shopify