4.7 KiB

Raw Blame History

Phase 4: Products (Display & List)

Status: ⏳ Todo Progress: 0/10 tasks (0%) Started: - Completed: - Assigned to: -

Overview

Implement product display functionality: API endpoints for fetching products, product list/detail pages, and UI components for displaying Makerspace annual passes.

Goal: Users can browse and view Makerspace-Jahreskarten products.

Dependencies

✅ Phase 1: Foundation must be completed
✅ Phase 2: Database must be completed (products table needed)
⚠️ Optional: Phase 3: Authentication (for future protected features)

Tasks

API Endpoints

Create /api/products/index.get.ts endpoint

Query products from DB (Drizzle)
Filter by: active=true, category (optional)
Sort by: name, price
Return: Array of products

Example:

export default defineEventHandler(async (event) => {
  const { category } = getQuery(event)
  const products = await db.query.products.findMany({
    where: and(
      eq(products.active, true),
      category ? eq(products.category, category) : undefined
    ),
    orderBy: products.name,
  })
  return products
})

Create /api/products/[id].get.ts endpoint
- Validate ID (Zod: UUID)
- Query product by ID
- Return 404 if not found
- Return: Product object
- See: CLAUDE.md: API Route Example

UI Components

Create ProductCard component
- File: components/Product/ProductCard.vue
- Props: product (object)
- Display: Image, name, price, short description
- Button: "In den Warenkorb" (Add to Cart)
- Styling: shadcn-nuxt Card component + Tailwind
- Mobile-first design
Create ProductList component
- File: components/Product/ProductList.vue
- Props: products (array)
- Grid layout: 1 col (mobile), 2 cols (tablet), 3 cols (desktop)
- Uses: ProductCard for each product
- Empty state: "Keine Produkte verfügbar"
Create ProductDetail component
- File: components/Product/ProductDetail.vue
- Props: product (object)
- Display: Large image, full description, price, stock status
- Button: "In den Warenkorb"
- Breadcrumb: Home > Produkte > [Product Name]

Asset Handling

Add product images handling
- Create /public/images/products/ folder
- Add placeholder image for products without image
- Document image requirements (size, format)
- Optimize images (use Nuxt Image module if needed)

Testing

Test product display
- Seed database with sample products (manual or seed script)
- Visit /produkte page
- Verify products display correctly
- Verify responsive design (mobile, tablet, desktop)
- Click product to view detail page
- Verify product detail displays correctly
Optimize product queries
- Add indexes to products table if needed (active, category)
- Test query performance with 100+ products
- Add pagination if needed (future enhancement)
Document product schema
- Document product data structure in code comments
- Document how images are stored/referenced
- Document category values (e.g., "makerspace-jahreskarte")

Acceptance Criteria

/api/products endpoint returns all active products
/api/products/[id] endpoint returns product by ID
ProductCard component displays product correctly
ProductList component shows products in grid layout
ProductDetail component shows full product info
/produkte page lists all products
/produkte/[id] page shows product detail
Images display correctly (or placeholder if missing)
Responsive design works on mobile/tablet/desktop
Product data structure is documented

Notes

MVP Scope: Only Makerspace-Jahreskarten products for now
Images: Can use placeholders initially, real images added later
Pagination: Not needed for MVP (< 10 products expected)
Filters: Category filter can be added later if needed

Blockers

None currently (can use mock products if NAV ERP sync not ready)

4.7 KiB Raw Blame History