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

【问题标题】：Update Shopify cart with ajax without page refresh使用 ajax 更新 Shopify 购物车而不刷新页面
【发布时间】：2017-02-26 18:08:10
【问题描述】：

我正在使用 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);
            }
          });
        });
      });
    },
});
}

【问题讨论】：

标签： javascript jquery ajax shopify

【解决方案1】：

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

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

【讨论】：

这仅适用于 1 个主题。如果我的应用安装在多个主题上，如何将元素替换为不同的 id 和类？
@BennyChan 主题通常有一个固定的侧推车类和 id。 AFAIK，这些应用程序有望在 Shopify 的默认主题上运行。如果您有带有自定义类/ID 的自定义主题，那么您无能为力。

【解决方案2】：

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

【讨论】：