Implement custom Shopify cart with drawer UI

Replace Shopify Buy Button iframe with custom implementation using Storefront API 2026-01. Create interactive cart drawer with full product management capabilities (add, remove, update quantities) and seamless checkout flow.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

assets/js/cart-drawer.js

@@ -0,0 +1,214 @@
+/**
+ * Cart Drawer Component
+ * Manages the cart sidebar with add/remove/update functionality
+ */
+(function() {
+  const drawer = document.getElementById('cart-drawer');
+  const emptyState = document.querySelector('[data-cart-empty]');
+  const itemsContainer = document.querySelector('[data-cart-items]');
+  const checkoutBtn = document.querySelector('[data-cart-checkout]');
+  const closeButtons = document.querySelectorAll('[data-cart-close]');
+
+  let currentCart = null;
+  let cartInstance = null;
+
+  // Wait for ShopifyCart to be available
+  function initCartDrawer() {
+    if (typeof ShopifyCart === 'undefined') {
+      setTimeout(initCartDrawer, 100);
+      return;
+    }
+
+    cartInstance = new ShopifyCart({
+      domain: 'nv7cqv-bu.myshopify.com',
+      storefrontAccessToken: 'dec3d35a2554384d149c72927d1cfd1b'
+    });
+
+    // Initialize event listeners
+    setupEventListeners();
+  }
+
+  function setupEventListeners() {
+    // Close drawer
+    closeButtons.forEach(btn => {
+      btn.addEventListener('click', closeDrawer);
+    });
+
+    // Checkout button
+    checkoutBtn.addEventListener('click', () => {
+      if (currentCart?.checkoutUrl) {
+        window.location.href = currentCart.checkoutUrl;
+      }
+    });
+
+    // Listen for custom cart update events
+    document.addEventListener('cart:updated', (e) => {
+      currentCart = e.detail.cart;
+      renderCart();
+      openDrawer();
+    });
+  }
+
+  function openDrawer() {
+    drawer.classList.add('is-open');
+    document.body.style.overflow = 'hidden';
+  }
+
+  function closeDrawer() {
+    drawer.classList.remove('is-open');
+    document.body.style.overflow = '';
+  }
+
+  function renderCart() {
+    if (!currentCart || !currentCart.lines || currentCart.lines.edges.length === 0) {
+      emptyState.classList.remove('hidden');
+      itemsContainer.classList.add('hidden');
+      checkoutBtn.disabled = true;
+      return;
+    }
+
+    emptyState.classList.add('hidden');
+    itemsContainer.classList.remove('hidden');
+    checkoutBtn.disabled = false;
+
+    // Render cart items
+    itemsContainer.innerHTML = currentCart.lines.edges.map(edge => {
+      const item = edge.node;
+      const merchandise = item.merchandise;
+
+      return `
+        <div class="cart-item" data-line-id="${item.id}">
+          <div class="cart-item__details">
+            <h4 class="cart-item__title">${merchandise.product.title}</h4>
+            ${merchandise.title !== 'Default Title' ? `<p class="cart-item__variant">${merchandise.title}</p>` : ''}
+            <p class="cart-item__price">${merchandise.price.amount} ${merchandise.price.currencyCode}</p>
+
+            <div class="cart-item__quantity">
+              <button class="cart-item__qty-btn" data-action="decrease" data-line-id="${item.id}">−</button>
+              <span class="cart-item__qty-value">${item.quantity}</span>
+              <button class="cart-item__qty-btn" data-action="increase" data-line-id="${item.id}">+</button>
+            </div>
+
+            <button class="cart-item__remove" data-action="remove" data-line-id="${item.id}">
+              Retirer
+            </button>
+          </div>
+        </div>
+      `;
+    }).join('');
+
+    // Attach event listeners to quantity buttons
+    attachQuantityListeners();
+  }
+
+  function attachQuantityListeners() {
+    const buttons = itemsContainer.querySelectorAll('[data-action]');
+
+    buttons.forEach(btn => {
+      btn.addEventListener('click', async (e) => {
+        const action = e.target.dataset.action;
+        const lineId = e.target.dataset.lineId;
+
+        await handleQuantityChange(action, lineId);
+      });
+    });
+  }
+
+  async function handleQuantityChange(action, lineId) {
+    if (!cartInstance || !currentCart) return;
+
+    // Find the line item
+    const line = currentCart.lines.edges.find(edge => edge.node.id === lineId);
+    if (!line) return;
+
+    const currentQty = line.node.quantity;
+    let newQty = currentQty;
+
+    if (action === 'increase') {
+      newQty = currentQty + 1;
+    } else if (action === 'decrease') {
+      newQty = Math.max(0, currentQty - 1);
+    } else if (action === 'remove') {
+      newQty = 0;
+    }
+
+    // Update cart via API
+    try {
+      itemsContainer.classList.add('is-loading');
+
+      const query = `
+        mutation cartLinesUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
+          cartLinesUpdate(cartId: $cartId, lines: $lines) {
+            cart {
+              id
+              checkoutUrl
+              lines(first: 10) {
+                edges {
+                  node {
+                    id
+                    quantity
+                    merchandise {
+                      ... on ProductVariant {
+                        id
+                        title
+                        price {
+                          amount
+                          currencyCode
+                        }
+                        product {
+                          title
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            userErrors {
+              field
+              message
+            }
+          }
+        }
+      `;
+
+      const data = await cartInstance.query(query, {
+        cartId: currentCart.id,
+        lines: [{
+          id: lineId,
+          quantity: newQty
+        }]
+      });
+
+      if (data.cartLinesUpdate.userErrors.length > 0) {
+        throw new Error(data.cartLinesUpdate.userErrors[0].message);
+      }
+
+      currentCart = data.cartLinesUpdate.cart;
+      renderCart();
+
+    } catch (error) {
+      console.error('Error updating cart:', error);
+      alert('Erreur lors de la mise à jour du panier');
+    } finally {
+      itemsContainer.classList.remove('is-loading');
+    }
+  }
+
+  // Public API
+  window.CartDrawer = {
+    open: openDrawer,
+    close: closeDrawer,
+    updateCart: (cart) => {
+      currentCart = cart;
+      renderCart();
+    }
+  };
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initCartDrawer);
+  } else {
+    initCartDrawer();
+  }
+})();

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

