Shopify liquid, add multiple products to cart - shopify

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

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

Answer 2

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