CODEWITHSUNDEEP
shopifyshopify-appshopify-template
Jordash
Jordash

Reputation: 3103

In Shopify how to add multiple products to cart with varying quantities via url

I know in Shopify you can add multiple products like this:

/cart/add?id[]=VARIANT_ID1&id[]=VARIANT_ID2

My question is how would you adjust the quantity of each product that's being added?

For example I wanted VARIANT_ID1 to have a quantity of 2 and VARIANT_ID2 to have a quantity of 1?

I tried this:

/cart/add?id[]=VARIANT_ID1&quantity=2&id[]=VARIANT_ID2&quantity=1

But it just made the quantity 1 for everything.

Upvotes: 2

Views: 4924

Answers (3)

Vitaliy Dankiv
Vitaliy Dankiv

Reputation: 123

The easier way is to use Shopify Permalinks.

A cart permalink takes your customers directly to the first page of the checkout screen with items pre-loaded into their cart.

This is what a cart permalink looks like:

http://your-store.myshopify.com/cart/70881412:1,70881382:1

Where 70881412 is the product variant's unique ID and 1 is the quantity.

So the format of the url is:

http://yourstore.com/cart/#{variant_id}:#{quantity}(,...)

Upvotes: 1

Prateek Goyal
Prateek Goyal

Reputation: 483

I solved this problem by using the below code snippet:

/cart/update?updates[VARIANT_ID1]=quantity&updates[VARIANT_ID2]=quantity

Upvotes: 1

drip
drip

Reputation: 12933

Update

There was an update to the AJAX API that allows now to add multiply variants with different quantities with the same request.

Example:

fetch('/cart/add.js', {
    method: "post",
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({
        items: [
            {
                id: 33116502556724,
                quantity: 5
            },
            {
                id: 33116502589492,
                quantity: 3
            }
        ]
    })
})

Old Answer

You can't use the quantity as a separate item for each variant.

You have a few options but they all have some cons.

Please refer to this doc for the requests: https://help.shopify.com/en/themes/development/getting-started/using-ajax-api

Using /cart/add.js

You can create multiply AJAX request and add each separate item as a new AJAX request.

Pros:

  • it won't affect the products in the cart if they are already present

Cons:

  • Too many AJAX requests

Using /cart/update.js

You can make a single request and pass different quantity to each variant.

Pros

  • Save all variants with a single AJAX request with different quantity

Cons

  • You will overwrite the quantity of the product if they are already added in the cart

So the solution may be to get the cart.js response check if the current variants are present and if they are then make an update.js while adding the quantity to the existing one. So it's not so straightforward.

I can't think of an easier solution but at the end you might need a minimum of 2 AJAX calls to add a different quantity.

Upvotes: 2

Related Questions