Shopify liquid, add multiple products to cart

Question

So I used shopify liquid to add a collection page, in this collection page, there is multiple products. A button named "Add all" will add all products from this collection to shopping cart when click.

How can I achieve this in shopify liquid language? Or how many way we can do this?

Also, when I tried to use this from the official doc

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");
            });

even the statusText is Ok, it falls into the fail block and I don't know why.

Answer 1

You would actually do this with a set of AJAX calls. You can only add one item to the cart at a time. See the AJAX API help.

Then you'd use .liquid to get the default variant id for each displayed product either into a list or, what I generally do, as something like:

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

see: https://help.shopify.com/themes/liquid/objects/product#product-selected_or_first_available_variant to see if that would be sufficient

and then your button script would gather the variant ids and add them one-by-one to the cart.

There is an example here of adding an item to the cart with JQuery

Answer 2

Well for add multiple items to cart is neccesary a recursive loop.

I did a code for this issue, feel free for use: github link

the sample is in the begin function:

    //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