Skip to main content

Store Detail

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

Purpose​

Displays a single store with its full product catalog. This is the primary page where customers discover and add products to their cart.

URL Format​

Uses store UUID: /stores/550e8400-e29b-41d4-a716-446655440000

Sections​

Store Header​

  • Store banner image (R2 CDN)
  • Store name, category, rating, total reviews
  • Operating hours
  • Location / address
  • "Follow" button (future feature)

Product Grid​

  • All available products for this store
  • Displays: product image, name, price (₱), stock indicator
  • Add to cart button (increments quantity if already in cart)
  • Product card links to /stores/[id]/products/[productId]

Store Reviews​

  • Star rating overview (average + distribution)
  • Customer review list (paginated)
  • "Write a Review" button (auth required)

Data Fetching​

// Store details
GET /api/stores/{id}

// Store products
GET /api/products?storeId={id}&status=available

// Store reviews
GET /api/reviews/store/{id}?limit=10&offset=0

Page uses ISR: next: { revalidate: 300 } (5-minute cache).

SEO​

The layout.tsx generates dynamic OG meta:

export async function generateMetadata({ params }) {
  const store = await getStore(params.id);
  return {
    title: `${store.name} — AYTS`,
    description: store.description,
    openGraph: { images: [store.bannerUrl] },
  };
}

Key Components​

ComponentFile
Store header + product gridapp/stores/[id]/components/
Cart integrationlib/api.ts → addToCart()
Review formcomponents/review-form.tsx

Cart Integration​

// When customer clicks "Add to Cart"
await api.addToCart({
  productId: product.id,
  storeId: storeId,
  quantity: 1,
});

Known Issues / Status​

ItemStatus
Store loads by UUID✅ Working
Products displayed✅ Working
Add to cart✅ Working (productId mapping fixed)
OG meta for SEO✅ Working
ISR caching✅ 5-minute revalidation
Reviews display✅ Working
Legacy /store/[id] route⚠️ Kept for redirect compatibility