create-brainerce-store 1.14.2 → 1.14.3

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.14.2",
+      version: "1.14.3",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/messages/en.json

@@ -62,7 +62,8 @@
     "sortNameAZ": "Name A-Z",
     "sortNameZA": "Name Z-A",
     "sortPriceLow": "Price: Low to High",
-    "sortPriceHigh": "Price: High to Low"
+    "sortPriceHigh": "Price: High to Low",
+    "selectOptions": "Select Options"
   },
   "productDetail": {
     "notFound": "Product not found.",

package/messages/he.json

@@ -62,7 +62,8 @@
     "sortNameAZ": "שם א-ת",
     "sortNameZA": "שם ת-א",
     "sortPriceLow": "מחיר: מהנמוך לגבוה",
-    "sortPriceHigh": "מחיר: מהגבוה לנמוך"
+    "sortPriceHigh": "מחיר: מהגבוה לנמוך",
+    "selectOptions": "בחר אפשרויות"
   },
   "productDetail": {
     "notFound": "המוצר לא נמצא.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.14.2",
+  "version": "1.14.3",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/scripts/fetch-store-info.mjs

@@ -1,74 +1,81 @@
-/**
- * Setup script: fetches store info from Brainerce using the connection ID
- * and saves NEXT_PUBLIC_STORE_NAME (and other public fields) to .env.local.
- *
- * Run: node scripts/fetch-store-info.mjs
- */
-
-import { readFileSync, writeFileSync, existsSync } from 'fs';
-import { join } from 'path';
-
-const envPath = join(process.cwd(), '.env.local');
-
-if (!existsSync(envPath)) {
-  console.error('❌  .env.local not found. Create it first with NEXT_PUBLIC_BRAINERCE_CONNECTION_ID set.');
-  process.exit(1);
-}
-
-const envContent = readFileSync(envPath, 'utf-8');
-
-function getVar(content, key) {
-  const match = content.match(new RegExp(`^${key}=(.*)$`, 'm'));
-  return match ? match[1].trim() : null;
-}
-
-function setVar(content, key, value) {
-  const regex = new RegExp(`^${key}=.*$`, 'm');
-  if (regex.test(content)) {
-    return content.replace(regex, `${key}=${value}`);
-  }
-  return content.trimEnd() + `\n${key}=${value}\n`;
-}
-
-const connectionId = getVar(envContent, 'NEXT_PUBLIC_BRAINERCE_CONNECTION_ID');
-const apiUrl = (getVar(envContent, 'BRAINERCE_API_URL') || 'https://api.brainerce.com').replace(/\/$/, '');
-
-if (!connectionId) {
-  console.error('❌  NEXT_PUBLIC_BRAINERCE_CONNECTION_ID is not set in .env.local');
-  process.exit(1);
-}
-
-console.log(`Fetching store info for connection: ${connectionId} ...`);
-
-let storeInfo;
-try {
-  const res = await fetch(`${apiUrl}/api/vc/${connectionId}/info`);
-  if (!res.ok) {
-    console.error(`❌  API returned ${res.status}: ${await res.text()}`);
-    process.exit(1);
-  }
-  storeInfo = await res.json();
-} catch (err) {
-  console.error(`❌  Failed to reach ${apiUrl}: ${err.message}`);
-  process.exit(1);
-}
-
-const name = storeInfo.name;
-const currency = storeInfo.currency;
-
-if (!name) {
-  console.error('❌  Store info response has no `name` field:', storeInfo);
-  process.exit(1);
-}
-
-let updated = envContent;
-updated = setVar(updated, 'NEXT_PUBLIC_STORE_NAME', name);
-if (currency) {
-  updated = setVar(updated, 'NEXT_PUBLIC_STORE_CURRENCY', currency);
-}
-
-writeFileSync(envPath, updated, 'utf-8');
-
-console.log(`✓ NEXT_PUBLIC_STORE_NAME=${name}`);
-if (currency) console.log(`✓ NEXT_PUBLIC_STORE_CURRENCY=${currency}`);
-console.log('Done. Restart the dev server for changes to take effect.');
+/* global process, console, fetch */
+/* eslint-disable no-console */
+/**
+ * Setup script: fetches store info from Brainerce using the connection ID
+ * and saves NEXT_PUBLIC_STORE_NAME (and other public fields) to .env.local.
+ *
+ * Run: node scripts/fetch-store-info.mjs
+ */
+
+import { readFileSync, writeFileSync, existsSync } from 'fs';
+import { join } from 'path';
+
+const envPath = join(process.cwd(), '.env.local');
+
+if (!existsSync(envPath)) {
+  console.error(
+    '❌  .env.local not found. Create it first with NEXT_PUBLIC_BRAINERCE_CONNECTION_ID set.'
+  );
+  process.exit(1);
+}
+
+const envContent = readFileSync(envPath, 'utf-8');
+
+function getVar(content, key) {
+  const match = content.match(new RegExp(`^${key}=(.*)$`, 'm'));
+  return match ? match[1].trim() : null;
+}
+
+function setVar(content, key, value) {
+  const regex = new RegExp(`^${key}=.*$`, 'm');
+  if (regex.test(content)) {
+    return content.replace(regex, `${key}=${value}`);
+  }
+  return content.trimEnd() + `\n${key}=${value}\n`;
+}
+
+const connectionId = getVar(envContent, 'NEXT_PUBLIC_BRAINERCE_CONNECTION_ID');
+const apiUrl = (getVar(envContent, 'BRAINERCE_API_URL') || 'https://api.brainerce.com').replace(
+  /\/$/,
+  ''
+);
+
+if (!connectionId) {
+  console.error('❌  NEXT_PUBLIC_BRAINERCE_CONNECTION_ID is not set in .env.local');
+  process.exit(1);
+}
+
+console.log(`Fetching store info for connection: ${connectionId} ...`);
+
+let storeInfo;
+try {
+  const res = await fetch(`${apiUrl}/api/vc/${connectionId}/info`);
+  if (!res.ok) {
+    console.error(`❌  API returned ${res.status}: ${await res.text()}`);
+    process.exit(1);
+  }
+  storeInfo = await res.json();
+} catch (err) {
+  console.error(`❌  Failed to reach ${apiUrl}: ${err.message}`);
+  process.exit(1);
+}
+
+const name = storeInfo.name;
+const currency = storeInfo.currency;
+
+if (!name) {
+  console.error('❌  Store info response has no `name` field:', storeInfo);
+  process.exit(1);
+}
+
+let updated = envContent;
+updated = setVar(updated, 'NEXT_PUBLIC_STORE_NAME', name);
+if (currency) {
+  updated = setVar(updated, 'NEXT_PUBLIC_STORE_CURRENCY', currency);
+}
+
+writeFileSync(envPath, updated, 'utf-8');
+
+console.log(`✓ NEXT_PUBLIC_STORE_NAME=${name}`);
+if (currency) console.log(`✓ NEXT_PUBLIC_STORE_CURRENCY=${currency}`);
+console.log('Done. Restart the dev server for changes to take effect.');

package/templates/nextjs/base/src/app/checkout/page.tsx

@@ -564,11 +564,12 @@ function CheckoutContent() {
             )}
 
             {/* Coupon input — show from shipping/pickup step onwards (or immediately if digital) */}
