使用 AJAX 更新 Shopify 购物车产品列表答案

【问题标题】：Update Shopify cart product list using AJAX使用 AJAX 更新 Shopify 购物车产品列表
【发布时间】：2015-01-17 03:32:46
【问题描述】：

我在 Shopify 上对我的购物车进行了“Ajaxified”处理，当我点击产品页面上的“添加到购物车”按钮时，屏幕右上角的价格会更新，并且该产品会添加到购物车中而没有页面刷新。

当您点击右上角的价格时，它会显示一个下拉菜单，显示您的购物篮中有哪些产品（它显示产品 - 图片、网址、价格和数量）。

但是，当您点击“添加到购物车”时，此产品列表在您刷新页面之前不会更新。

如何刷新此列表（或者如何将产品添加到 AJAX 请求中的列表中）？？

我已尝试将其添加到 ajaxify 购物车模块 (https://raw.githubusercontent.com/carolineschnapp/ajaxify-cart/master/ajaxify-cart.liquid)：

$.getJSON(_config.shopifyAjaxCartURL, function(cart) {
    $("#dropdown-cart").append('<tr><td><a href="'+PRODUCT.URL+'" class="dropdown-product-image"><img src="'+PRODUCT.IMAGE+'"  alt="'+PRODUCT.DESCRIPTION+'" /></a></td><td class="restrain-width"><a href="'+PRODUCT.URL+'" class="small">PRODUCT.NAME</a></td><td class="text-right"><span class="small">PRODUCT.QUANTITY</span></td></tr>');
});

这会使用表格行和单元格更新购物车，但我不知道如何为PRODUCT.**** 调用正确的变量。我已经尝试过液体 ({{ product.title }}) 变量，但这些对我不起作用。

我还尝试使用cart.item、cart.productcart.product_title，因为代码中已经引用了cart.，但这只是破坏了脚本。

有谁知道点击按钮后如何在不刷新页面的情况下简单地刷新此表单（这将是完美的！），或如何使用我的路线添加产品从上面开始？

【问题讨论】：

您要求有人为您完成工作。他们不会。您还需要了解 jquery（至少一点）才能做到这一点。无论如何，cart.js 返回一个 json 对象，您可以对其进行迭代并循环访问所有产品（您可以为此使用 jquery 的 each() 方法）。 docs.shopify.com/support/your-website/themes/…你也可以参考这个，因为你的问题或多或少是重复的stackoverflow.com/questions/26379057/…
感谢@FunkDoc 的帮助——我绝对不是要求某人“为我做这项工作”，但我只是想了解为什么我不能调用变量。据我所见，我正在调用cart.js，然后尝试调用类似cart.title 的东西（例如，在您链接到的问题中，他们调用cart.item_count）但是它出错了，我只是想知道是否我使用了错误的命名约定或其他东西，或者我完全不合时宜。

标签： jquery ajax shopify

【解决方案1】：

这对我来说非常有效！可能是过时的帖子，但对于那些寻找在哪里输入此代码的人来说：

$.getJSON(_config.shopifyAjaxCartURL, function(cart)

【讨论】：

【解决方案2】：

所以我终于弄清楚我哪里出错了，我试图打电话给cart.title，它应该是cartItem.title。然后我只是用each在jQuery中循环这些。

这是我的完整代码：

$.each(cart.items, function(index, cartItem) {
   $("#dropdown-cart").append('<tr><td><a href="'+cartItem.url+'" class="dropdown-product-image"><img src="'+cartItem.image+'" alt="product image"/></a></td><td class="restrain-width"><a href="'+cartItem.url+'" class="small">'+cartItem.quantity+' '+cartItem.title+'</a></td><td class="text-right"><span class="small">'+(Shopify.formatMoney(cartItem.line_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"))+'</span></td></tr>');
});

【讨论】：

【解决方案3】：

shopify 有自己的 ajax 方法，您可以将其用于 ajax 购物车

shopify cart.js

【讨论】：

我一直在查看该文档，例如，当我尝试拨打 title 时，它会破坏 AJAX，并在我单击“添加到购物车”时将我发送到购物车。我对 AJAX 的东西不太感兴趣，知道如何开始让它工作吗？