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

Question

所以我用shopify liquid添加了一个collection页面，在这个collection页面中，有多个产品。单击名为 "Add all" 的按钮会将此 collection 中的所有产品添加到购物车。

如何在 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，就掉进fail块，不知道为什么。

Answer 1

您实际上可以通过一组 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 并将它们一个接一个地添加到购物车中。

有一个示例使用 JQuery

将商品添加到购物车

Answer 2

好吧，将多个项目添加到购物车需要一个递归循环。

我针对这个问题做了代码，欢迎使用： 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

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

Shopify liquid, add multiple products to cart

liquid

shopify