E-commerce

Product catalog, shopping cart, orders, and wishlist.

Overview

The e-commerce vertical consists of 5 pages sharing state through a single EcommerceProvider React context. Cart items and wishlist selections are kept in sync across every page without prop-drilling or an external state library.

Pages

Product List/ecommerce/products

Grid/list toggle, category filter, search, sort, add-to-cart and wishlist actions

Product Detail/ecommerce/products/[slug]

Image gallery, variant picker, quantity selector, reviews, related products

Cart/ecommerce/cart

Line item quantity controls, remove items, order summary with totals

Orders/ecommerce/orders

Order history table with status badges, filterable via DataTable

Wishlist/ecommerce/wishlist

Saved products, move to cart, remove from wishlist

EcommerceProvider

The context lives at src/contexts/ecommerce-context.tsx and wraps all e-commerce routes. It exposes the following API to any child component:

cart — array of cart line items with product and quantity
addToCart(product, qty) — add or increment a product in the cart
removeFromCart(productId) — remove a line item entirely
updateQuantity(productId, qty) — set a specific quantity
wishlist — array of saved product IDs
toggleWishlist(productId) — add or remove a product from the wishlist

Mock Data

All product data is sourced from src/lib/mock-ecommerce.ts, which contains 24 products, 5 sample orders, and 6 product reviews. The file also exports helper functions:

getProductBySlug(slug) — look up a single product for the detail page
getRelatedProducts(product) — return products from the same category

Customization

To connect a real backend, replace the mock data imports in each page with API calls and update EcommerceProvider to persist cart state to your API or a database instead of in-memory state. The context pattern centralises all mutation logic in one place, making it straightforward to swap localStorage or in-memory arrays for real API endpoints without touching any of the page components.