-            {cart && (isAllDigital || step === 'shipping' || step === 'pickup' || step === 'payment') && (
-              <div className="border-border border-t pt-4">
-                <CouponInput cart={cart} onUpdate={handleCouponUpdate} />
-              </div>
-            )}
+            {cart &&
+              (isAllDigital || step === 'shipping' || step === 'pickup' || step === 'payment') && (
+                <div className="border-border border-t pt-4">
+                  <CouponInput cart={cart} onUpdate={handleCouponUpdate} />
+                </div>
+              )}
 
             {/* Totals */}
             {checkout && (

package/templates/nextjs/base/src/app/products/[slug]/product-client-section.tsx

@@ -7,13 +7,8 @@ import type {
   ProductVariant,
   ProductImage,
   ProductMetafield,
-  ProductRecommendationsResponse,
   DownloadFile,
 } from 'brainerce';
-
-type ProductWithRecommendations = Product & {
-  recommendations?: ProductRecommendationsResponse;
-};
 import { getProductPriceInfo, getDescriptionContent } from 'brainerce';
 import { useCart } from '@/providers/store-provider';
 import { PriceDisplay } from '@/components/shared/price-display';
@@ -116,7 +111,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
   const { refreshCart } = useCart();
   const t = useTranslations('productDetail');
 
-  const product = initialProduct as ProductWithRecommendations;
+  const product = initialProduct;
   const recommendations = product?.recommendations ?? null;
 
   const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(

package/templates/nextjs/base/src/components/account/order-history.tsx

@@ -77,7 +77,8 @@ function OrderCard({ order }: { order: Order }) {
   const t = useTranslations('account');
   const tc = useTranslations('common');
   const [expanded, setExpanded] = useState(false);
-  const statusConfig = STATUS_CONFIG[order.status?.toLowerCase() as OrderStatus] || STATUS_CONFIG.pending;
+  const statusConfig =
+    STATUS_CONFIG[order.status?.toLowerCase() as OrderStatus] || STATUS_CONFIG.pending;
   const currency = order.currency || 'USD';
   const totalAmount = order.totalAmount || order.total || '0';
 

package/templates/nextjs/base/src/components/cart/cart-item.tsx

@@ -1,153 +1,153 @@
-'use client';
-
-import { useState } from 'react';
-import Image from 'next/image';
-import type { CartItem as CartItemType } from 'brainerce';
-import { getCartItemName, getCartItemImage, formatPrice } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useTranslations } from '@/lib/translations';
-import { useStoreInfo } from '@/providers/store-provider';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { cn } from '@/lib/utils';
-
-interface CartItemProps {
-  item: CartItemType;
-  onUpdate: () => void;
-  className?: string;
-}
-
-export function CartItem({ item, onUpdate, className }: CartItemProps) {
-  const t = useTranslations('common');
-  const td = useTranslations('productDetail');
-  const { storeInfo } = useStoreInfo();
-  const currency = storeInfo?.currency || 'USD';
-  const [updating, setUpdating] = useState(false);
-  const [removing, setRemoving] = useState(false);
-
-  const name = getCartItemName(item);
-  const imageUrl = getCartItemImage(item);
-  const variantName = item.variant?.name;
-  const unitPrice = parseFloat(item.unitPrice);
-  const lineTotal = unitPrice * item.quantity;
-
-  async function handleQuantityChange(newQuantity: number) {
-    if (newQuantity < 1 || updating) return;
-
-    try {
-      setUpdating(true);
-      const client = getClient();
-      await client.smartUpdateCartItem(item.productId, newQuantity, item.variantId || undefined);
-      onUpdate();
-    } catch (err) {
-      console.error('Failed to update quantity:', err);
-    } finally {
-      setUpdating(false);
-    }
-  }
-
-  async function handleRemove() {
-    if (removing) return;
-
-    try {
-      setRemoving(true);
-      const client = getClient();
-      await client.smartRemoveFromCart(item.productId, item.variantId || undefined);
-      onUpdate();
-    } catch (err) {
-      console.error('Failed to remove item:', err);
-    } finally {
-      setRemoving(false);
-    }
-  }
-
-  return (
-    <div
-      className={cn(
-        'border-border flex gap-4 border-b py-4 last:border-0',
-        (updating || removing) && 'opacity-60',
-        className
-      )}
-    >
-      {/* Image */}
-      <div className="bg-muted relative h-20 w-20 flex-shrink-0 overflow-hidden rounded">
-        {imageUrl ? (
-          <Image src={imageUrl} alt={name} fill sizes="80px" className="object-cover" />
-        ) : (
-          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-            <svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
-          </div>
-        )}
-      </div>
-
-      {/* Details */}
-      <div className="min-w-0 flex-1">
-        <h3 className="text-foreground truncate text-sm font-medium">{name}</h3>
-
-        {/* Variant name */}
-        {variantName && <p className="text-muted-foreground mt-1 text-xs">{variantName}</p>}
-
-        {/* Unit price */}
-        <p className="text-muted-foreground mt-1 text-sm">
-          {formatPrice(unitPrice, { currency }) as string}
-        </p>
-
-        {/* Quantity controls */}
-        <div className="mt-2 flex items-center gap-3">
-          <div className="border-border flex items-center rounded border">
-            <button
-              type="button"
-              onClick={() => handleQuantityChange(item.quantity - 1)}
-              disabled={updating || item.quantity <= 1}
-              className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
-              aria-label={td('decreaseQuantity')}
-            >
-              -
-            </button>
-            <span className="text-foreground min-w-[2.5rem] px-3 py-1 text-center text-sm font-medium">
-              {updating ? (
-                <LoadingSpinner
-                  size="sm"
-                  className="border-muted-foreground/30 border-t-foreground mx-auto"
-                />
-              ) : (
-                item.quantity
-              )}
-            </span>
-            <button
-              type="button"
-              onClick={() => handleQuantityChange(item.quantity + 1)}
-              disabled={updating}
-              className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
-              aria-label={td('increaseQuantity')}
-            >
-              +
-            </button>
-          </div>
-
-          <button
-            type="button"
-            onClick={handleRemove}
-            disabled={removing}
-            className="text-destructive hover:text-destructive/80 text-xs transition-colors disabled:opacity-40"
-          >
-            {removing ? t('removing') : t('remove')}
-          </button>
-        </div>
-      </div>
-
-      {/* Line total */}
-      <div className="flex-shrink-0 text-end">
-        <span className="text-foreground text-sm font-medium">
-          {formatPrice(lineTotal, { currency }) as string}
-        </span>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import type { CartItem as CartItemType } from 'brainerce';
+import { getCartItemImage, formatPrice } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useTranslations } from '@/lib/translations';
+import { useStoreInfo } from '@/providers/store-provider';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { cn } from '@/lib/utils';
+
+interface CartItemProps {
+  item: CartItemType;
+  onUpdate: () => void;
+  className?: string;
+}
+
+export function CartItem({ item, onUpdate, className }: CartItemProps) {
+  const t = useTranslations('common');
+  const td = useTranslations('productDetail');
+  const { storeInfo } = useStoreInfo();
+  const currency = storeInfo?.currency || 'USD';
+  const [updating, setUpdating] = useState(false);
+  const [removing, setRemoving] = useState(false);
+
+  const productName = item.product.name;
+  const imageUrl = getCartItemImage(item);
+  const variantName = item.variant?.name;
+  const unitPrice = parseFloat(item.unitPrice);
+  const lineTotal = unitPrice * item.quantity;
+
+  async function handleQuantityChange(newQuantity: number) {
+    if (newQuantity < 1 || updating) return;
+
+    try {
+      setUpdating(true);
+      const client = getClient();
+      await client.smartUpdateCartItem(item.productId, newQuantity, item.variantId || undefined);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to update quantity:', err);
+    } finally {
+      setUpdating(false);
+    }
+  }
+
+  async function handleRemove() {
+    if (removing) return;
+
+    try {
+      setRemoving(true);
+      const client = getClient();
+      await client.smartRemoveFromCart(item.productId, item.variantId || undefined);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to remove item:', err);
+    } finally {
+      setRemoving(false);
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'border-border flex gap-4 border-b py-4 last:border-0',
+        (updating || removing) && 'opacity-60',
+        className
+      )}
+    >
+      {/* Image */}
+      <div className="bg-muted relative h-20 w-20 flex-shrink-0 overflow-hidden rounded">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={productName} fill sizes="80px" className="object-cover" />
+        ) : (
+          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+            <svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+        )}
+      </div>
+
+      {/* Details */}
+      <div className="min-w-0 flex-1">
+        <h3 className="text-foreground truncate text-sm font-medium">{productName}</h3>
+
+        {/* Variant name */}
+        {variantName && <p className="text-muted-foreground mt-1 text-xs">{variantName}</p>}
+
+        {/* Unit price */}
+        <p className="text-muted-foreground mt-1 text-sm">
+          {formatPrice(unitPrice, { currency }) as string}
+        </p>
+
+        {/* Quantity controls */}
+        <div className="mt-2 flex items-center gap-3">
+          <div className="border-border flex items-center rounded border">
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity - 1)}
+              disabled={updating || item.quantity <= 1}
+              className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+              aria-label={td('decreaseQuantity')}
+            >
+              -
+            </button>
+            <span className="text-foreground min-w-[2.5rem] px-3 py-1 text-center text-sm font-medium">
+              {updating ? (
+                <LoadingSpinner
+                  size="sm"
+                  className="border-muted-foreground/30 border-t-foreground mx-auto"
+                />
+              ) : (
+                item.quantity
+              )}
+            </span>
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity + 1)}
+              disabled={updating}
+              className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+              aria-label={td('increaseQuantity')}
+            >
+              +
+            </button>
+          </div>
+
+          <button
+            type="button"
+            onClick={handleRemove}
+            disabled={removing}
+            className="text-destructive hover:text-destructive/80 text-xs transition-colors disabled:opacity-40"
+          >
+            {removing ? t('removing') : t('remove')}
+          </button>
+        </div>
+      </div>
+
+      {/* Line total */}
+      <div className="flex-shrink-0 text-end">
+        <span className="text-foreground text-sm font-medium">
+          {formatPrice(lineTotal, { currency }) as string}
+        </span>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/products/product-card.tsx

