Component-Based Ecommerce: The Architecture Revolution

// ProductCard.tsx - Single component, infinite variations
interface ProductCardProps {
product: Product
variant?: 'default' | 'featured' | 'compact' | 'detailed'
showQuickView?: boolean
showCompare?: boolean
imageAspectRatio?: 'square' | 'portrait' | 'landscape'
priceDisplay?: 'range' | 'from' | 'exact'
}

export function ProductCard({ 
product, 
variant = 'default',
showQuickView = false,
showCompare = false,
imageAspectRatio = 'square',
priceDisplay = 'range'
}: ProductCardProps) {
let cardClasses = {
  default: 'p-4 border rounded-lg',
  featured: 'p-6 border-2 border-blue-500 rounded-xl shadow-lg',
  compact: 'p-2 border rounded',
  detailed: 'p-6 bg-white shadow-md rounded-lg'
}[variant]

return (
  <div className={cardClasses}>
    <ProductImage 
      image={product.featuredImage}
      aspectRatio={imageAspectRatio}
      showHoverEffect={variant === 'featured'}
    />
    
    <ProductInfo 
      product={product}
      priceDisplay={priceDisplay}
      showVendor={variant === 'detailed'}
    />
    
    {(showQuickView || showCompare) && (
      <ProductActions
        productId={product.id}
        showQuickView={showQuickView}
        showCompare={showCompare}
      />
    )}
  </div>
)
}

// Usage Examples - Same component, different contexts
<ProductCard product={product} variant="featured" showQuickView />
<ProductCard product={product} variant="compact" />
<ProductCard product={product} variant="detailed" showCompare />
<ProductCard product={product} imageAspectRatio="portrait" priceDisplay="from" />

// Collection pages built from composed components
export function CollectionPage({ collection }: { collection: Collection }) {
return (
  <div className="collection-page">
    <CollectionHero 
      collection={collection}
      showDescription={true}
      imagePosition="background"
    />
    
    <ProductFilters 
      collection={collection}
      enablePriceFilter={true}
      enableBrandFilter={true}
      enableAvailabilityFilter={true}
    />
    
    <ProductGrid 
      products={collection.products}
      columns={4}
      loadMore={true}
      sortOptions={['price', 'title', 'created_at']}
    />
    
    <CollectionFooter 
      collection={collection}
      showRelatedCollections={true}
      showNewsletterSignup={true}
    />
  </div>
)
}

// Each component is independently testable and reusable
// CollectionHero can be used for category pages, brand pages, etc.
// ProductGrid works for search results, recommendations, etc.
// ProductFilters adapt to any product listing context

// ProductGrid.tsx with visual editing capabilities
import { createSchema } from '@weaverse/hydrogen'

