Issue with Cart API Implementation - Products Not Being Added to Cart

Issue with Cart API Implementation - Products Not Being Added to Cart

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

I am making a POST request to https://commerce.zoho.com/storefront/api/v1/cart in Postman with the following configuration:

Headers:

  2. Cookie: 2-9e3fd03229afdb64895d0b07bce24969d3b7abbd417ae3d075cb4f68d5856f107200da65b0a26079343686901f2d60c0
  3. domain-name: tiendasalud.synapsis.holdings

Request Body:

  2. {
  3.     "product_variant_id": "4509902000001524005",
  4.     "quantity": 5
  5. }

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

I have also attempted to implement this using the HTML components and JavaScript in my Commerce headers code:

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

  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>

The format "4509902000003924347/4&4509902000003924345/2" represents:

- The product ID (first set of numbers).
- The quantity separated by a slash (/).
- Multiple products separated by an ampersand (&).

But the problem is that the addToCartBtn returns null, so I think I'm trying to access to a component that doesn't exists in the /cart page.

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.