@@ -0,0 +1,121 @@
+/**
+ * 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]');
+
+  // 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 = 'Rupture de stock';
+        addToCartBtn.classList.add('out-of-stock');
+        if (stockDisplay) {
+          stockDisplay.textContent = 'Rupture de stock';
+          stockDisplay.classList.add('out-of-stock');
+        }
+      } else {
+        // Show in stock
+        if (stockDisplay) {
+          stockDisplay.textContent = 'En stock';
+          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 = 'Ajout en cours...';
+
+    try {
+      const variantId = this.dataset.variantId;
+      const cartResult = await cart.addToCart(variantId, 1);
+
+      // Show success feedback
+      addToCartBtn.textContent = 'Ajouté ! ✓';
+      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 = 'Erreur - Réessayer';
+      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();
+})();

assets/js/shopify-cart.js

@@ -0,0 +1,232 @@
+/**
+ * Shopify Storefront API Client
+ * Custom implementation using Cart API (2026-01)
+ */
+class ShopifyCart {
+  constructor(config) {
+    this.domain = config.domain;
+    this.storefrontAccessToken = config.storefrontAccessToken;
+    this.apiVersion = '2026-01';
+    this.endpoint = `https://${this.domain}/api/${this.apiVersion}/graphql.json`;
+    this.cartId = null;
+    this.cartItems = [];
+
+    // Load existing cart from localStorage
+    this.loadCart();
+  }
+
+  /**
+   * Make GraphQL request to Shopify Storefront API
+   */
+  async query(query, variables = {}) {
+    const response = await fetch(this.endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Shopify-Storefront-Access-Token': this.storefrontAccessToken,
+      },
+      body: JSON.stringify({ query, variables }),
+    });
+
+    const result = await response.json();
+
+    if (result.errors) {
+      console.error('Shopify API Error:', result.errors);
+      throw new Error(result.errors[0].message);
+    }
+
+    return result.data;
+  }
+
+  /**
+   * Get product information by ID
+   */
+  async getProduct(productId) {
+    const query = `
+      query getProduct($id: ID!) {
+        product(id: $id) {
+          id
+          title
+          description
+          availableForSale
+          variants(first: 10) {
+            edges {
+              node {
+                id
+                title
+                price {
+                  amount
+                  currencyCode
+                }
+                availableForSale
+              }
+            }
+          }
+        }
+      }
+    `;
+
+    const data = await this.query(query, {
+      id: `gid://shopify/Product/${productId}`
+    });
+
+    return data.product;
+  }
+
+  /**
+   * Create a new cart
+   */
+  async createCart(lines = []) {
+    const query = `
+      mutation cartCreate($input: CartInput!) {
+        cartCreate(input: $input) {
+          cart {
+            id
+            checkoutUrl
+            lines(first: 10) {
+              edges {
+                node {
+                  id
+                  quantity
+                  merchandise {
+                    ... on ProductVariant {
+                      id
+                      title
+                      price {
+                        amount
+                        currencyCode
+                      }
+                      product {
+                        title
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+          userErrors {
+            field
+            message
+          }
+        }
+      }
+    `;
+
+    const data = await this.query(query, {
+      input: { lines }
+    });
+
+    if (data.cartCreate.userErrors.length > 0) {
+      throw new Error(data.cartCreate.userErrors[0].message);
+    }
+
+    this.cartId = data.cartCreate.cart.id;
+    this.saveCart();
+
+    return data.cartCreate.cart;
+  }
+
+  /**
+   * Add item to cart
+   */
+  async addToCart(variantId, quantity = 1) {
+    const lines = [{
+      merchandiseId: `gid://shopify/ProductVariant/${variantId}`,
+      quantity: quantity
+    }];
+
+    let cart;
+
+    if (this.cartId) {
+      // Add to existing cart
+      const query = `
+        mutation cartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
+          cartLinesAdd(cartId: $cartId, lines: $lines) {
+            cart {
+              id
+              checkoutUrl
+              lines(first: 10) {
+                edges {
+                  node {
+                    id
+                    quantity
+                    merchandise {
+                      ... on ProductVariant {
+                        id
+                        title
+                        price {
+                          amount
+                          currencyCode
+                        }
+                        product {
+                          title
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            userErrors {
+              field
+              message
+            }
+          }
+        }
+      `;
+
+      const data = await this.query(query, {
+        cartId: this.cartId,
+        lines
+      });
+
+      if (data.cartLinesAdd.userErrors.length > 0) {
+        throw new Error(data.cartLinesAdd.userErrors[0].message);
+      }
+
+      cart = data.cartLinesAdd.cart;
+    } else {
+      // Create new cart
+      cart = await this.createCart(lines);
+    }
+
+    this.cartItems = cart.lines.edges;
+    return cart;
+  }
+
+  /**
+   * Get checkout URL to redirect user
+   */
+  getCheckoutUrl(cart) {
+    return cart?.checkoutUrl || null;
+  }
+
+  /**
+   * Save cart ID to localStorage
+   */
+  saveCart() {
+    if (this.cartId) {
+      localStorage.setItem('shopify_cart_id', this.cartId);
+    }
+  }
+
+  /**
+   * Load cart ID from localStorage
+   */
+  loadCart() {
+    this.cartId = localStorage.getItem('shopify_cart_id');
+  }
+
+  /**
+   * Clear cart
+   */
+  clearCart() {
+    this.cartId = null;
+    this.cartItems = [];
+    localStorage.removeItem('shopify_cart_id');
+  }
+}
+
+// Export for use in other scripts
+window.ShopifyCart = ShopifyCart;