Quantity and Add to cart

[Mj6078]

Body

document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".add-to-cart-form").forEach(form => {
form.addEventListener("submit", async (e) => {
e.preventDefault();

  // Validate product ID.
  const productIdInput = form.querySelector('input[name="product_id"]');
  if (!productIdInput) {
    console.error("Product ID input not found");
    return;
  }
  const productId = productIdInput.value;
  const productIdNumber = parseInt(productId, 10);
  if (isNaN(productIdNumber)) {
    console.error("Invalid product ID:", productId);
    return;
  }

  // Get the quantity from the input.
  const quantityInput = form.querySelector('input[name="qty"]'); // Make sure your HTML input name matches
  if (!quantityInput) {
    console.error("Quantity input not found");
    return;
  }
  const quantity = parseInt(quantityInput.value, 10) || 1;
  console.log("Product ID:", productIdNumber, "Requested Quantity:", quantity);

  // Use the GraphQL query to fetch product inventory.
  const graphqlEndpoint = '/graphql';
  const query = `
    query getProductsByIds($ids: [Int!]) {
      site {
        products(entityIds: $ids) {
          edges {
            node {
              id
              inventory {
                isInStock
                aggregated {
                  availableToSell
                  warningLevel
                }
              }
            }
          }
        }
      }
    }
  `;
  const variables = { ids: [productIdNumber] };

  let availableStock = 0;
  try {
    const invResponse = await fetch(graphqlEndpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': `Bearer ${window.storefrontApiToken}`
      },
      body: JSON.stringify({ query, variables })
    });
    const invData = await invResponse.json();
    console.log("GraphQL Inventory Response:", invData);
    
    const product = invData?.data?.site?.products?.edges?.[0]?.node;
    if (!product) {
      console.error("Product not found in GraphQL response", invData);
      return;
    }
    console.log("Full product object:", product);

    // Parse availableToSell safely.
    const rawAvailable = product.inventory?.aggregated?.availableToSell;
    availableStock = parseInt(rawAvailable, 10);
    if (isNaN(availableStock)) {
      console.warn("availableToSell is not a number:", rawAvailable);
      availableStock = 0;
    }
    console.log(`Available stock for product: ${availableStock}`);
  } catch (err) {
    console.error("Error fetching inventory data:", err);
    return;
  }

  // Compare requested quantity to available stock.
  if (quantity > availableStock) {
    alert(`❌ Only ${availableStock} item(s) available in stock. Please adjust your quantity.`);
    return;
  }

  // Prepare the payload for adding to cart.
  // If your cart API expects "quantity", use that.
  // (If it actually expects "qty", change the key accordingly.)
  const cartData = {
    line_items: [{
      quantity: quantity,
      product_id: productIdNumber
    }]
  };
  console.log("Cart data to be sent:", cartData);

  // Use the form's action attribute as the cart endpoint.
  const cartEndpoint = form.action;
  try {
    const cartResponse = await fetch(cartEndpoint, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json"
      },
      body: JSON.stringify(cartData)
    });

    if (cartResponse.ok) {
      alert(`✅ ${quantity} item(s) added to cart!`);
    } else {
      const errorResponse = await cartResponse.json();
      console.error("Cart API error:", errorResponse);
      if (errorResponse.errors && errorResponse.errors.length > 0) {
        alert(`❌ ${errorResponse.errors[0].message}`);
      } else {
        alert("❌ Failed to add product to cart.");
      }
    }
  } catch (err) {
    console.error("Error adding product to cart:", err);
    alert("❌ An error occurred while processing your request.");
  }
});

});
});
I working on the stencil cli in big commerce and I am trying to apply quantity box in the product card also In this, I have made GraphQL to fetch stock numbers, but I don't know how to solve this script. Please, can anyone help with this?

Guidelines

• I have read and understood this category's guidelines before making this post.