Shopify 液体，将多个产品添加到购物车答案

【问题标题】：Shopify liquid, add multiple products to cartShopify 液体，将多个产品添加到购物车
【发布时间】：2017-11-19 07:03:39
【问题描述】：

所以我用shopify Liquid添加了一个集合页面，在这个集合页面中，有多个产品。单击时，名为“全部添加”的按钮将将此系列中的所有产品添加到购物车。

如何在 shopify 液体语言中实现这一点？或者我们有多少种方法可以做到这一点？

另外，当我尝试从官方文档中使用它时

jQuery.post('/cart/add.js', {
                quantity: 1,
                id: 10911378372,
                properties: {
                    'First name': 'Caroline'
                }
            }).done(function() {
                console.log("second success");
            })
            .fail(function(err) {
                if(err.statusText !== 'OK'){
                    console.log("error", err);
                }
            })
            .always(function() {
                console.log("finished");
            });

即使 statusText 是 Ok，它也落入了失败块，我不知道为什么。

【问题讨论】：

查看 Shopify AJAX API，主要是这部分：help.shopify.com/themes/development/getting-started/…

标签： shopify liquid

【解决方案1】：

将多个商品添加到购物车需要一个递归循环。

我为这个问题做了一个代码，请随意使用： github link

样本在begin函数中：

    //IF PROPERTIES IS EMPTY ONLY SET FALSE
    MGUtil.data = [
        {"id":"12345","qty":2,"properties":{"data1":"1"}},
        {"id":"34567","qty":3,"properties":{"data2":"1"}},
        {"id":"67892","qty":1,"properties":{"data3":"1"}},
        {"id":"23456","qty":6,"properties":false}
    ]; // ADD 4 ITEMS
    MGUtil.total  = MGUtil.data.length;
    MGUtil.action = 'add';
    MGUtil.recursive();//EXECUTE

【讨论】：

感谢您的逻辑。但是当我使用你的代码时，这是来自控制台的错误。弃用] 主线程上的同步 XMLHttpRequest 已弃用，因为它对最终用户的体验产生不利影响。
在ajaxpost函数上将async:false改为true，

【解决方案2】：

您实际上可以通过一组 AJAX 调用来完成此操作。您一次只能将一件商品添加到购物车。请参阅AJAX API 帮助。

然后，您将使用 .liquid 将每个显示的产品的默认变体 ID 获取到列表中，或者我通常会这样做，如下所示：

<div data-variant="{{ product.selected_or_first_available_variant }}">
  ...
</div>

请参阅：https://help.shopify.com/themes/liquid/objects/product#product-selected_or_first_available_variant 看看这是否足够

然后您的按钮脚本将收集变体 ID 并将它们一一添加到购物车。

有一个示例here 使用 JQuery 将商品添加到购物车

【讨论】：