404 when using Shopify Cart API

Shopify Plus
1

I have a custom quiz in which I need to implement adding to cart. Now the problem is that in the console there is a 404 error and a message - {“status”:“bad_request”,“message”:“Parameter Missing or Invalid”, “description”:“Required parameter missing or invalid: items”}. But in my function I use the console and the data looks like this:

{
    "items": [
        {
            "id": 6847507988526,
            quantity: 3
        }
    ]
}

There is a product with this ID. I also added input type hidden to the form in the value of which I write down this ID. In the console, it is also correctly entered. What could be the problem?

productFormSubmit.addEventListener('click', (e) => {
  e.preventDefault();
  console.log(formData);
  fetch(window.Shopify.routes.root + 'cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
    .then(response => {
      return response.json();
    })
    .catch((error) => {
      console.error('Error:', error);
    });
});

Site - https://justwater.com/?_ab=0&_fd=0&_sc=1

WDS_0-1679955530614.png
WDS_0-1679955530614.png1299×786 94.3 KB

WDS_1-1679955555855.png
WDS_1-1679955555855.png1133×852 113 KB

2

Since you are trying to add multiple items to the cart at once, the Shopify AJAX API /cart/add.js route only supports adding a single item at a time. Instead, you should iterate through the items array and call the API for each item individually.

```javascript
productFormSubmit.addEventListener('click', (e) => {
e.preventDefault();
console.log(formData);

formData.items.forEach(item => {
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"id": item.id,
"quantity": item.quantity
})
})
.then(response => {
return response.json();
})
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
});
});


This code iterates through each item in the formData.items array and makes a separate API call for each item. Make sure your formData object has the correct format:

```markup
```javascript
{
"items": [
{
"id": 6847507988526,
"quantity": 3
}
]
}


After making these changes, the code should work as expected and add the items to the cart without any error.