18l Solution

[SuperSimpleDev]

No description provided.

[verakissyou17]

If we used cart-class.js in our project how can we send the cart to the backend from local Storage? I've tried this:

•     const response = await fetch(
      'https://supersimplebackend.dev/orders', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({cart: cart.cartItems})
    })   , but it doesn't work.
  

[y3onhold]

If we used cart-class.js in our project how can we send the cart to the backend from local Storage? I've tried this:

•     const response = await fetch(
      'https://supersimplebackend.dev/orders', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({cart: cart.cartItems})
    })   , but it doesn't work.
  

I think that might be because you have not imported cart onto scripts/order.js

[verakissyou17]

I don't think we need to import the cart in scripts/order.js, because here we have to work with the data received from the backend. When Simon makes a POST request to the backend, doesn't import the cart in that file . I think the data that I send to the backend is wrong. 🙃 🫣😬

[verakissyou17]

I have private key for local Storage. Could this be a problem?

[okontg]

I don't think we need to import the cart in scripts/order.js, because here we have to work with the data received from the backend. When Simon makes a POST request to the backend, doesn't import the cart in that file . I think the data that I send to the backend is wrong. 🙃 🫣😬

the 'cart' was imported, check files you've imported.
body: JSON.stringify({
cart: cart
})

is the product in the cart (stored), that he used to fetched data from the backend.

[verakissyou17]

This is in paymentSummary.js file, where we add event listener to the button, not in scripts/orders.js. In this file we retrieve the data from backend and render the orders.html file.

[okontg]

i don't really get you,
i don't know if this the section you're referring to.

document.querySelector('.js-place-order')
.addEventListener('click', async()=>{
try{
const response = await fetch('https://supersimplebackend.dev/orders',{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
cart: cart
})
});

  const order = await response.json();
  console.log(order);
  addOrder(order);

}catch(error){
  console.log('unespected error. Try again later.');
}

//window.location.href = 'orders.html';

});

but to make a 'POST' we must give the backend data which we want from it, this is the data, body: JSON.stringify( cart: cart })
we gave to the backend when we makes the post

[kirtick28]

This is in paymentSummary.js file, where we add event listener to the button, not in scripts/orders.js. In this file we retrieve the data from backend and render the orders.html file.

Troubleshooting Cart Submission Issue

I encountered a similar issue while working with paymentSummary.js. The problem lies in how the cart.cartItems are being handled. You are correctly sending cartItems to the backend, but the issue may be related to the structure or data types within cartItems.

Example of Correct cart Structure:

cart: [
  {
    productId: 'e43638ce-6aa0-4b85-b27f-e1d07eb678c6',
    quantity: 2,
    deliveryOptionId: '1'
  },
  {
    productId: '15b6fc6f-327a-4ec4-896f-486349e85a3d',
    quantity: 1,
    deliveryOptionId: '2'
  }
]

Key Points to Check:

deliveryOptionId Data Type:
Ensure that deliveryOptionId is a string. Initially, I used numbers like deliveryOptionId: 1, but this resulted in a 500 Internal Server Error. When I changed it to deliveryOptionId: '1', the backend accepted the data and returned the expected response.

Data Types of cartItems:
Verify that the data types for productId, quantity, and deliveryOptionId match the expected types in your backend API.

productId: String
quantity: Number
deliveryOptionId: String

Documentation:

Refer to the backend documentation to see the correct model for cart.cartItems.

Conclusion:

Check the data structure and types being sent from the frontend to the backend. Changing deliveryOptionId to a string resolved the issue for me. I hope this helps you too!