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
@@ -1,13 +1,475 @@
|
||||
import React from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useParams, Link, useNavigate } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { apiClient } from '@/lib/api/client';
|
||||
import { useCartStore } from '@/lib/cart/store';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Container from '@/components/Layout/Container';
|
||||
import { formatPrice } from '@/lib/currency';
|
||||
import { ShoppingCart, Minus, Plus, ArrowLeft, ChevronLeft, ChevronRight, Heart } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import type { Product as ProductType, ProductsResponse } from '@/types/product';
|
||||
|
||||
export default function Product() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [activeTab, setActiveTab] = useState<'description' | 'additional' | 'reviews'>('description');
|
||||
const [selectedImage, setSelectedImage] = useState<string | undefined>();
|
||||
const [selectedVariation, setSelectedVariation] = useState<any>(null);
|
||||
const [selectedAttributes, setSelectedAttributes] = useState<Record<string, string>>({});
|
||||
const thumbnailsRef = useRef<HTMLDivElement>(null);
|
||||
const { addItem } = useCartStore();
|
||||
|
||||
// Fetch product details by slug
|
||||
const { data: product, isLoading, error } = useQuery<ProductType | null>({
|
||||
queryKey: ['product', slug],
|
||||
queryFn: async () => {
|
||||
if (!slug) return null;
|
||||
|
||||
const response = await apiClient.get<ProductsResponse>(apiClient.endpoints.shop.products, {
|
||||
slug,
|
||||
per_page: 1,
|
||||
});
|
||||
|
||||
if (response && response.products && response.products.length > 0) {
|
||||
return response.products[0];
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
enabled: !!slug,
|
||||
});
|
||||
|
||||
// Set initial image when product loads
|
||||
useEffect(() => {
|
||||
if (product && !selectedImage) {
|
||||
setSelectedImage(product.image || product.images?.[0]);
|
||||
}
|
||||
}, [product]);
|
||||
|
||||
// Find matching variation when attributes change
|
||||
useEffect(() => {
|
||||
if (product?.type === 'variable' && product.variations && Object.keys(selectedAttributes).length > 0) {
|
||||
const variation = (product.variations as any[]).find(v => {
|
||||
return Object.entries(selectedAttributes).every(([key, value]) => {
|
||||
const attrKey = `attribute_${key.toLowerCase()}`;
|
||||
return v.attributes[attrKey] === value.toLowerCase();
|
||||
});
|
||||
});
|
||||
setSelectedVariation(variation || null);
|
||||
}
|
||||
}, [selectedAttributes, product]);
|
||||
|
||||
// Auto-switch image when variation selected
|
||||
useEffect(() => {
|
||||
if (selectedVariation && selectedVariation.image) {
|
||||
setSelectedImage(selectedVariation.image);
|
||||
}
|
||||
}, [selectedVariation]);
|
||||
|
||||
// Scroll thumbnails
|
||||
const scrollThumbnails = (direction: 'left' | 'right') => {
|
||||
if (thumbnailsRef.current) {
|
||||
const scrollAmount = 200;
|
||||
thumbnailsRef.current.scrollBy({
|
||||
left: direction === 'left' ? -scrollAmount : scrollAmount,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleAttributeChange = (attributeName: string, value: string) => {
|
||||
setSelectedAttributes(prev => ({
|
||||
...prev,
|
||||
[attributeName]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleAddToCart = async () => {
|
||||
if (!product) return;
|
||||
|
||||
// Validate variation selection for variable products
|
||||
if (product.type === 'variable') {
|
||||
if (!selectedVariation) {
|
||||
toast.error('Please select all product options');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await apiClient.post(apiClient.endpoints.cart.add, {
|
||||
product_id: product.id,
|
||||
quantity,
|
||||
variation_id: selectedVariation?.id || 0,
|
||||
});
|
||||
|
||||
addItem({
|
||||
key: `${product.id}${selectedVariation ? `-${selectedVariation.id}` : ''}`,
|
||||
product_id: product.id,
|
||||
name: product.name,
|
||||
price: parseFloat(selectedVariation?.price || product.price),
|
||||
quantity,
|
||||
image: selectedImage || product.image,
|
||||
});
|
||||
|
||||
toast.success(`${product.name} added to cart!`, {
|
||||
action: {
|
||||
label: 'View Cart',
|
||||
onClick: () => navigate('/cart'),
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
toast.error('Failed to add to cart');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Container>
|
||||
<div className="animate-pulse max-w-6xl mx-auto py-8">
|
||||
<div className="h-8 bg-gray-200 rounded w-1/4 mb-4"></div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="aspect-square bg-gray-200 rounded"></div>
|
||||
<div className="space-y-4">
|
||||
<div className="h-8 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="h-6 bg-gray-200 rounded w-1/4"></div>
|
||||
<div className="h-24 bg-gray-200 rounded"></div>
|
||||
<div className="h-12 bg-gray-200 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !product) {
|
||||
return (
|
||||
<Container>
|
||||
<div className="text-center max-w-2xl mx-auto py-12">
|
||||
<h2 className="text-2xl font-bold mb-4">Product Not Found</h2>
|
||||
<p className="text-gray-600 mb-6">The product you're looking for doesn't exist.</p>
|
||||
<Button onClick={() => navigate('/shop')}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Shop
|
||||
</Button>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const currentPrice = selectedVariation?.price || product.price;
|
||||
const regularPrice = selectedVariation?.regular_price || product.regular_price;
|
||||
const isOnSale = selectedVariation ? parseFloat(selectedVariation.sale_price || '0') > 0 : product.on_sale;
|
||||
const stockStatus = selectedVariation?.in_stock !== undefined ? (selectedVariation.in_stock ? 'instock' : 'outofstock') : product.stock_status;
|
||||
|
||||
return (
|
||||
<div className="container-safe py-8">
|
||||
<h1 className="text-3xl font-bold mb-6">Product #{id}</h1>
|
||||
<p className="text-muted-foreground">Product detail coming soon...</p>
|
||||
</div>
|
||||
<Container>
|
||||
<div className="max-w-6xl mx-auto py-8">
|
||||
{/* Breadcrumb */}
|
||||
<nav className="mb-6 text-sm">
|
||||
<Link to="/shop" className="text-gray-600 hover:text-gray-900">
|
||||
Shop
|
||||
</Link>
|
||||
<span className="mx-2 text-gray-400">/</span>
|
||||
<span className="text-gray-900">{product.name}</span>
|
||||
</nav>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 lg:gap-12">
|
||||
{/* Product Images */}
|
||||
<div>
|
||||
{/* Main Image */}
|
||||
<div className="relative w-full aspect-square rounded-lg overflow-hidden bg-gray-100 mb-4">
|
||||
{selectedImage ? (
|
||||
<img
|
||||
src={selectedImage}
|
||||
alt={product.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-gray-400">
|
||||
No image
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Thumbnail Slider */}
|
||||
{product.images && product.images.length > 1 && (
|
||||
<div className="relative">
|
||||
{/* Left Arrow */}
|
||||
{product.images.length > 4 && (
|
||||
<button
|
||||
onClick={() => scrollThumbnails('left')}
|
||||
className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white shadow-lg rounded-full p-2 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Scrollable Thumbnails */}
|
||||
<div
|
||||
ref={thumbnailsRef}
|
||||
className="flex gap-2 overflow-x-auto scroll-smooth scrollbar-hide px-8"
|
||||
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
|
||||
>
|
||||
{product.images.map((img, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setSelectedImage(img)}
|
||||
className={`flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 transition-all ${
|
||||
selectedImage === img
|
||||
? 'border-primary ring-2 ring-primary ring-offset-2'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={img}
|
||||
alt={`${product.name} ${index + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Arrow */}
|
||||
{product.images.length > 4 && (
|
||||
<button
|
||||
onClick={() => scrollThumbnails('right')}
|
||||
className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white shadow-lg rounded-full p-2 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Product Info */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-4">{product.name}</h1>
|
||||
|
||||
{/* Price */}
|
||||
<div className="mb-6">
|
||||
{isOnSale && regularPrice ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-3xl font-bold text-red-600">
|
||||
{formatPrice(currentPrice)}
|
||||
</span>
|
||||
<span className="text-xl text-gray-400 line-through">
|
||||
{formatPrice(regularPrice)}
|
||||
</span>
|
||||
<span className="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-semibold">
|
||||
SALE
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-3xl font-bold">{formatPrice(currentPrice)}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stock Status */}
|
||||
<div className="mb-6">
|
||||
{stockStatus === 'instock' ? (
|
||||
<span className="text-green-600 font-medium flex items-center gap-2">
|
||||
<span className="w-2 h-2 bg-green-600 rounded-full"></span>
|
||||
In Stock
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-red-600 font-medium flex items-center gap-2">
|
||||
<span className="w-2 h-2 bg-red-600 rounded-full"></span>
|
||||
Out of Stock
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Short Description */}
|
||||
{product.short_description && (
|
||||
<div
|
||||
className="prose prose-sm mb-6 text-gray-600"
|
||||
dangerouslySetInnerHTML={{ __html: product.short_description }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Variation Selector */}
|
||||
{product.type === 'variable' && product.attributes && product.attributes.length > 0 && (
|
||||
<div className="mb-6 space-y-4">
|
||||
{product.attributes.map((attr: any, index: number) => (
|
||||
attr.variation && (
|
||||
<div key={index}>
|
||||
<label className="block font-medium mb-2 text-sm">{attr.name}:</label>
|
||||
<select
|
||||
value={selectedAttributes[attr.name] || ''}
|
||||
onChange={(e) => handleAttributeChange(attr.name, e.target.value)}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-primary focus:border-primary"
|
||||
>
|
||||
<option value="">Choose {attr.name}</option>
|
||||
{attr.options && attr.options.map((option: string, optIndex: number) => (
|
||||
<option key={optIndex} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quantity & Add to Cart */}
|
||||
{stockStatus === 'instock' && (
|
||||
<div className="space-y-4">
|
||||
{/* Quantity Selector */}
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="font-medium text-sm">Quantity:</label>
|
||||
<div className="flex items-center border border-gray-300 rounded-lg">
|
||||
<button
|
||||
onClick={() => setQuantity(Math.max(1, quantity - 1))}
|
||||
className="p-2.5 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
value={quantity}
|
||||
onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
|
||||
className="w-16 text-center border-x border-gray-300 py-2 focus:outline-none"
|
||||
min="1"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setQuantity(quantity + 1)}
|
||||
className="p-2.5 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
onClick={handleAddToCart}
|
||||
size="lg"
|
||||
className="flex-1 h-12 text-base"
|
||||
>
|
||||
<ShoppingCart className="mr-2 h-5 w-5" />
|
||||
Add to Cart
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="h-12 px-4"
|
||||
>
|
||||
<Heart className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Product Meta */}
|
||||
<div className="mt-8 pt-8 border-t border-gray-200 space-y-2 text-sm">
|
||||
{product.sku && (
|
||||
<div className="flex gap-2">
|
||||
<span className="text-gray-600">SKU:</span>
|
||||
<span className="font-medium">{product.sku}</span>
|
||||
</div>
|
||||
)}
|
||||
{product.categories && product.categories.length > 0 && (
|
||||
<div className="flex gap-2">
|
||||
<span className="text-gray-600">Categories:</span>
|
||||
<span className="font-medium">
|
||||
{product.categories.map((cat: any) => cat.name).join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Tabs */}
|
||||
<div className="mt-12">
|
||||
{/* Tab Headers */}
|
||||
<div className="border-b border-gray-200">
|
||||
<div className="flex gap-8">
|
||||
<button
|
||||
onClick={() => setActiveTab('description')}
|
||||
className={`pb-4 px-1 border-b-2 font-medium transition-colors ${
|
||||
activeTab === 'description'
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
Description
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('additional')}
|
||||
className={`pb-4 px-1 border-b-2 font-medium transition-colors ${
|
||||
activeTab === 'additional'
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
Additional Information
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('reviews')}
|
||||
className={`pb-4 px-1 border-b-2 font-medium transition-colors ${
|
||||
activeTab === 'reviews'
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
Reviews
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="py-8">
|
||||
{activeTab === 'description' && (
|
||||
<div>
|
||||
{product.description ? (
|
||||
<div
|
||||
className="prose prose-sm max-w-none"
|
||||
dangerouslySetInnerHTML={{ __html: product.description }}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-gray-600">No description available.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'additional' && (
|
||||
<div>
|
||||
{product.attributes && product.attributes.length > 0 ? (
|
||||
<table className="w-full">
|
||||
<tbody>
|
||||
{product.attributes.map((attr: any, index: number) => (
|
||||
<tr key={index} className="border-b border-gray-200">
|
||||
<td className="py-3 pr-4 font-medium text-gray-900 w-1/3">
|
||||
{attr.name}
|
||||
</td>
|
||||
<td className="py-3 text-gray-600">
|
||||
{Array.isArray(attr.options) ? attr.options.join(', ') : attr.options}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<p className="text-gray-600">No additional information available.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'reviews' && (
|
||||
<div>
|
||||
<p className="text-gray-600">Reviews coming soon...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user