export let ProductGrid = forwardRef<HTMLDivElement, ProductGridProps>(
({ products, columns = 4, showFilters = true, sortBy = 'title' }, ref) => {
  // Component implementation
  return (
    <div ref={ref} className="product-grid">
      {showFilters && <FilterBar />}
      <div 
        className="grid gap-6"
        style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
      >
        {products.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  )
}
)

// Weaverse schema makes component visually editable
export let schema = createSchema({
type: 'product-grid',
title: 'Product Grid',
settings: [
  {
    group: 'Layout',
    inputs: [
      {
        type: 'range',
        name: 'columns',
        label: 'Grid Columns',
        min: 1,
        max: 6,
        defaultValue: 4,
      },
      {
        type: 'toggle',
        name: 'showFilters',
        label: 'Show Filter Bar',
        defaultValue: true,
      },
      {
        type: 'select',
        name: 'sortBy',
        label: 'Default Sort Order',
        options: [
          { value: 'title', label: 'Alphabetical' },
          { value: 'price', label: 'Price: Low to High' },
          { value: 'created_at', label: 'Newest First' },
        ],
        defaultValue: 'title',
      },
    ],
  },
],
})

// Result: Component works in code AND visual editor
// Developers build once, clients customize infinitely

// ShoppingCart.tsx - Stateful component with visual controls
import { useState, useEffect } from 'react'
import { useCart } from '@shopify/hydrogen'

interface ShoppingCartProps {
slideDirection?: 'left' | 'right'
showMiniCart?: boolean
enableQuickAdd?: boolean
maxItems?: number
}

export function ShoppingCart({ 
slideDirection = 'right',
showMiniCart = true,
enableQuickAdd = false,
maxItems = 50
}: ShoppingCartProps) {
let { lines, linesAdd, linesRemove, cost } = useCart()
let [isOpen, setIsOpen] = useState(false)
let [isLoading, setIsLoading] = useState(false)

// Smart cart logic
let canAddMore = lines.length < maxItems
let cartSlideClass = slideDirection === 'left' ? 'slide-left' : 'slide-right'

return (
  <>
    {showMiniCart && (
      <CartTrigger 
        itemCount={lines.length}
        total={cost.totalAmount}
        onClick={() => setIsOpen(true)}
      />
    )}
    
    <CartDrawer
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      className={cartSlideClass}
    >
      <CartItems 
        lines={lines}
        onRemove={linesRemove}
        isLoading={isLoading}
      />
      
      {enableQuickAdd && canAddMore && (
        <QuickAddSection onAdd={linesAdd} />
      )}
      
      <CartSummary 
        cost={cost}
        onCheckout={() => {/* Checkout logic */}}
      />
    </CartDrawer>
  </>
)
}

// Weaverse schema for visual cart customization
export let schema = createSchema({
type: 'shopping-cart',
title: 'Shopping Cart',
settings: [
  {
    group: 'Behavior',
    inputs: [
      {
        type: 'select',
        name: 'slideDirection',
        label: 'Cart Slide Direction',
        options: [
          { value: 'left', label: 'Slide from Left' },
          { value: 'right', label: 'Slide from Right' },
        ],
        defaultValue: 'right',
      },
      {
        type: 'toggle',
        name: 'enableQuickAdd',
        label: 'Enable Quick Add Products',
        defaultValue: false,
      },
      {
        type: 'range',
        name: 'maxItems',
        label: 'Maximum Cart Items',
        min: 10,
        max: 100,
        defaultValue: 50,
      },
    ],
  },
],
})

// ProductGrid.tsx - Optimized for React 19
import { Suspense, memo } from 'react'
import { useOptimistic, useTransition } from 'react'

interface ProductGridProps {
products: Product[]
onLoadMore?: () => Promise<Product[]>
}

// React 19 optimizations: No useMemo needed, compiler handles it
export let ProductGrid = memo(function ProductGrid({ 
products, 
onLoadMore 
}: ProductGridProps) {
let [isPending, startTransition] = useTransition()
let [optimisticProducts, addOptimisticProducts] = useOptimistic(
  products,
  (state, newProducts: Product[]) => [...state, ...newProducts]
)

let handleLoadMore = () => {
  if (!onLoadMore) return
  
  startTransition(async () => {
    let newProducts = await onLoadMore()
    addOptimisticProducts(newProducts)
  })
}

return (
  <div className="product-grid">
    <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      {optimisticProducts.map(product => (
        <Suspense 
          key={product.id} 
          fallback={<ProductCardSkeleton />}
        >
          <ProductCard product={product} />
        </Suspense>
      ))}
    </div>
    
    {onLoadMore && (
      <LoadMoreButton 
        onClick={handleLoadMore}
        isPending={isPending}
      />
    )}
  </div>
)
})

// React Compiler automatically optimizes:
// - Memoization of expensive calculations
// - Effect dependencies
// - Callback stability
// No manual optimization needed!

// ProductCard.test.tsx - Complete testing approach
import { render, screen, fireEvent } from '@testing-library/react'
import { ProductCard } from './ProductCard'

describe('ProductCard Component', () => {
let mockProduct = {
  id: '123',
  title: 'Test Product',
  featuredImage: { url: 'test.jpg', altText: 'Test' },
  priceRange: { minVariantPrice: { amount: '29.99' } }
}

test('renders product information correctly', () => {
  render(<ProductCard product={mockProduct} />)
  
  expect(screen.getByText('Test Product')).toBeInTheDocument()
  expect(screen.getByText('$29.99')).toBeInTheDocument()
  expect(screen.getByAltText('Test')).toBeInTheDocument()
})

test('shows quick view when enabled', () => {
  render(<ProductCard product={mockProduct} showQuickView={true} />)
  
  expect(screen.getByText('Quick View')).toBeInTheDocument()
})

test('handles different variants correctly', () => {
  render(<ProductCard product={mockProduct} variant="featured" />)
  
  let card = screen.getByTestId('product-card')
  expect(card).toHaveClass('border-2', 'border-blue-500')
})

test('supports accessibility requirements', () => {
  render(<ProductCard product={mockProduct} />)
  
  let link = screen.getByRole('link')
  expect(link).toHaveAttribute('aria-label', 'View Test Product')
})
})

// Visual regression testing with Playwright
test('ProductCard visual consistency', async ({ page }) => {
await page.goto('/components/product-card')
await expect(page.locator('[data-testid="product-card"]')).toHaveScreenshot()
})