@@ -1,13 +1,16 @@
 'use client';
 
+import { useState } from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import type { Product } from 'brainerce';
-import { getProductPriceInfo } from 'brainerce';
+import { getProductPriceInfo, getVariantPrice, formatPrice } from 'brainerce';
 import { useTranslations } from '@/lib/translations';
 import { PriceDisplay } from '@/components/shared/price-display';
 import { StockBadge } from '@/components/products/stock-badge';
 import { DiscountBadge } from '@/components/products/discount-badge';
+import { useCart, useStoreInfo } from '@/providers/store-provider';
 import { cn } from '@/lib/utils';
 
 interface ProductCardProps {
@@ -15,60 +18,145 @@ interface ProductCardProps {
   className?: string;
 }
 
+function VariantPriceRange({ product }: { product: Product }) {
+  const { storeInfo } = useStoreInfo();
+  const currency = storeInfo?.currency || 'USD';
+  const variants = product.variants ?? [];
+  if (variants.length === 0) return null;
+
+  const prices = variants.map((v) => getVariantPrice(v, product.basePrice));
+  const min = Math.min(...prices);
+  const max = Math.max(...prices);
+
+  return (
+    <span className="text-foreground text-sm font-medium">
+      {min === max
+        ? (formatPrice(min, { currency }) as string)
+        : `${formatPrice(min, { currency })} – ${formatPrice(max, { currency })}`}
+    </span>
+  );
+}
+
 export function ProductCard({ product, className }: ProductCardProps) {
   const t = useTranslations('common');
   const tp = useTranslations('productDetail');
+  const tProd = useTranslations('products');
+  const router = useRouter();
+  const { refreshCart } = useCart();
   const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
   const mainImage = product.images?.[0];
   const imageUrl = mainImage?.url || null;
   const slug = product.slug || product.id;
+  const isVariable = product.type === 'VARIABLE';
+
+  const [adding, setAdding] = useState(false);
+  const [added, setAdded] = useState(false);
+
+  const canPurchase = product.inventory?.canPurchase !== false;
+
+  async function handleAddToCart(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (isVariable) {
+      router.push(`/products/${slug}`);
+      return;
+    }
+
+    if (adding || !canPurchase) return;
+
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/lib/brainerce');
+      const client = getClient();
+      await client.smartAddToCart({ productId: product.id, quantity: 1 });
+      await refreshCart();
+      setAdded(true);
+      setTimeout(() => setAdded(false), 2000);
+    } catch (err) {
+      console.error('Failed to add to cart:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
 
   return (
-    <Link
-      href={`/products/${slug}`}
+    <div
       className={cn(
         'border-border bg-background group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
         className
       )}
     >
-      {/* Image */}
-      <div className="bg-muted relative aspect-square overflow-hidden">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={mainImage?.alt || product.name}
-            fill
-            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
-            className="object-cover transition-transform duration-300 group-hover:scale-105"
-          />
-        ) : (
-          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-            <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
+      {/* Image — clickable */}
+      <Link href={`/products/${slug}`} className="block">
+        <div className="bg-muted relative aspect-square overflow-hidden">
+          {imageUrl ? (
+            <Image
+              src={imageUrl}
+              alt={mainImage?.alt || product.name}
+              fill
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+              className="object-cover transition-transform duration-300 group-hover:scale-105"
+            />
+          ) : (
+            <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+              <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+            </div>
+          )}
+
+          {/* Badges */}
+          <div className="absolute start-2 top-2 flex flex-col gap-1">
+            {isOnSale && (
+              <span className="bg-destructive text-destructive-foreground rounded px-2 py-1 text-xs font-bold">
+                {t('sale')}
+              </span>
+            )}
+            <DiscountBadge discount={product.discount} />
+            {product.isDownloadable && (
+              <span className="bg-primary text-primary-foreground rounded px-2 py-1 text-xs font-bold">
+                {tp('digitalProduct')}
+              </span>
+            )}
           </div>
-        )}
 
-        {/* Badges */}
-        <div className="absolute start-2 top-2 flex flex-col gap-1">
-          {isOnSale && (
-            <span className="bg-destructive text-destructive-foreground rounded px-2 py-1 text-xs font-bold">
-              {t('sale')}
-            </span>
-          )}
-          <DiscountBadge discount={product.discount} />
-          {product.isDownloadable && (
-            <span className="bg-primary text-primary-foreground rounded px-2 py-1 text-xs font-bold">
-              {tp('digitalProduct')}
-            </span>
+          {/* Add to cart overlay button */}
+          {(isVariable || canPurchase) && (
+            <button
+              onClick={handleAddToCart}
+              disabled={adding}
+              aria-label={isVariable ? tProd('selectOptions') : tp('addToCart')}
+              className={cn(
+                'absolute bottom-2 end-2 flex h-8 w-8 items-center justify-center rounded-full shadow-md transition-all',
+                'translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100',
+                added
+                  ? 'bg-green-500 text-white'
+                  : 'bg-primary text-primary-foreground hover:opacity-90'
+              )}
+            >
+              {added ? (
+                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+              ) : isVariable ? (
+                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+                </svg>
+              ) : (
+                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+                </svg>
+              )}
+            </button>
           )}
         </div>
-      </div>
+      </Link>
 
       {/* Content */}
       <div className="space-y-2 p-3">
@@ -86,17 +174,23 @@ export function ProductCard({ product, className }: ProductCardProps) {
           </div>
         )}
 
-        {/* Name */}
-        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
-          {product.name}
-        </h3>
+        {/* Name — clickable */}
+        <Link href={`/products/${slug}`}>
+          <h3 className="text-foreground hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
+            {product.name}
+          </h3>
+        </Link>
 
         {/* Price */}
-        <PriceDisplay price={originalPrice} salePrice={isOnSale ? price : undefined} size="sm" />
+        {isVariable ? (
+          <VariantPriceRange product={product} />
+        ) : (
+          <PriceDisplay price={originalPrice} salePrice={isOnSale ? price : undefined} size="sm" />
+        )}
 
         {/* Stock */}
         <StockBadge inventory={product.inventory} />
       </div>
-    </Link>
+    </div>
   );
 }

package/templates/nextjs/base/src/components/products/stock-badge.tsx

@@ -1,53 +1,60 @@
-'use client';
-
-import type { InventoryInfo } from 'brainerce';
-import { cn } from '@/lib/utils';
-
-interface StockBadgeProps {
-  inventory: InventoryInfo | null | undefined;
-  lowStockThreshold?: number;
-  className?: string;
-}
-
-export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
-  const label = getStockLabel(inventory, lowStockThreshold);
-  const color = getStockColor(inventory, lowStockThreshold);
-
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-        color,
-        className
-      )}
-    >
-      {label}
-    </span>
-  );
-}
-
-function getStockLabel(inventory: InventoryInfo | null | undefined, lowStockThreshold: number): string {
-  if (!inventory) return 'Out of Stock';
-
-  const { trackingMode, inStock, available } = inventory;
-
-  if (trackingMode === 'DISABLED') return 'Unavailable';
-  if (!inStock) return 'Out of Stock';
-  if (trackingMode === 'UNLIMITED') return 'In Stock';
-
-  // TRACKED — show actual quantity
-  if (available <= lowStockThreshold) {
-    return `Only ${available} left`;
-  }
-  return `${available} in stock`;
-}
-
-function getStockColor(inventory: InventoryInfo | null | undefined, lowStockThreshold: number): string {
-  if (!inventory) return 'bg-red-100 text-red-800';
-
-  const { trackingMode, inStock, available } = inventory;
-
-  if (trackingMode === 'DISABLED' || !inStock) return 'bg-red-100 text-red-800';
-  if (trackingMode === 'TRACKED' && available <= lowStockThreshold) return 'bg-yellow-100 text-yellow-800';
-  return 'bg-green-100 text-green-800';
-}
+'use client';
+
+import type { InventoryInfo } from 'brainerce';
+import { cn } from '@/lib/utils';
+
+interface StockBadgeProps {
+  inventory: InventoryInfo | null | undefined;
+  lowStockThreshold?: number;
+  className?: string;
+}
+
+export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
+  const label = getStockLabel(inventory, lowStockThreshold);
+  const color = getStockColor(inventory, lowStockThreshold);
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+        color,
+        className
+      )}
+    >
+      {label}
+    </span>
+  );
+}
+
+function getStockLabel(
+  inventory: InventoryInfo | null | undefined,
+  lowStockThreshold: number
+): string {
+  if (!inventory) return 'Out of Stock';
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED') return 'Unavailable';
+  if (!inStock) return 'Out of Stock';
+  if (trackingMode === 'UNLIMITED') return 'In Stock';
+
+  // TRACKED — show actual quantity
+  if (available <= lowStockThreshold) {
+    return `Only ${available} left`;
+  }
+  return `${available} in stock`;
+}
+
+function getStockColor(
+  inventory: InventoryInfo | null | undefined,
+  lowStockThreshold: number
+): string {
+  if (!inventory) return 'bg-red-100 text-red-800';
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED' || !inStock) return 'bg-red-100 text-red-800';
+  if (trackingMode === 'TRACKED' && available <= lowStockThreshold)
+    return 'bg-yellow-100 text-yellow-800';
+  return 'bg-green-100 text-green-800';
+}