feat: Add product images support with WP Media Library integration
- Add WP Media Library integration for product and variation images - Support images array (URLs) conversion to attachment IDs - Add images array to API responses (Admin & Customer SPA) - Implement drag-and-drop sortable images in Admin product form - Add image gallery thumbnails in Customer SPA product page - Initialize WooCommerce session for guest cart operations - Fix product variations and attributes display in Customer SPA - Add variation image field in Admin SPA Changes: - includes/Api/ProductsController.php: Handle images array, add to responses - includes/Frontend/ShopController.php: Add images array for customer SPA - includes/Frontend/CartController.php: Initialize WC session for guests - admin-spa/src/lib/wp-media.ts: Add openWPMediaGallery function - admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx: WP Media + sortable images - admin-spa/src/routes/Products/partials/tabs/VariationsTab.tsx: Add variation image field - customer-spa/src/pages/Product/index.tsx: Add gallery thumbnails display
This commit is contained in:
Dwindi Ramadhana
288
SPRINT_3-4_PLAN.md
Normal file
288
SPRINT_3-4_PLAN.md
Normal file
@@ -0,0 +1,288 @@
|
||||
# Sprint 3-4: Product Catalog & Cart
|
||||
|
||||
**Duration:** Sprint 3-4 (2 weeks)
|
||||
**Status:** 🚀 Ready to Start
|
||||
**Prerequisites:** ✅ Sprint 1-2 Complete
|
||||
|
||||
---
|
||||
|
||||
## Objectives
|
||||
|
||||
Build out the complete product catalog experience and shopping cart functionality.
|
||||
|
||||
### Sprint 3: Product Catalog Enhancement
|
||||
1. **Product Detail Page** - Full product view with variations
|
||||
2. **Product Filters** - Category, price, attributes
|
||||
3. **Product Search** - Real-time search with debouncing
|
||||
4. **Product Sorting** - Price, popularity, rating, date
|
||||
|
||||
### Sprint 4: Shopping Cart
|
||||
1. **Cart Page** - View and manage cart items
|
||||
2. **Cart Sidebar** - Quick cart preview
|
||||
3. **Cart API Integration** - Sync with WooCommerce cart
|
||||
4. **Coupon Application** - Apply and remove coupons
|
||||
|
||||
---
|
||||
|
||||
## Sprint 3: Product Catalog Enhancement
|
||||
|
||||
### 1. Product Detail Page (`/product/:id`)
|
||||
|
||||
**File:** `customer-spa/src/pages/Product/index.tsx`
|
||||
|
||||
**Features:**
|
||||
- Product images gallery with zoom
|
||||
- Product title, price, description
|
||||
- Variation selector (size, color, etc.)
|
||||
- Quantity selector
|
||||
- Add to cart button
|
||||
- Related products
|
||||
- Product reviews (if enabled)
|
||||
|
||||
**API Endpoints:**
|
||||
- `GET /shop/products/:id` - Get product details
|
||||
- `GET /shop/products/:id/related` - Get related products (optional)
|
||||
|
||||
**Components to Create:**
|
||||
- `ProductGallery.tsx` - Image gallery with thumbnails
|
||||
- `VariationSelector.tsx` - Select product variations
|
||||
- `QuantityInput.tsx` - Quantity selector
|
||||
- `ProductMeta.tsx` - SKU, categories, tags
|
||||
- `RelatedProducts.tsx` - Related products carousel
|
||||
|
||||
---
|
||||
|
||||
### 2. Product Filters
|
||||
|
||||
**File:** `customer-spa/src/components/Shop/Filters.tsx`
|
||||
|
||||
**Features:**
|
||||
- Category filter (tree structure)
|
||||
- Price range slider
|
||||
- Attribute filters (color, size, brand, etc.)
|
||||
- Stock status filter
|
||||
- On sale filter
|
||||
- Clear all filters button
|
||||
|
||||
**State Management:**
|
||||
- Use URL query parameters for filters
|
||||
- Persist filters in URL for sharing
|
||||
|
||||
**Components:**
|
||||
- `CategoryFilter.tsx` - Hierarchical category tree
|
||||
- `PriceRangeFilter.tsx` - Price slider
|
||||
- `AttributeFilter.tsx` - Checkbox list for attributes
|
||||
- `ActiveFilters.tsx` - Show active filters with remove buttons
|
||||
|
||||
---
|
||||
|
||||
### 3. Product Search Enhancement
|
||||
|
||||
**Current:** Basic search input
|
||||
**Enhancement:** Real-time search with suggestions
|
||||
|
||||
**Features:**
|
||||
- Search as you type
|
||||
- Search suggestions dropdown
|
||||
- Recent searches
|
||||
- Popular searches
|
||||
- Product thumbnails in results
|
||||
- Keyboard navigation (arrow keys, enter, escape)
|
||||
|
||||
**File:** `customer-spa/src/components/Shop/SearchBar.tsx`
|
||||
|
||||
---
|
||||
|
||||
### 4. Product Sorting
|
||||
|
||||
**Features:**
|
||||
- Sort by: Default, Popularity, Rating, Price (low to high), Price (high to low), Latest
|
||||
- Dropdown selector
|
||||
- Persist in URL
|
||||
|
||||
**File:** `customer-spa/src/components/Shop/SortDropdown.tsx`
|
||||
|
||||
---
|
||||
|
||||
## Sprint 4: Shopping Cart
|
||||
|
||||
### 1. Cart Page (`/cart`)
|
||||
|
||||
**File:** `customer-spa/src/pages/Cart/index.tsx`
|
||||
|
||||
**Features:**
|
||||
- Cart items list with thumbnails
|
||||
- Quantity adjustment (+ / -)
|
||||
- Remove item button
|
||||
- Update cart button
|
||||
- Cart totals (subtotal, tax, shipping, total)
|
||||
- Coupon code input
|
||||
- Proceed to checkout button
|
||||
- Continue shopping link
|
||||
- Empty cart state
|
||||
|
||||
**Components:**
|
||||
- `CartItem.tsx` - Single cart item row
|
||||
- `CartTotals.tsx` - Cart totals summary
|
||||
- `CouponForm.tsx` - Apply coupon code
|
||||
- `EmptyCart.tsx` - Empty cart message
|
||||
|
||||
---
|
||||
|
||||
### 2. Cart Sidebar/Drawer
|
||||
|
||||
**File:** `customer-spa/src/components/Cart/CartDrawer.tsx`
|
||||
|
||||
**Features:**
|
||||
- Slide-in from right
|
||||
- Mini cart items (max 5, then scroll)
|
||||
- Cart totals
|
||||
- View cart button
|
||||
- Checkout button
|
||||
- Close button
|
||||
- Backdrop overlay
|
||||
|
||||
**Trigger:**
|
||||
- Click cart icon in header
|
||||
- Auto-open when item added (optional)
|
||||
|
||||
---
|
||||
|
||||
### 3. Cart API Integration
|
||||
|
||||
**Endpoints:**
|
||||
- `GET /cart` - Get current cart
|
||||
- `POST /cart/add` - Add item to cart
|
||||
- `PUT /cart/update` - Update item quantity
|
||||
- `DELETE /cart/remove` - Remove item
|
||||
- `POST /cart/apply-coupon` - Apply coupon
|
||||
- `DELETE /cart/remove-coupon` - Remove coupon
|
||||
|
||||
**State Management:**
|
||||
- Zustand store already created (`customer-spa/src/lib/cart/store.ts`)
|
||||
- Sync with WooCommerce session
|
||||
- Persist cart in localStorage
|
||||
- Handle cart conflicts (server vs local)
|
||||
|
||||
---
|
||||
|
||||
### 4. Coupon System
|
||||
|
||||
**Features:**
|
||||
- Apply coupon code
|
||||
- Show discount amount
|
||||
- Show coupon description
|
||||
- Remove coupon button
|
||||
- Error handling (invalid, expired, usage limit)
|
||||
|
||||
**Backend:**
|
||||
- Already implemented in `CartController.php`
|
||||
- `POST /cart/apply-coupon`
|
||||
- `DELETE /cart/remove-coupon`
|
||||
|
||||
---
|
||||
|
||||
## Technical Considerations
|
||||
|
||||
### Performance
|
||||
- Lazy load product images
|
||||
- Implement infinite scroll for product grid (optional)
|
||||
- Cache product data with TanStack Query
|
||||
- Debounce search and filter inputs
|
||||
|
||||
### UX Enhancements
|
||||
- Loading skeletons for all states
|
||||
- Optimistic updates for cart actions
|
||||
- Toast notifications for user feedback
|
||||
- Smooth transitions and animations
|
||||
- Mobile-first responsive design
|
||||
|
||||
### Error Handling
|
||||
- Network errors
|
||||
- Out of stock products
|
||||
- Invalid variations
|
||||
- Cart conflicts
|
||||
- API timeouts
|
||||
|
||||
### Accessibility
|
||||
- Keyboard navigation
|
||||
- Screen reader support
|
||||
- Focus management
|
||||
- ARIA labels
|
||||
- Color contrast
|
||||
|
||||
---
|
||||
|
||||
## Implementation Order
|
||||
|
||||
### Week 1 (Sprint 3)
|
||||
1. **Day 1-2:** Product Detail Page
|
||||
- Basic layout and product info
|
||||
- Image gallery
|
||||
- Add to cart functionality
|
||||
|
||||
2. **Day 3:** Variation Selector
|
||||
- Handle simple and variable products
|
||||
- Update price based on variation
|
||||
- Validation
|
||||
|
||||
3. **Day 4-5:** Filters & Search
|
||||
- Category filter
|
||||
- Price range filter
|
||||
- Search enhancement
|
||||
- Sort dropdown
|
||||
|
||||
### Week 2 (Sprint 4)
|
||||
1. **Day 1-2:** Cart Page
|
||||
- Cart items list
|
||||
- Quantity adjustment
|
||||
- Cart totals
|
||||
- Coupon application
|
||||
|
||||
2. **Day 3:** Cart Drawer
|
||||
- Slide-in sidebar
|
||||
- Mini cart items
|
||||
- Quick actions
|
||||
|
||||
3. **Day 4:** Cart API Integration
|
||||
- Sync with backend
|
||||
- Handle conflicts
|
||||
- Error handling
|
||||
|
||||
4. **Day 5:** Polish & Testing
|
||||
- Responsive design
|
||||
- Loading states
|
||||
- Error states
|
||||
- Cross-browser testing
|
||||
|
||||
---
|
||||
|
||||
## Success Criteria
|
||||
|
||||
### Sprint 3
|
||||
- ✅ Product detail page displays all product info
|
||||
- ✅ Variations can be selected and price updates
|
||||
- ✅ Filters work and update product list
|
||||
- ✅ Search returns relevant results
|
||||
- ✅ Sorting works correctly
|
||||
|
||||
### Sprint 4
|
||||
- ✅ Cart page displays all cart items
|
||||
- ✅ Quantity can be adjusted
|
||||
- ✅ Items can be removed
|
||||
- ✅ Coupons can be applied and removed
|
||||
- ✅ Cart drawer opens and closes smoothly
|
||||
- ✅ Cart syncs with WooCommerce backend
|
||||
- ✅ Cart persists across page reloads
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. Review this plan
|
||||
2. Confirm priorities
|
||||
3. Start with Product Detail Page
|
||||
4. Implement features incrementally
|
||||
5. Test each feature before moving to next
|
||||
|
||||
**Ready to start Sprint 3?** 🚀
|
||||
Reference in New Issue
Block a user