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
This commit is contained in:
Dwindi Ramadhana
331
PRODUCT_PAGE_IMPLEMENTATION.md
Normal file
331
PRODUCT_PAGE_IMPLEMENTATION.md
Normal file
@@ -0,0 +1,331 @@
|
||||
# Product Page Implementation Plan
|
||||
|
||||
## 🎯 What We Have (Current State)
|
||||
|
||||
### Backend (API):
|
||||
✅ Product data with variations
|
||||
✅ Product attributes
|
||||
✅ Images array (featured + gallery)
|
||||
✅ Variation images
|
||||
✅ Price, stock status, SKU
|
||||
✅ Description, short description
|
||||
✅ Categories, tags
|
||||
✅ Related products
|
||||
|
||||
### Frontend (Existing):
|
||||
✅ Basic product page structure
|
||||
✅ Image gallery with thumbnails (implemented but needs enhancement)
|
||||
✅ Add to cart functionality
|
||||
✅ Cart store (Zustand)
|
||||
✅ Toast notifications
|
||||
✅ Responsive layout
|
||||
|
||||
### Missing:
|
||||
❌ Horizontal scrollable thumbnail slider
|
||||
❌ Variation selector dropdowns
|
||||
❌ Variation image auto-switching
|
||||
❌ Reviews section
|
||||
❌ Specifications table
|
||||
❌ Shipping/Returns info
|
||||
❌ Wishlist/Save feature
|
||||
❌ Related products display
|
||||
❌ Social proof elements
|
||||
❌ Trust badges
|
||||
|
||||
---
|
||||
|
||||
## 📋 Implementation Priority (What Makes Sense Now)
|
||||
|
||||
### **Phase 1: Core Product Page (Implement Now)** ⭐
|
||||
|
||||
#### 1.1 Image Gallery Enhancement
|
||||
- ✅ Horizontal scrollable thumbnail slider
|
||||
- ✅ Arrow navigation for >4 images
|
||||
- ✅ Active thumbnail highlight
|
||||
- ✅ Click thumbnail to change main image
|
||||
- ✅ Responsive (swipeable on mobile)
|
||||
|
||||
**Why:** Critical for user experience, especially for products with multiple images
|
||||
|
||||
#### 1.2 Variation Selector
|
||||
- ✅ Dropdown for each attribute
|
||||
- ✅ Auto-switch image when variation selected
|
||||
- ✅ Update price based on variation
|
||||
- ✅ Update stock status
|
||||
- ✅ Disable Add to Cart if no variation selected
|
||||
|
||||
**Why:** Essential for variable products, directly impacts conversion
|
||||
|
||||
#### 1.3 Enhanced Buy Section
|
||||
- ✅ Price display (regular + sale)
|
||||
- ✅ Stock status with color coding
|
||||
- ✅ Quantity selector (plus/minus buttons)
|
||||
- ✅ Add to Cart button (with loading state)
|
||||
- ✅ Product meta (SKU, categories)
|
||||
|
||||
**Why:** Core e-commerce functionality
|
||||
|
||||
#### 1.4 Product Information Sections
|
||||
- ✅ Tabs for Description, Additional Info, Reviews
|
||||
- ✅ Vertical layout (avoid horizontal tabs)
|
||||
- ✅ Specifications table (from attributes)
|
||||
- ✅ Expandable sections on mobile
|
||||
|
||||
**Why:** Users need detailed product info, research shows vertical > horizontal
|
||||
|
||||
---
|
||||
|
||||
### **Phase 2: Trust & Conversion (Next Sprint)** 🎯
|
||||
|
||||
#### 2.1 Reviews Section
|
||||
- ⏳ Display existing WooCommerce reviews
|
||||
- ⏳ Star rating display
|
||||
- ⏳ Review count
|
||||
- ⏳ Link to write review (WooCommerce native)
|
||||
|
||||
**Why:** Reviews are #2 most important content after images
|
||||
|
||||
#### 2.2 Trust Elements
|
||||
- ⏳ Payment method icons
|
||||
- ⏳ Secure checkout badge
|
||||
- ⏳ Free shipping threshold
|
||||
- ⏳ Return policy link
|
||||
|
||||
**Why:** Builds trust, reduces cart abandonment
|
||||
|
||||
#### 2.3 Related Products
|
||||
- ⏳ Display related products (from API)
|
||||
- ⏳ Horizontal carousel
|
||||
- ⏳ Product cards
|
||||
|
||||
**Why:** Increases average order value
|
||||
|
||||
---
|
||||
|
||||
### **Phase 3: Advanced Features (Future)** 🚀
|
||||
|
||||
#### 3.1 Wishlist/Save for Later
|
||||
- 📅 Add to wishlist button
|
||||
- 📅 Wishlist page
|
||||
- 📅 Persist across sessions
|
||||
|
||||
#### 3.2 Social Proof
|
||||
- 📅 "X people viewing"
|
||||
- 📅 "X sold today"
|
||||
- 📅 Customer photos
|
||||
|
||||
#### 3.3 Enhanced Media
|
||||
- 📅 Image zoom/lightbox
|
||||
- 📅 Video support
|
||||
- 📅 360° view
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Phase 1 Implementation Details
|
||||
|
||||
### Component Structure:
|
||||
```
|
||||
Product/
|
||||
├── index.tsx (main component)
|
||||
├── components/
|
||||
│ ├── ImageGallery.tsx
|
||||
│ ├── ThumbnailSlider.tsx
|
||||
│ ├── VariationSelector.tsx
|
||||
│ ├── BuySection.tsx
|
||||
│ ├── ProductTabs.tsx
|
||||
│ ├── SpecificationTable.tsx
|
||||
│ └── ProductMeta.tsx
|
||||
```
|
||||
|
||||
### State Management:
|
||||
```typescript
|
||||
// Product page state
|
||||
const [product, setProduct] = useState<Product | null>(null);
|
||||
const [selectedImage, setSelectedImage] = useState<string>('');
|
||||
const [selectedVariation, setSelectedVariation] = useState<any>(null);
|
||||
const [selectedAttributes, setSelectedAttributes] = useState<Record<string, string>>({});
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [activeTab, setActiveTab] = useState('description');
|
||||
```
|
||||
|
||||
### Key Features:
|
||||
|
||||
#### 1. Thumbnail Slider
|
||||
```tsx
|
||||
<div className="relative">
|
||||
{/* Prev Arrow */}
|
||||
<button onClick={scrollPrev} className="absolute left-0">
|
||||
<ChevronLeft />
|
||||
</button>
|
||||
|
||||
{/* Scrollable Container */}
|
||||
<div ref={sliderRef} className="flex overflow-x-auto scroll-smooth gap-2">
|
||||
{images.map((img, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setSelectedImage(img)}
|
||||
className={selectedImage === img ? 'ring-2 ring-primary' : ''}
|
||||
>
|
||||
<img src={img} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Next Arrow */}
|
||||
<button onClick={scrollNext} className="absolute right-0">
|
||||
<ChevronRight />
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### 2. Variation Selector
|
||||
```tsx
|
||||
{product.attributes?.map(attr => (
|
||||
<div key={attr.name}>
|
||||
<label>{attr.name}</label>
|
||||
<select
|
||||
value={selectedAttributes[attr.name] || ''}
|
||||
onChange={(e) => handleAttributeChange(attr.name, e.target.value)}
|
||||
>
|
||||
<option value="">Choose {attr.name}</option>
|
||||
{attr.options.map(option => (
|
||||
<option key={option} value={option}>{option}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
```
|
||||
|
||||
#### 3. Auto-Switch Variation Image
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
if (selectedVariation && selectedVariation.image) {
|
||||
setSelectedImage(selectedVariation.image);
|
||||
}
|
||||
}, [selectedVariation]);
|
||||
|
||||
// Find matching variation
|
||||
useEffect(() => {
|
||||
if (product?.variations && Object.keys(selectedAttributes).length > 0) {
|
||||
const variation = product.variations.find(v => {
|
||||
return Object.entries(selectedAttributes).every(([key, value]) => {
|
||||
return v.attributes[key] === value;
|
||||
});
|
||||
});
|
||||
setSelectedVariation(variation || null);
|
||||
}
|
||||
}, [selectedAttributes, product]);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📐 Layout Design
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ Breadcrumb: Home > Shop > Category > Product Name │
|
||||
├──────────────────────┬──────────────────────────────────┤
|
||||
│ │ Product Name (H1) │
|
||||
│ Main Image │ ⭐⭐⭐⭐⭐ (24 reviews) │
|
||||
│ (Large) │ │
|
||||
│ │ $99.00 $79.00 (Save 20%) │
|
||||
│ │ ✅ In Stock │
|
||||
│ │ │
|
||||
│ [Thumbnail Slider] │ Short description text... │
|
||||
│ ◀ [img][img][img] ▶│ │
|
||||
│ │ Color: [Dropdown ▼] │
|
||||
│ │ Size: [Dropdown ▼] │
|
||||
│ │ │
|
||||
│ │ Quantity: [-] 1 [+] │
|
||||
│ │ │
|
||||
│ │ [🛒 Add to Cart] │
|
||||
│ │ [♡ Add to Wishlist] │
|
||||
│ │ │
|
||||
│ │ 🔒 Secure Checkout │
|
||||
│ │ 🚚 Free Shipping over $50 │
|
||||
│ │ ↩️ 30-Day Returns │
|
||||
├──────────────────────┴──────────────────────────────────┤
|
||||
│ │
|
||||
│ [Description] [Additional Info] [Reviews (24)] │
|
||||
│ ───────────── │
|
||||
│ │
|
||||
│ Full product description here... │
|
||||
│ • Feature 1 │
|
||||
│ • Feature 2 │
|
||||
│ │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ Related Products │
|
||||
│ [Product] [Product] [Product] [Product] │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Styling Guidelines
|
||||
|
||||
### Colors:
|
||||
```css
|
||||
--price-sale: #DC2626 (red)
|
||||
--stock-in: #10B981 (green)
|
||||
--stock-low: #F59E0B (orange)
|
||||
--stock-out: #EF4444 (red)
|
||||
--primary-cta: var(--primary)
|
||||
--border-active: var(--primary)
|
||||
```
|
||||
|
||||
### Spacing:
|
||||
```css
|
||||
--section-gap: 2rem
|
||||
--element-gap: 1rem
|
||||
--thumbnail-size: 80px
|
||||
--thumbnail-gap: 0.5rem
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Acceptance Criteria
|
||||
|
||||
### Image Gallery:
|
||||
- [ ] Thumbnails scroll horizontally
|
||||
- [ ] Show 4 thumbnails at a time on desktop
|
||||
- [ ] Arrow buttons appear when >4 images
|
||||
- [ ] Active thumbnail has colored border
|
||||
- [ ] Click thumbnail changes main image
|
||||
- [ ] Swipeable on mobile
|
||||
- [ ] Smooth scroll animation
|
||||
|
||||
### Variation Selector:
|
||||
- [ ] Dropdown for each attribute
|
||||
- [ ] "Choose an option" placeholder
|
||||
- [ ] When variation selected, image auto-switches
|
||||
- [ ] Price updates based on variation
|
||||
- [ ] Stock status updates
|
||||
- [ ] Add to Cart disabled until all attributes selected
|
||||
- [ ] Clear error message if incomplete
|
||||
|
||||
### Buy Section:
|
||||
- [ ] Sale price shown in red
|
||||
- [ ] Regular price strikethrough
|
||||
- [ ] Savings percentage/amount shown
|
||||
- [ ] Stock status color-coded
|
||||
- [ ] Quantity buttons work correctly
|
||||
- [ ] Add to Cart shows loading state
|
||||
- [ ] Success toast with cart preview
|
||||
- [ ] Cart count updates in header
|
||||
|
||||
### Product Info:
|
||||
- [ ] Tabs work correctly
|
||||
- [ ] Description renders HTML
|
||||
- [ ] Specifications show as table
|
||||
- [ ] Mobile: sections collapsible
|
||||
- [ ] Smooth scroll to reviews
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Ready to Implement
|
||||
|
||||
**Estimated Time:** 4-6 hours
|
||||
**Priority:** HIGH
|
||||
**Dependencies:** None (all APIs ready)
|
||||
|
||||
Let's build Phase 1 now! 🎯
|
||||
Reference in New Issue
Block a user