Prestige THEME - How to add multiple products at once

Boba
Shopify Partner
31 0 5

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?

Replies 10 (10)

LitExtension
Shopify Partner
4860 1001 1132

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Boba
Shopify Partner
31 0 5

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
    }
  ]
}

 

LitExtension
Shopify Partner
4860 1001 1132

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!

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Boba
Shopify Partner
31 0 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?

Boba
Shopify Partner
31 0 5

 

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. 

LitExtension
Shopify Partner
4860 1001 1132

Hi @Boba,

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

I will check it.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Boba
Shopify Partner
31 0 5

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 😐 I was passing the "product" id. So like the error said that variant could not be found. 

LitExtension
Shopify Partner
4860 1001 1132

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Boba
Shopify Partner
31 0 5

Hi @LitExtension ,

 

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

LitExtension
Shopify Partner
4860 1001 1132

HI @Boba,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify