Question

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

如何在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，它也属于失败块，我不知道为什么。

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

将项目添加到购物车有一个示例here

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液体，添加多个产品到购物车

2 个答案: