使用Ajax更新Shopify购物车而无需刷新页面

Question

我正在使用Ajax更改用户Shopify购物车，该购物车已成功更改，但是为了显示更新的购物车，用户必须刷新页面。 我想显示购物车更改而无需刷新。

我正在使用ajax api很好，我可以使用以下方法添加和删除项目：

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

这些功能效果很好，但是它们要求用户重新加载页面才能查看购物车中的新商品/更改商品。 您是否知道一种无需重新加载页面即可显示更新的购物车的方法？

这样每个人都有完整的图片，这是我的代码：

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操作：
使用ajax-api＃get-cart