Shopify Headless avec Next.js vs Liquid : quel choix pour votre e-commerce ?

<!-- sections/collection-products.liquid -->
<div class="collection-grid">
  {% for product in collection.products %}
    <div class="product-card">
      <a href="{{ product.url }}">
        <img
          src="{{ product.featured_image | img_url: '400x' }}"
          alt="{{ product.title }}"
          loading="lazy"
        >
        <h3>{{ product.title }}</h3>
        <p class="price">{{ product.price | money }}</p>

        {% if product.compare_at_price > product.price %}
          <span class="sale-badge">-{{ product.price | divided_by: product.compare_at_price | minus: 1 | times: 100 }}%</span>
        {% endif %}

        <button class="add-to-cart" data-product-id="{{ product.id }}">
          Ajouter au panier
        </button>
      </a>
    </div>
  {% endfor %}
</div>

<script>
  // Ajout au panier via Ajax API Shopify
  document.querySelectorAll('.add-to-cart').forEach(btn => {
    btn.addEventListener('click', async (e) => {
      const productId = e.target.dataset.productId;
      const response = await fetch('/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: productId, quantity: 1 })
      });
      // Mettre à jour le panier
    });
  });
</script>

// app/collection/[handle]/page.tsx
import { getCollection } from '@/lib/shopify';
import ProductCard from '@/components/ProductCard';

export default async function CollectionPage({
  params
}: {
  params: { handle: string }
}) {
  const collection = await getCollection(params.handle);

  return (
    <div className="collection-grid">
      {collection.products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// components/ProductCard.tsx
'use client';
import { motion } from 'framer-motion';
import { useCart } from '@/hooks/useCart';
import Image from 'next/image';

export default function ProductCard({ product }) {
  const { addToCart } = useCart();

  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      className="product-card"
    >
      <Link href={`/products/${product.handle}`}>
        <Image
          src={product.featuredImage.url}
          alt={product.title}
          width={400}
          height={400}
          priority={false}
        />
        <h3>{product.title}</h3>
        <p className="price">
          {new Intl.NumberFormat('fr-FR', {
            style: 'currency',
            currency: 'EUR'
          }).format(product.priceRange.minVariantPrice.amount)}
        </p>

        {product.compareAtPriceRange && (
          <span className="sale-badge">
            -{calculateDiscount(product)}%
          </span>
        )}
      </Link>

      <button onClick={() => addToCart(product.variants[0].id)}>
        Ajouter au panier
      </button>
    </motion.div>
  );
}

// lib/shopify.ts - Configuration API
const SHOPIFY_STOREFRONT_API = process.env.SHOPIFY_STOREFRONT_API_URL;
const SHOPIFY_STOREFRONT_TOKEN = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN;

export async function getCollection(handle: string) {
  const query = `
    query getCollection($handle: String!) {
      collection(handle: $handle) {
        title
        products(first: 20) {
          edges {
            node {
              id
              title
              handle
              featuredImage {
                url
              }
              priceRange {
                minVariantPrice {
                  amount
                  currencyCode
                }
              }
              variants(first: 1) {
                edges {
                  node {
                    id
                  }
                }
              }
            }
          }
        }
      }
    }
  `;

  const response = await fetch(SHOPIFY_STOREFRONT_API, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': SHOPIFY_STOREFRONT_TOKEN,
    },
    body: JSON.stringify({ query, variables: { handle } }),
  });

  const { data } = await response.json();
  return data.collection;
}