shopify.js

/* ============================================================
   THREAD & BONE — Shopify Storefront API Integration
   Updated to use the Cart API (Checkout API deprecated April 2025)
   
   SETUP:
   1. In Shopify Admin → Settings → Apps → Develop apps → Create app
   2. Configure Storefront API scopes:
      unauthenticated_read_products,
      unauthenticated_read_product_listings,
      unauthenticated_read_cart,
      unauthenticated_write_cart
   3. Install the app and copy your Storefront access token
   4. Update CONFIG below with your store domain and token
   ============================================================ */

const ShopifyStore = (function () {
  'use strict';

  // =====================================================
  //  CONFIGURATION — Replace these with your own values
  // =====================================================
  const CONFIG = {
    storeDomain: 'thread-and-bone-2.myshopify.com',          // Your Shopify store domain
    storefrontAccessToken: 'c687d0fd40ae96422df926404fb99181',
    apiVersion: '2026-01',
  };

  const ENDPOINT = `https://${CONFIG.storeDomain}/api/${CONFIG.apiVersion}/graphql.json`;

  // =====================================================
  //  GraphQL Queries & Mutations (Cart API)
  // =====================================================

  // Shared cart fragment to avoid repetition
  const CART_FRAGMENT = `
    fragment CartFields on Cart {
      id
      checkoutUrl
      totalQuantity
      cost {
        subtotalAmount {
          amount
          currencyCode
        }
      }
      lines(first: 50) {
        edges {
          node {
            id
            quantity
            merchandise {
              ... on ProductVariant {
                id
                title
                price {
                  amount
                  currencyCode
                }
                image {
                  url
                  altText
                }
                product {
                  title
                }
              }
            }
          }
        }
      }
    }
  `;

  const QUERIES = {
    // Fetch all products
    allProducts: `
      query AllProducts($first: Int!) {
        products(first: $first) {
          edges {
            node {
              id
              title
              handle
              description
              productType
              vendor
              tags
              priceRange {
                minVariantPrice {
                  amount
                  currencyCode
                }
              }
              images(first: 5) {
                edges {
                  node {
                    url
                    altText
                    width
                    height
                  }
                }
              }
              variants(first: 20) {
                edges {
                  node {
                    id
                    title
                    availableForSale
                    price {
                      amount
                      currencyCode
                    }
                    selectedOptions {
                      name
                      value
                    }
                    image {
                      url
                      altText
                    }
                  }
                }
              }
              availableForSale
              createdAt
            }
          }
        }
      }
    `,

    // Create a new cart
    cartCreate: `
      ${CART_FRAGMENT}
      mutation CartCreate($input: CartInput) {
        cartCreate(input: $input) {
          cart {
            ...CartFields
          }
          userErrors {
            field
            message
          }
        }
      }
    `,

    // Fetch an existing cart by ID (for persistence)
    cartFetch: `
      ${CART_FRAGMENT}
      query CartFetch($cartId: ID!) {
        cart(id: $cartId) {
          ...CartFields
        }
      }
    `,

    // Add lines to existing cart
    cartLinesAdd: `
      ${CART_FRAGMENT}
      mutation CartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
        cartLinesAdd(cartId: $cartId, lines: $lines) {
          cart {
            ...CartFields
          }
          userErrors {
            field
            message
          }
        }
      }
    `,

    // Remove lines from cart
    cartLinesRemove: `
      ${CART_FRAGMENT}
      mutation CartLinesRemove($cartId: ID!, $lineIds: [ID!]!) {
        cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
          cart {
            ...CartFields
          }
          userErrors {
            field
            message
          }
        }
      }
    `,

    // Update line quantities
    cartLinesUpdate: `
      ${CART_FRAGMENT}
      mutation CartLinesUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
        cartLinesUpdate(cartId: $cartId, lines: $lines) {
          cart {
            ...CartFields
          }
          userErrors {
            field
            message
          }
        }
      }
    `,
  };

  // =====================================================
  //  API Helper
  // =====================================================
  async function shopifyFetch(query, variables = {}) {
    try {
      const response = await fetch(ENDPOINT, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Shopify-Storefront-Access-Token': CONFIG.storefrontAccessToken,
        },
        body: JSON.stringify({ query, variables }),
      });

      if (!response.ok) {
        throw new Error(`Shopify API error: ${response.status} ${response.statusText}`);
      }

      const json = await response.json();

      if (json.errors) {
        console.error('Shopify GraphQL errors:', json.errors);
        throw new Error(json.errors[0].message);
      }

      return json.data;
    } catch (error) {
      console.error('Shopify fetch failed:', error);
      throw error;
    }
  }

  // =====================================================
  //  State
  // =====================================================
  let allProducts = [];
  let currentFilter = 'all';
  let cartId = null;
  let checkoutUrl = null;
  let cartLines = [];
  let selectedVariantId = null;

  // =====================================================
  //  Cart Persistence (localStorage)
  // =====================================================
  const CART_STORAGE_KEY = 'saltandtide_cart_id';

  function saveCartId(id) {
    try { localStorage.setItem(CART_STORAGE_KEY, id); } catch (e) { /* private browsing */ }
  }

  function loadCartId() {
    try { return localStorage.getItem(CART_STORAGE_KEY); } catch (e) { return null; }
  }

  function clearCartId() {
    try { localStorage.removeItem(CART_STORAGE_KEY); } catch (e) { /* private browsing */ }
  }

  async function restoreCart() {
    const savedId = loadCartId();
    if (!savedId || CONFIG.storefrontAccessToken === 'your-storefront-access-token') return;

    try {
      const data = await shopifyFetch(QUERIES.cartFetch, { cartId: savedId });
      if (data.cart && data.cart.lines.edges.length > 0) {
        updateCartUI(data.cart);
        console.log('Cart restored from previous session');
      } else {
        // Cart exists but is empty, or has expired — clear it
        clearCartId();
      }
    } catch (err) {
      // Cart likely expired on Shopify's end — clear the stale ID
      console.warn('Could not restore cart — it may have expired:', err.message);
      clearCartId();
    }
  }

  // =====================================================
  //  DOM References
  // =====================================================
  const productGrid = document.getElementById('productGrid');
  const shopLoading = document.getElementById('shopLoading');
  const shopEmpty = document.getElementById('shopEmpty');
  const cartDrawer = document.getElementById('cartDrawer');
  const cartOverlay = document.getElementById('cartOverlay');
  const cartCloseBtn = document.getElementById('cartClose');
  const cartItemsEl = document.getElementById('cartItems');
  const cartFooter = document.getElementById('cartFooter');
  const cartSubtotal = document.getElementById('cartSubtotal');
  const cartCountEls = document.querySelectorAll('.cart-count');
  const cartToggleBtn = document.getElementById('cartToggle');
  const checkoutBtn = document.getElementById('checkoutBtn');
  const quickViewModal = document.getElementById('quickViewModal');
  const quickViewOverlay = document.getElementById('quickViewOverlay');
  const quickViewCloseBtn = document.getElementById('quickViewClose');
  const addToCartBtn = document.getElementById('addToCartBtn');
  const filterBtns = document.querySelectorAll('.filter-btn');
  const sortSelect = document.getElementById('sortSelect');

  // =====================================================
  //  Helpers
  // =====================================================
  function formatPrice(amount, currency = 'USD') {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: currency,
    }).format(parseFloat(amount));
  }

  function getProductCategory(product) {
    const type = (product.productType || '').toLowerCase();
    const tags = (product.tags || []).map((t) => t.toLowerCase());
    if (type.includes('surfboard') || tags.includes('surfboards') || tags.includes('shortboard') || tags.includes('longboard') || tags.includes('funboard')) return 'surfboards';
    if (type.includes('wetsuit') || tags.includes('wetsuits') || tags.includes('rashguard')) return 'wetsuits';
    if (type.includes('boardshort') || tags.includes('boardshorts') || tags.includes('shorts')) return 'boardshorts';
    if (type.includes('accessor') || tags.includes('accessories') || tags.includes('bag') || tags.includes('wax') || tags.includes('leash')) return 'accessories';
    return 'all';
  }

  // =====================================================
  //  Product Rendering
  // =====================================================
  function renderProductCard(product) {
    const price = product.priceRange.minVariantPrice;
    const image = product.images.edges[0]?.node;
    const available = product.availableForSale;

    const card = document.createElement('div');
    card.className = 'product-card anim-reveal visible';
    card.dataset.category = getProductCategory(product);
    card.dataset.price = parseFloat(price.amount);
    card.dataset.date = product.createdAt || '';

    card.innerHTML = `
      <div class="product-img-wrap" role="button" tabindex="0" aria-label="Quick view ${product.title}">
        <div class="product-img" style="${image ? '' : 'background: linear-gradient(160deg, #2c2c2c, #1a1a1a);'}">
          ${!available ? '<div class="product-badge">Sold Out</div>' : ''}
          ${
            image
              ? `<img src="${image.url}" alt="${image.altText || product.title}" loading="lazy" style="width:100%;height:100%;object-fit:cover;">`
              : `<div class="product-placeholder-icon">
                  <svg viewBox="0 0 60 70" fill="none"><path d="M30 5 L18 25 L10 25 L8 65 L52 65 L50 25 L42 25 Z" stroke="rgba(255,255,255,0.25)" stroke-width="0.8" fill="none"/></svg>
                 </div>`
          }
        </div>
      </div>
      <div class="product-info">
        <h3>${product.title}</h3>
        <p class="product-price">${formatPrice(price.amount, price.currencyCode)}</p>
      </div>
    `;

    card.querySelector('.product-img-wrap').addEventListener('click', () => openQuickView(product));
    return card;
  }

  function renderProducts(products) {
    if (!productGrid) return;
    productGrid.innerHTML = '';

    if (!products.length) {
      if (shopEmpty) shopEmpty.style.display = 'block';
      return;
    }
    if (shopEmpty) shopEmpty.style.display = 'none';

    products.forEach((p) => {
      productGrid.appendChild(renderProductCard(p));
    });
  }

  function filterAndSort() {
    let filtered = allProducts;
    if (currentFilter !== 'all') {
      filtered = allProducts.filter((p) => getProductCategory(p) === currentFilter);
    }

    const sortVal = sortSelect ? sortSelect.value : 'featured';
    switch (sortVal) {
      case 'price-asc':
        filtered.sort((a, b) => parseFloat(a.priceRange.minVariantPrice.amount) - parseFloat(b.priceRange.minVariantPrice.amount));
        break;
      case 'price-desc':
        filtered.sort((a, b) => parseFloat(b.priceRange.minVariantPrice.amount) - parseFloat(a.priceRange.minVariantPrice.amount));
        break;
      case 'newest':
        filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
        break;
    }

    renderProducts(filtered);
  }

  // =====================================================
  //  Quick View
  // =====================================================
  function openQuickView(product) {
    if (!quickViewModal) return;

    const images = product.images.edges.map((e) => e.node);
    const variants = product.variants.edges.map((e) => e.node);
    const price = product.priceRange.minVariantPrice;

    document.getElementById('quickViewVendor').textContent = product.vendor || 'Thread & Bone';
    document.getElementById('quickViewTitle').textContent = product.title;
    document.getElementById('quickViewPrice').textContent = formatPrice(price.amount, price.currencyCode);
    document.getElementById('quickViewDesc').textContent = product.description || 'Premium surf gear crafted from carefully selected materials. Designed for performance and durability.';

    // Main image
    const imgEl = document.getElementById('quickViewImg');
    imgEl.innerHTML = images.length
      ? `<img src="${images[0].url}" alt="${images[0].altText || product.title}" style="width:100%;height:100%;object-fit:cover;">`
      : `<div style="width:100%;height:100%;background:linear-gradient(160deg,#2c2c2c,#1a1a1a);display:flex;align-items:center;justify-content:center;">
          <svg viewBox="0 0 60 70" fill="none" width="80"><path d="M30 5 L18 25 L10 25 L8 65 L52 65 L50 25 L42 25 Z" stroke="rgba(255,255,255,0.25)" stroke-width="0.8" fill="none"/></svg>
         </div>`;

    // Thumbnails
    const thumbsEl = document.getElementById('quickViewThumbs');
    thumbsEl.innerHTML = '';
    images.forEach((img, i) => {
      const thumb = document.createElement('img');
      thumb.src = img.url;
      thumb.alt = img.altText || '';
      if (i === 0) thumb.classList.add('active');
      thumb.addEventListener('click', () => {
        imgEl.innerHTML = `<img src="${img.url}" alt="${img.altText || ''}" style="width:100%;height:100%;object-fit:cover;">`;
        thumbsEl.querySelectorAll('img').forEach((t) => t.classList.remove('active'));
        thumb.classList.add('active');
      });
      thumbsEl.appendChild(thumb);
    });

    // Size options
    const sizesContainer = document.getElementById('sizeButtons');
    const sizeGroup = document.getElementById('quickViewSizes');
    sizesContainer.innerHTML = '';
    selectedVariantId = null;

    const sizeOptions = variants.filter((v) => v.selectedOptions.some((o) => o.name.toLowerCase() === 'size'));

    if (sizeOptions.length > 0) {
      sizeGroup.style.display = 'block';
      sizeOptions.forEach((variant, i) => {
        const sizeValue = variant.selectedOptions.find((o) => o.name.toLowerCase() === 'size')?.value || variant.title;
        const btn = document.createElement('button');
        btn.className = 'size-btn' + (i === 0 && variant.availableForSale ? ' selected' : '');
        btn.textContent = sizeValue;
        btn.disabled = !variant.availableForSale;
        if (!variant.availableForSale) btn.style.opacity = '0.3';

        if (i === 0 && variant.availableForSale) {
          selectedVariantId = variant.id;
        }

        btn.addEventListener('click', () => {
          sizesContainer.querySelectorAll('.size-btn').forEach((b) => b.classList.remove('selected'));
          btn.classList.add('selected');
          selectedVariantId = variant.id;
        });
        sizesContainer.appendChild(btn);
      });
    } else if (variants.length) {
      sizeGroup.style.display = 'none';
      selectedVariantId = variants[0].id;
    }

    if (addToCartBtn) {
      addToCartBtn.disabled = !product.availableForSale;
      addToCartBtn.textContent = product.availableForSale ? 'Add to Cart' : 'Sold Out';
    }

    quickViewModal.classList.add('open');
    document.body.style.overflow = 'hidden';
  }

  function closeQuickView() {
    if (quickViewModal) quickViewModal.classList.remove('open');
    document.body.style.overflow = '';
  }

  // =====================================================
  //  Cart (using new Cart API)
  // =====================================================
  function openCart() {
    if (cartDrawer) cartDrawer.classList.add('open');
    document.body.style.overflow = 'hidden';
  }

  function closeCart() {
    if (cartDrawer) cartDrawer.classList.remove('open');
    document.body.style.overflow = '';
  }

  function updateCartUI(cart) {
    if (!cart || !cartItemsEl) return;

    cartId = cart.id;
    checkoutUrl = cart.checkoutUrl;
    saveCartId(cartId);

    const lines = cart.lines.edges.map((e) => e.node);
    cartLines = lines;

    // Update count badges
    const totalQty = cart.totalQuantity || lines.reduce((sum, l) => sum + l.quantity, 0);
    cartCountEls.forEach((el) => (el.textContent = totalQty));

    if (!lines.length) {
      clearCartId();
      cartItemsEl.innerHTML = `
        <div class="cart-empty">
          <p>Your cart is empty</p>
          <span>Browse our collection to find something you love.</span>
        </div>`;
      if (cartFooter) cartFooter.style.display = 'none';
      return;
    }

    cartItemsEl.innerHTML = lines
      .map((line) => {
        const variant = line.merchandise;
        const productTitle = variant.product?.title || '';
        const variantTitle = variant.title !== 'Default Title' ? variant.title : '';
        return `
        <div class="cart-line-item">
          <div class="cart-line-img">
            ${variant.image ? `<img src="${variant.image.url}" alt="${variant.image.altText || productTitle}">` : ''}
          </div>
          <div class="cart-line-details">
            <h4>${productTitle}</h4>
            <p class="cart-line-variant">${variantTitle}${variantTitle ? ' · ' : ''}Qty: ${line.quantity}</p>
            <p class="cart-line-price">${formatPrice(variant.price.amount, variant.price.currencyCode)}</p>
            <button class="cart-line-remove" data-line-id="${line.id}">Remove</button>
          </div>
        </div>`;
      })
      .join('');

    // Subtotal
    if (cartSubtotal && cart.cost?.subtotalAmount) {
      cartSubtotal.textContent = formatPrice(cart.cost.subtotalAmount.amount, cart.cost.subtotalAmount.currencyCode);
    }
    if (cartFooter) cartFooter.style.display = 'block';

    // Remove button listeners
    cartItemsEl.querySelectorAll('.cart-line-remove').forEach((btn) => {
      btn.addEventListener('click', async () => {
        await removeFromCart(btn.dataset.lineId);
      });
    });
  }

  async function addToCart(variantId, quantity = 1) {
    try {
      if (!cartId) {
        // Create a new cart with the item
        const data = await shopifyFetch(QUERIES.cartCreate, {
          input: {
            lines: [{ merchandiseId: variantId, quantity }],
          },
        });

        if (data.cartCreate.userErrors.length) {
          throw new Error(data.cartCreate.userErrors[0].message);
        }

        updateCartUI(data.cartCreate.cart);
      } else {
        // Add to existing cart
        const data = await shopifyFetch(QUERIES.cartLinesAdd, {
          cartId,
          lines: [{ merchandiseId: variantId, quantity }],
        });

        if (data.cartLinesAdd.userErrors.length) {
          throw new Error(data.cartLinesAdd.userErrors[0].message);
        }

        updateCartUI(data.cartLinesAdd.cart);
      }
      openCart();
    } catch (err) {
      console.error('Add to cart failed:', err);
      alert('Could not add to cart. Please check your Shopify configuration.\n\n' + err.message);
    }
  }

  async function removeFromCart(lineId) {
    if (!cartId) return;
    try {
      const data = await shopifyFetch(QUERIES.cartLinesRemove, {
        cartId,
        lineIds: [lineId],
      });

      if (data.cartLinesRemove.userErrors.length) {
        throw new Error(data.cartLinesRemove.userErrors[0].message);
      }

      updateCartUI(data.cartLinesRemove.cart);
    } catch (err) {
      console.error('Remove from cart failed:', err);
    }
  }

  // =====================================================
  //  Demo / Fallback Products
  // =====================================================
  const DEMO_PRODUCTS = [
    { id: '1', title: "Phantom 6'2 Shortboard", handle: 'phantom-62-shortboard', description: "High-performance shortboard with a pulled-in tail and single-to-double concave. Built for fast, hollow waves. EPS/epoxy construction for lightweight speed.", productType: 'Surfboards', vendor: 'Salt & Tide', tags: ['surfboards','shortboard'], priceRange: { minVariantPrice: { amount: '685.00', currencyCode: 'USD' } }, images: { edges: [] }, variants: { edges: [
      { node: { id: 'v1-a', title: "5'10", availableForSale: true, price: { amount: '685.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: "5'10" }], image: null } },
      { node: { id: 'v1-b', title: "6'0", availableForSale: true, price: { amount: '685.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: "6'0" }], image: null } },
      { node: { id: 'v1-c', title: "6'2", availableForSale: true, price: { amount: '685.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: "6'2" }], image: null } },
      { node: { id: 'v1-d', title: "6'4", availableForSale: true, price: { amount: '685.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: "6'4" }], image: null } },
    ] }, availableForSale: true, createdAt: '2026-03-01' },
    { id: '2', title: 'Stealth 3/2mm Wetsuit', handle: 'stealth-32mm-wetsuit', description: 'Full-body 3/2mm wetsuit in matte black Yamamoto neoprene. Chest zip entry, sealed seams, and four-way stretch panels for unrestricted paddling.', productType: 'Wetsuits', vendor: 'Salt & Tide', tags: ['wetsuits'], priceRange: { minVariantPrice: { amount: '345.00', currencyCode: 'USD' } }, images: { edges: [] }, variants: { edges: [
      { node: { id: 'v2-s', title: 'S', availableForSale: true, price: { amount: '345.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: 'S' }], image: null } },
      { node: { id: 'v2-m', title: 'M', availableForSale: true, price: { amount: '345.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: 'M' }], image: null } },
      { node: { id: 'v2-l', title: 'L', availableForSale: true, price: { amount: '345.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: 'L' }], image: null } },
      { node: { id: 'v2-xl', title: 'XL', availableForSale: true, price: { amount: '345.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: 'XL' }], image: null } },
    ] }, availableForSale: true, createdAt: '2026-03-05' },
    { id: '3', title: 'Reef Runner Boardshorts', handle: 'reef-runner-boardshorts', description: '4-way stretch boardshorts with a 19" outseam. Quick-dry fabric, no-rash flatlock seams, and a secure drawcord waist. Built to perform in and out of the water.', productType: 'Boardshorts', vendor: 'Salt & Tide', tags: ['boardshorts'], priceRange: { minVariantPrice: { amount: '78.00', currencyCode: 'USD' } }, images: { edges: [] }, variants: { edges: [
      { node: { id: 'v3-30', title: '30', availableForSale: false, price: { amount: '78.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: '30' }], image: null } },
      { node: { id: 'v3-32', title: '32', availableForSale: true, price: { amount: '78.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: '32' }], image: null } },
      { node: { id: 'v3-34', title: '34', availableForSale: true, price: { amount: '78.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: '34' }], image: null } },
      { node: { id: 'v3-36', title: '36', availableForSale: true, price: { amount: '78.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: '36' }], image: null } },
    ] }, availableForSale: true, createdAt: '2026-02-20' },
    { id: '4', title: "Drifter 9'0 Longboard", handle: 'drifter-90-longboard', description: "Classic noserider longboard with a wide nose, rolled bottom, and single fin setup. PU/polyester for that traditional flex and glide. Smooth, effortless cruising.", productType: 'Surfboards', vendor: 'Salt & Tide', tags: ['surfboards','longboard'], priceRange: { minVariantPrice: { amount: '895.00', currencyCode: 'USD' } }, images: { edges: [] }, variants: { edges: [
      { node: { id: 'v4-a', title: "8'6", availableForSale: true, price: { amount: '895.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: "8'6" }], image: null } },
      { node: { id: 'v4-b', title: "9'0", availableForSale: true, price: { amount: '895.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: "9'0" }], image: null } },
      { node: { id: 'v4-c', title: "9'6", availableForSale: true, price: { amount: '895.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: "9'6" }], image: null } },
    ] }, availableForSale: true, createdAt: '2026-03-10' },
    { id: '5', title: 'Dawn Patrol Rashguard', handle: 'dawn-patrol-rashguard', description: 'UPF 50+ long-sleeve rashguard in charcoal. Flatlock stitching, snug athletic fit, and quick-dry poly-spandex blend. Your skin will thank you.', productType: 'Wetsuits', vendor: 'Salt & Tide', tags: ['wetsuits','rashguard'], priceRange: { minVariantPrice: { amount: '58.00', currencyCode: 'USD' } }, images: { edges: [] }, variants: { edges: [
      { node: { id: 'v5-s', title: 'S', availableForSale: true, price: { amount: '58.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: 'S' }], image: null } },
      { node: { id: 'v5-m', title: 'M', availableForSale: true, price: { amount: '58.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: 'M' }], image: null } },
      { node: { id: 'v5-l', title: 'L', availableForSale: true, price: { amount: '58.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: 'L' }], image: null } },
      { node: { id: 'v5-xl', title: 'XL', availableForSale: true, price: { amount: '58.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: 'XL' }], image: null } },
    ] }, availableForSale: true, createdAt: '2026-03-12' },
    { id: '6', title: 'Riptide Hybrid Shorts', handle: 'riptide-hybrid-shorts', description: "Hybrid walk-to-water shorts with a 17\" outseam. Stretch twill fabric works on the beach or around town. Zip pocket keeps your keys safe in the lineup.", productType: 'Boardshorts', vendor: 'Salt & Tide', tags: ['boardshorts'], priceRange: { minVariantPrice: { amount: '68.00', currencyCode: 'USD' } }, images: { edges: [] }, variants: { edges: [
      { node: { id: 'v6-30', title: '30', availableForSale: true, price: { amount: '68.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: '30' }], image: null } },
      { node: { id: 'v6-32', title: '32', availableForSale: true, price: { amount: '68.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: '32' }], image: null } },
      { node: { id: 'v6-34', title: '34', availableForSale: true, price: { amount: '68.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: '34' }], image: null } },
    ] }, availableForSale: true, createdAt: '2026-02-28' },
    { id: '7', title: 'Board Bag — Shortboard', handle: 'board-bag-shortboard', description: "Day-use board bag with 5mm padding, reflective heat shield, and heavy-duty YKK zipper. Fits boards up to 6'6. Shoulder strap included.", productType: 'Accessories', vendor: 'Salt & Tide', tags: ['accessories','bag'], priceRange: { minVariantPrice: { amount: '95.00', currencyCode: 'USD' } }, images: { edges: [] }, variants: { edges: [
      { node: { id: 'v7-os', title: "Up to 6'6", availableForSale: true, price: { amount: '95.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: "Up to 6'6" }], image: null } },
    ] }, availableForSale: true, createdAt: '2026-03-08' },
    { id: '8', title: "Cruiser 7'2 Funboard", handle: 'cruiser-72-funboard', description: "The do-everything mid-length. Wide enough for small days, refined enough for overhead surf. Thruster or quad fin setup. Perfect for progressing surfers.", productType: 'Surfboards', vendor: 'Salt & Tide', tags: ['surfboards','funboard'], priceRange: { minVariantPrice: { amount: '745.00', currencyCode: 'USD' } }, images: { edges: [] }, variants: { edges: [
      { node: { id: 'v8-a', title: "6'8", availableForSale: true, price: { amount: '745.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: "6'8" }], image: null } },
      { node: { id: 'v8-b', title: "7'2", availableForSale: true, price: { amount: '745.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: "7'2" }], image: null } },
      { node: { id: 'v8-c', title: "7'6", availableForSale: true, price: { amount: '745.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: "7'6" }], image: null } },
    ] }, availableForSale: true, createdAt: '2026-03-03' },
    { id: '9', title: 'Surf Wax Combo Pack', handle: 'surf-wax-combo-pack', description: 'Three-bar wax pack — cold, cool, and tropical temps covered. Organic coconut-based formula with great grip and a clean scent.', productType: 'Accessories', vendor: 'Salt & Tide', tags: ['accessories','wax'], priceRange: { minVariantPrice: { amount: '14.00', currencyCode: 'USD' } }, images: { edges: [] }, variants: { edges: [
      { node: { id: 'v9-os', title: 'Combo Pack', availableForSale: true, price: { amount: '14.00', currencyCode: 'USD' }, selectedOptions: [{ name: 'Size', value: 'Combo Pack' }], image: null } },
    ] }, availableForSale: true, createdAt: '2026-03-14' },
  ];

  // =====================================================
  //  Initialization
  // =====================================================
  async function init() {
    if (!productGrid) return;

    try {
      const data = await shopifyFetch(QUERIES.allProducts, { first: 50 });
      allProducts = data.products.edges.map((e) => e.node);
      console.log(`Loaded ${allProducts.length} products from Shopify`);
    } catch (err) {
      console.warn('Shopify not configured or unreachable — using demo products. Update CONFIG in shopify.js to connect.');
      allProducts = DEMO_PRODUCTS;
    }

    if (shopLoading) shopLoading.style.display = 'none';
    filterAndSort();

    // Restore cart from previous session if one exists
    await restoreCart();
  }

  // =====================================================
  //  Event Listeners
  // =====================================================
  filterBtns.forEach((btn) => {
    btn.addEventListener('click', () => {
      filterBtns.forEach((b) => b.classList.remove('active'));
      btn.classList.add('active');
      currentFilter = btn.dataset.filter;
      filterAndSort();
    });
  });

  if (sortSelect) sortSelect.addEventListener('change', filterAndSort);

  if (cartToggleBtn) cartToggleBtn.addEventListener('click', openCart);
  if (cartOverlay) cartOverlay.addEventListener('click', closeCart);
  if (cartCloseBtn) cartCloseBtn.addEventListener('click', closeCart);

  if (checkoutBtn) {
    checkoutBtn.addEventListener('click', () => {
      if (checkoutUrl) {
        clearCartId();
        window.open(checkoutUrl, '_blank');
        window.location.reload();
      } else {
        alert('Checkout not available. Please connect your Shopify store.');
      }
    });
  }

  if (quickViewOverlay) quickViewOverlay.addEventListener('click', closeQuickView);
  if (quickViewCloseBtn) quickViewCloseBtn.addEventListener('click', closeQuickView);

  if (addToCartBtn) {
    addToCartBtn.addEventListener('click', async () => {
      if (!selectedVariantId) {
        alert('Please select a size.');
        return;
      }
      addToCartBtn.textContent = 'Adding...';
      addToCartBtn.disabled = true;

      // Demo mode check
      if (CONFIG.storefrontAccessToken === 'your-storefront-access-token') {
        setTimeout(() => {
          closeQuickView();
          addToCartBtn.textContent = 'Add to Cart';
          addToCartBtn.disabled = false;
          alert('Demo mode: Connect your Shopify store in shopify.js to enable real cart functionality.');
        }, 600);
        return;
      }

      await addToCart(selectedVariantId);
      closeQuickView();
      addToCartBtn.textContent = 'Add to Cart';
      addToCartBtn.disabled = false;
    });
  }

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closeQuickView();
      closeCart();
    }
  });

  // Boot
  init();

  return { addToCart, openCart, closeCart };
})();