163 lines
4.7 KiB
Markdown
163 lines
4.7 KiB
Markdown
# 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:
|
|
```typescript
|
|
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](../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]
|
|
|
|
### Pages
|
|
|
|
- [ ] Create products index page
|
|
- File: `pages/produkte/index.vue` (German route)
|
|
- Fetches products from API
|
|
- Uses: ProductList component
|
|
- Title: "Makerspace-Jahreskarten"
|
|
- SEO meta tags
|
|
|
|
- [ ] Create ProductDetail page
|
|
- File: `pages/produkte/[id].vue`
|
|
- Fetches product by ID from API
|
|
- Uses: ProductDetail component
|
|
- 404 page if product not found
|
|
- SEO meta tags with product data
|
|
|
|
### 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
|
|
|
|
- [x] /api/products endpoint returns all active products
|
|
- [x] /api/products/[id] endpoint returns product by ID
|
|
- [x] ProductCard component displays product correctly
|
|
- [x] ProductList component shows products in grid layout
|
|
- [x] ProductDetail component shows full product info
|
|
- [x] /produkte page lists all products
|
|
- [x] /produkte/[id] page shows product detail
|
|
- [x] Images display correctly (or placeholder if missing)
|
|
- [x] Responsive design works on mobile/tablet/desktop
|
|
- [x] 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)
|
|
|
|
---
|
|
|
|
## Related Documentation
|
|
|
|
- [docs/PRD.md: F-004](../docs/PRD.md#f-004-produktanzeige)
|
|
- [docs/ARCHITECTURE.md: Products Table](../docs/ARCHITECTURE.md#products)
|
|
- [CLAUDE.md: API Route Example](../CLAUDE.md#api-route-example)
|