Skip to main content

Product Detail

Route: /stores/[id]/products/[productId]
File: ayts-fe/app/stores/[id]/products/[productId]/page.tsx
Auth required: No (add to cart requires auth)

Purpose​

Full detail view of a single product within its store context. Customers can read the description, view images, check price and availability, read reviews, and add to cart.

Sections​

  • Main product image (R2 CDN)
  • Product name, price (₱)
  • Stock indicator (In Stock / Out of Stock)
  • Category badge

Product Description​

  • Long-form description
  • Tags / attributes (if set by vendor)

Add to Cart​

  • Quantity selector (1–available stock)
  • "Add to Cart" button
  • "Go to Cart" shortcut if already added

Product Reviews​

  • Average star rating
  • Customer review list
  • Review form (auth required)

Data Fetching​

// Product details
GET /api/products/{productId}

// Product reviews
GET /api/reviews/product/{productId}?limit=10

ISR: next: { revalidate: 300 } via layout.tsx.

SEO​

Dynamic metadata from layout.tsx:

return {
  title: `${product.name} — ${store.name} — AYTS`,
  description: product.description,
  openGraph: {
    images: [product.imageUrl],
    type: 'product',
  },
};

Legacy Route​

/product/[id] still exists for backward compatibility but the canonical route is /stores/[id]/products/[productId].

Known Issues / Status​

ItemStatus
Product loads correctly✅ Working
Add to cart✅ Working
Reviews displayed✅ Working
Review submission✅ Working (auth required)
ISR caching✅ 5-minute revalidation
OG meta✅ Working