Question

我已经被Ajaxified＆＃39;我在Shopify上的购物车，当我点击“添加到购物车”时按钮在产品页面上，屏幕右上角的价格会更新，产品会在没有页面刷新的情况下添加到购物车中。

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

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

如何刷新此列表（或如何在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.product cart.product_title，因为代码中已经引用了cart.，但这只是破坏了脚本。

有人知道如何在点击按钮后没有页面刷新时简单地刷新此表单（这将是完美的！），或者如何使用路线i＆＃39添加产品从上面开始了吗？

Answer 1

所以我终于弄清楚我哪里出错了，我试着打电话给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>');
});

Answer 2

shopify有自己的ajax方法，你可以用它来ajax购物车

shopify cart.js

Answer 3

这完全适合我！也许过时了，但对于那些希望在哪里输入此代码的人，它位于：

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

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

3 个答案: