Prestige THEME - How to add multiple products at once

Technical Q&A
1

Hello,

I am back with another question regarding the add-to-cart feature within the Prestige theme. I would like to create a basket of products and when the add to cart button is clicked add each product to the cart. This is what I have so far:

addToCart() {

    let items = [];
    this.slots.forEach(slot => {
      items.push({
        'id': slot.id,
        'quantity': 1
      });
    });
    console.log(items);

    fetch('/cart/add.js', {
      body: JSON.stringify({ 'items': items }),
      credentials: 'same-origin',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest' // This is needed as currently there is a bug in Shopify that assumes this header
      }
    })
      .then(response => {
        return response.json();
      })
      .catch((error) => {
        console.error('Error:', error);
      });

  }

I get the items in my console.log correctly. But I am getting /cart/add.js 404 (Not Found). Is there a more performant way of doing this that plays nice with this theme?

2

Hi @Boba ,

Can you send me the display code of console.log.

Does it show like this structure:

'items': [
          {
            'id': id,
            'quantity': quantity
          },
          {
            'id': id,
            'quantity': quantity
          }
]

Hope it helps!

3

Yes

console.log(JSON.stringify({‘items’: items}));

{
  "items": [
    {
      "id": "115569446",
      "quantity": 1
    },
    {
      "id": "115569446",
      "quantity": 1
    },
    {
      "id": "115569446",
      "quantity": 1
    },
    {
      "id": "6090384901",
      "quantity": 1
    },
    {
      "id": "6090384901",
      "quantity": 1
    },
    {
      "id": "6142326440088",
      "quantity": 1
    }
  ]
}
4

Hi @Boba ,

I checked and it seems the id you passed is not correct. https://i.imgur.com/g9QwN5B.png

You can check it again. Because with current structure, it is completely correct, can only be error in data.

Or you can create a demo variable, to test it working well.

Hope it helps!

5

This is strange because the variant ids are correct. So the idea behind this was to create a basket of products. Then add this basket of products to the cart.

I’m guessing that this should be incrementing the product quantity of a product that has been added more than once instead of adding a new item entry?

6

So I made some adjustments:

let items = [];
    this.slots.forEach(slot => {
      items.push({
        'id': slot.id,
        'quantity': 1
      });
    });

fetch('/cart/add.js', {
      body: JSON.stringify({ 'items': items }),
      credentials: 'same-origin',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest' // This is needed as currently there is a bug in Shopify that assumes this header
      }
    }).then(response => {

      document.dispatchEvent(new CustomEvent('theme:loading:end'));

      if (response.ok) {
        document.querySelector( '.add-to-cart' ).removeAttribute('disabled');

        this.dispatchEvent(new CustomEvent('product:added', {
          bubbles: true
        }));
      } else {
        response.json().then(function (content) {

          const errorMessageElement = document.createElement('span');
          errorMessageElement.className = 'ProductForm__Error Alert Alert--error';
          errorMessageElement.innerHTML = content['description'];
          document.querySelector( '.add-to-cart' ).removeAttribute( 'disabled' );
          document.querySelector( '.add-to-cart' ).insertAdjacentElement( 'afterend', errorMessageElement );

          setTimeout(function () {
            errorMessageElement.remove();
          }, 2500);
        });
      }
    });

When I click the “.add-to-cart” button I get the error: “Cannot Find Variant”. These variants exist. If I were to go into the admin > products and plug this ID in I get my product/variant:

Example:

/admin/products/6090384901

console.log(JSON.stringify({'items': items}));

{
  "items": [
    {
      "id": "115569446",
      "quantity": 1
    },
    {
      "id": "6090384901",
      "quantity": 1
    },
    {
      "id": "6142326440088",
      "quantity": 1
    },
    {
      "id": "606176739386",
      "quantity": 1
    },
    {
      "id": "4385914323081",
      "quantity": 1
    },
    {
      "id": "4355255500937",
      "quantity": 1
    }
  ]
}

All variants are different so we shouldn’t have to increment the quantity in this example.

7

Hi @Boba ,

Please send me the link of the product containing the variant.

I will check it.

8

Hey @LitExtension ,

Thank you for your response. It was actually the ID that was trying to pass along. Instead of using the “variant” id as the documentation says :neutral_face: I was passing the “product” id. So like the error said that variant could not be found.

9

Hi @Boba ,

W/hen add to cart you only use ID variants, if you pass the correct ID it will work fine.

You can find the variants id by adding JSON after each product name. Ex: https://dawn-theme-default.myshopify.com/products/small-convertible-flex-bag-cappuccino.json

Hope it is clear to you.

1 Like
10

Hi @LitExtension ,

Yes, thank you! Adding .json to the end of the product’s URL is good to know. Much appreciated.

1 Like
11

HI @Boba ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.