Dwindi Ramadhana
|
c37ecb8e96
|
feat: Implement complete product page with industry best practices
Phase 1 Implementation:
- Horizontal scrollable thumbnail slider with arrow navigation
- Variation selector with auto-image switching
- Enhanced buy section with quantity controls
- Product tabs (Description, Additional Info, Reviews)
- Specifications table from attributes
- Responsive design with mobile optimization
Features:
- Image gallery: Click thumbnails to change main image
- Variation selector: Auto-updates price, stock, and image
- Stock status: Color-coded indicators (green/red)
- Add to cart: Validates variation selection
- Breadcrumb navigation
- Product meta (SKU, categories)
- Wishlist button (UI only)
Documentation:
- PRODUCT_PAGE_SOP.md: Industry best practices guide
- PRODUCT_PAGE_IMPLEMENTATION.md: Implementation plan
Admin:
- Sortable images with visual dropzone indicators
- Dashed borders show drag-and-drop capability
- Ring highlight on drag-over
- Opacity change when dragging
Files changed:
- customer-spa/src/pages/Product/index.tsx: Complete rebuild
- customer-spa/src/index.css: Add scrollbar-hide utility
- admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx: Enhanced dropzone
|
2025-11-26 16:29:02 +07:00 |
|