I am writing to report an issue I'm experiencing with the Cart API implementation. I have tried multiple approaches to add products to a customer's cart programmatically, but I'm encountering difficulties.

API Request Approach

Headers:

Request Body:

While the API returns a success message with the product details, the products are not actually being added to the cart when I check the cart page (/cart).

HTML Components Approach

1. <script>
2. function LocalStorage_CartItems() {
3.     const cartDetails = "4509902000003924347/4&4509902000003924345/2"
4.     if (cartDetails) {
5.       const products = cartDetails.split("&");
6.       
7.       products.forEach((product) => {
8.         const [productId, quantity] = product.split("/");
9.         for (let i = 0; i < quantity; i++) {
10.           addProductToCart(productId);
11.         }
12.       });
13.     }
14. }
15. 
    
16. function addProductToCart(productId) {
17.     const addToCartBtn = document.querySelector(
18.       `[data-zs-add-to-cart][data-zs-product-variant-id="${productId}"]`
19.     );
20.     
21.     if (addToCartBtn) {
22.       addToCartBtn.click();
23.     }
24. }
    
25. </script>
    

Questions:

1. Is there a recommended way to programmatically add products to a customer's cart?
2. Are there any additional headers or authentication requirements for the Cart API that I might be missing?
3. Could you provide an example of a successful implementation?

I would greatly appreciate any guidance on resolving this issue. Our goal is to implement a solution that allows us to programmatically add products to our customers' carts when they scan a QR code, using the Local Storage to save the string with the ID and quantity product.