index-shop/assets/js/product-add-to-cart.js

/**
 * Product Add to Cart functionality
 * Handles the add to cart button interaction with Shopify
 */
(function() {
  // Initialize Shopify Cart
  const cart = new ShopifyCart({
    domain: 'nv7cqv-bu.myshopify.com',
    storefrontAccessToken: 'dec3d35a2554384d149c72927d1cfd1b'
  });

  // Get product ID from data attribute
  const addToCartBtn = document.querySelector('[data-shopify-add-to-cart]');

  if (!addToCartBtn) {
    console.warn('Add to cart button not found');
    return;
  }

  const productId = addToCartBtn.dataset.productId;
  const variantId = addToCartBtn.dataset.variantId;
  const stockDisplay = document.querySelector('[data-product-stock]');

  // Get translated texts
  const texts = {
    add: addToCartBtn.dataset.textAdd || 'Add to cart',
    adding: addToCartBtn.dataset.textAdding || 'Adding...',
    added: addToCartBtn.dataset.textAdded || 'Added! ✓',
    error: addToCartBtn.dataset.textError || 'Error - Try again',
    outOfStock: addToCartBtn.dataset.textOutOfStock || 'Out of stock',
    inStock: addToCartBtn.dataset.textInStock || 'In stock'
  };

  // Load product data to check availability
  async function loadProductData() {
    try {
      const product = await cart.getProduct(productId);

      if (!product) {
        console.error('Product not found');
        return;
      }

      // Find the specific variant or use the first one
      let variant;
      if (variantId) {
        variant = product.variants.edges.find(
          edge => edge.node.id === `gid://shopify/ProductVariant/${variantId}`
        )?.node;
      } else {
        variant = product.variants.edges[0]?.node;
      }

      if (!variant) {
        console.error('Variant not found');
        return;
      }

      // Update button based on availability
      if (!variant.availableForSale) {
        addToCartBtn.disabled = true;
        addToCartBtn.textContent = texts.outOfStock;
        addToCartBtn.classList.add('out-of-stock');
        if (stockDisplay) {
          stockDisplay.textContent = texts.outOfStock;
          stockDisplay.classList.add('out-of-stock');
        }
      } else {
        // Show in stock
        if (stockDisplay) {
          stockDisplay.textContent = texts.inStock;
          stockDisplay.classList.add('in-stock');
        }
      }

      // Store variant ID for later use
      addToCartBtn.dataset.variantId = variant.id.replace('gid://shopify/ProductVariant/', '');

    } catch (error) {
      console.error('Error loading product:', error);
    }
  }

  // Handle add to cart click
  addToCartBtn.addEventListener('click', async function(e) {
    e.preventDefault();

    // Disable button during request
    addToCartBtn.disabled = true;
    const originalText = addToCartBtn.textContent;
    addToCartBtn.textContent = texts.adding;

    try {
      const variantId = this.dataset.variantId;
      const cartResult = await cart.addToCart(variantId, 1);

      // Show success feedback
      addToCartBtn.textContent = texts.added;
      addToCartBtn.classList.add('success');

      // Dispatch event to open cart drawer
      document.dispatchEvent(new CustomEvent('cart:updated', {
        detail: { cart: cartResult }
      }));

      // Reset button after short delay
      setTimeout(() => {
        addToCartBtn.disabled = false;
        addToCartBtn.textContent = originalText;
        addToCartBtn.classList.remove('success');
      }, 1500);

    } catch (error) {
      console.error('Error adding to cart:', error);

      // Show error feedback
      addToCartBtn.textContent = texts.error;
      addToCartBtn.classList.add('error');

      // Re-enable button after delay
      setTimeout(() => {
        addToCartBtn.disabled = false;
        addToCartBtn.textContent = originalText;
        addToCartBtn.classList.remove('error');
      }, 2000);
    }
  });

  // Load product data on page load
  loadProductData();
})();