PRODUCTDETAIL COMPONENT
Full product page with image gallery, variant selection, quantity picker, and product information.
Full Product Detail Page
CODE EXAMPLE
product-detail-example.tsxtsx
1import { ProductDetail } from '@/components/fanbace/product-detail';2import { useProduct, useCart } from '@/lib/sdk';3 4export default function ProductPage({ productId }: Props) {5 const { product, loading } = useProduct(productId);6 const { addItem } = useCart();7 8 if (loading) return <ProductDetailSkeleton />;9 if (!product) return <ProductNotFound />;10 11 return (12 <ProductDetail13 product={product}14 onAddToCart={(variant, quantity) => {15 addItem({16 productId: product.id,17 variantId: variant.id,18 quantity,19 });20 }}21 onAddToWishlist={(product) => {22 // Handle wishlist23 }}24 showReviews25 showRelatedProducts26 />27 );28}PROPS
| Prop | Type | Default | Description |
|---|---|---|---|
| product | Product | - | Product data with variants and images |
| onAddToCart | (variant, qty) => void | - | Callback when add to cart is clicked |
| onAddToWishlist | (product) => void | - | Callback for wishlist button |
| showReviews | boolean | true | Show customer reviews section |
| showRelatedProducts | boolean | true | Show related products carousel |
