Implement shopping cart functionality with UI components and API integration

- Added CartItem, CartSummary, CartEmpty, CartSidebar, and CartSheet components for managing cart display and interactions.
- Integrated useCart and useCartUI composables for cart state management and UI control.
- Implemented API endpoints for cart operations, including fetching, adding, updating, and removing items.
- Enhanced user experience with loading states and notifications using vue-sonner for cart actions.
- Configured session management for guest and authenticated users, ensuring cart persistence across sessions.

This commit completes the shopping cart feature, enabling users to add items, view their cart, and proceed to checkout.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
Bastian Masanek
2025-11-03 12:43:13 +01:00
parent 9d0e77fc98
commit b372e2cf78
44 changed files with 2209 additions and 123 deletions

View File

@@ -1,10 +1,10 @@
# Phase 4: Cart (Shopping Cart) ⚡ PRIORITY
**Status:** ⏳ Todo
**Progress:** 0/12 tasks (0%)
**Started:** -
**Completed:** -
**Assigned to:** -
**Status:** ✅ Done
**Progress:** 12/12 tasks (100%)
**Started:** 2025-11-03
**Completed:** 2025-11-03
**Assigned to:** Bastian
---
@@ -28,33 +28,33 @@ Implement shopping cart functionality: API endpoints for cart operations, cart c
### API Endpoints
- [ ] Create /api/cart/index.get.ts endpoint
- [x] Create /api/cart/index.get.ts endpoint
- Get current user's cart (or session cart for guests)
- Include cart items with product details (join)
- Calculate total price
- Return: { cart, items: [{product, quantity, subtotal}], total }
- [ ] Create /api/cart/items.post.ts endpoint
- [x] Create /api/cart/items.post.ts endpoint
- Add item to cart (body: {productId, quantity})
- Validate product exists and has stock
- Create cart if doesn't exist
- Upsert cart_item (update quantity if already exists)
- Return: Updated cart
- [ ] Create /api/cart/items/[id].patch.ts endpoint
- [x] Create /api/cart/items/[id].patch.ts endpoint
- Update cart item quantity (body: {quantity})
- Validate quantity > 0
- Validate stock availability
- Return: Updated cart item
- [ ] Create /api/cart/items/[id].delete.ts endpoint
- [x] Create /api/cart/items/[id].delete.ts endpoint
- Remove item from cart
- Delete cart_item record
- Return: 204 No Content
### Composables
- [ ] Create useCart composable
- [x] Create useCart composable
- File: `composables/useCart.ts`
- State: cart (ref), items (computed), total (computed), itemCount (computed)
- Functions:
@@ -68,14 +68,14 @@ Implement shopping cart functionality: API endpoints for cart operations, cart c
### UI Components
- [ ] Create CartItem component
- [x] Create CartItem component
- File: `components/Cart/CartItem.vue`
- Props: item (object with product, quantity, subtotal)
- Display: Product image, name, price, quantity input, subtotal
- Actions: Update quantity, Remove button
- Emits: @update, @remove
- [ ] Create CartSummary component
- [x] Create CartSummary component
- File: `components/Cart/CartSummary.vue`
- Props: items (array), total (number)
- Display: Items count, subtotal, VAT, total
@@ -84,7 +84,7 @@ Implement shopping cart functionality: API endpoints for cart operations, cart c
### Pages
- [ ] Create cart page
- [x] Create cart page
- File: `pages/warenkorb.vue` (German route)
- Uses: useCart composable
- Shows: List of CartItem components + CartSummary
@@ -93,7 +93,7 @@ Implement shopping cart functionality: API endpoints for cart operations, cart c
### Testing
- [ ] Test cart operations
- [x] Test cart operations
- Add product to cart from product page
- Verify cart count updates (header badge)
- Visit /warenkorb page
@@ -101,18 +101,18 @@ Implement shopping cart functionality: API endpoints for cart operations, cart c
- Remove item via button
- Verify total updates correctly
- [ ] Add cart persistence
- [x] Add cart persistence
- For logged-in users: cart stored in DB (user_id)
- For guests: cart stored in DB (session_id)
- Test cart persists across page reloads
- Test cart merges when guest logs in (optional, can defer)
- [ ] Optimize cart queries
- [x] Optimize cart queries
- Ensure product details are fetched efficiently (join, not N+1)
- Test with 10+ items in cart
- Add indexes if needed
- [ ] Document cart logic
- [x] Document cart logic
- Document cart/session relationship
- Document cart item uniqueness (cart_id + product_id)
- Document cart cleanup strategy (old carts)