How to add an item to the cart programmatically using API?

[pramodraam]

Hi,

We're creating a landing page for a marketing partner. We'll add a button named "Add to Cart"  in the landing page. How to add an item to the cart programmatically, from this page? Is it done the way explained at this Shopify dev doc https://shopify.dev/docs/api/ajax/reference/cart

[NomtechSolution · Accepted solution]

1. et the cart token or create a new cart if one doesn't exist yet. You can use the AJAX API endpoint '/cart.js' with the HTTP method GET to retrieve the cart token or POST to create a new cart.

2. Use the AJAX API endpoint '/cart/add.js' with the HTTP method POST to add an item to the cart. Pass the variant ID and the quantity as parameters in the request payload.

   Example payload:

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

[pramodraam]

Thank you.

Can you recommend a way/app to build a landing page for a marketing partner to drive traffic into our site? The page should have a Add to Cart button, and look similar to a product page of our site.

[pramodraam]

Hi,

I began writing API code just by trying to get cart as below. It prints the array of items in the cart. However, it is not printing "success" before printing cart array.

    var url = '/cart.js';

    fetch(url, {method: 'GET'})

      .then(res => res.json())

      .then(response => {

        console.log('Success:', JSON.stringify(response))

        const cart = response;

        // We now have access to Shopify cart object

        // console.log(cart);

        // Store cart items array

      .catch(error => console.error('Error:', error));

    });

I'm not sure why this is happening. Below is the link to development theme in case you want to check it.

https://byoscience.myshopify.com/?preview_theme_id=122254786606

[balmeetsachar]

var url = '/cart.js';
fetch(url, {method: 'GET'})
  .then(res => {
    if (!res.ok) {
      throw new Error('Network response was not ok');
    }
    return res.json();
  })
  .then(response => {
    console.log('Success:', response);
    const cart = response;
    // Now you can use the cart object
  })
  .catch(error => {
    console.error('Error:', error);
  });

• I added a check to see if the response from the server is okay using res.ok. If it's not okay, an error is thrown.
• Removed JSON.stringify() from the console.log() statement because response is already an object.
• Added a catch block to handle any errors that may occur during the fetch operation.

With these changes, your code should now log "Success:" followed by the cart data if the request is successful, and it will log any errors encountered during the fetch operation.