Product Detail Page
blockcommerceFlagship e-commerce product detail page with multi-angle gallery, finish & cable selectors, stock urgency counter, warranty upsell, flash sale countdown bar, frequently bought together bundle, technical specs sheet, customer reviews breakdown, and community Q&A.
Installation
$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/product-detail-page.json$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/product-detail-page.json$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/product-detail-page.json$bunx shadcn-svelte@latest add https://uipkge.dev/r/svelte/product-detail-page.jsonManifest:
https://uipkge.dev/r/svelte/product-detail-page.jsonInstalls to:src/lib/components/blocks/product-detail-page/Variants
Loading interactive previews…
Loading interactive previews…
Schema
Type aliases exported from this item's source. Use these to shape the data you pass in.
ProductVariantinterface ProductVariant {
id: string
name: string
colorHex: string
sku: string
inStock: boolean
stockCount: number
price: number
originalPrice: number
images: { id: string; url: string; alt: string }[]
}Files installed (3)
src/lib/components/blocks/product-detail-page/ProductDetailPage.svelte2.6 kB
<script lang="ts"> import { ChevronRight } from '@lucide/svelte' // Import sub-blocks to compose the canonical enterprise PDP import FlashSaleOfferBar from '$lib/components/blocks/flash-sale-offer-bar/FlashSaleOfferBar.svelte' import TechnicalSpecsSheet from '$lib/components/blocks/technical-specs-sheet/TechnicalSpecsSheet.svelte' import ProductQaCommunity from '$lib/components/blocks/product-qa-community/ProductQaCommunity.svelte' import CustomerReviews from '$lib/components/blocks/customer-reviews/CustomerReviews.svelte' import FrequentlyBoughtTogether from '$lib/components/blocks/frequently-bought-together/FrequentlyBoughtTogether.svelte' import ProductGalleryBuyBox from './ProductGalleryBuyBox.svelte' import { variants } from './product-variants' let selectedVariantId = $state(variants[0]!.id) const currentVariant = $derived(variants.find((v) => v.id === selectedVariantId) ?? variants[0]!) function handleSelectVariant(id: string) { selectedVariantId = id } </script> <div data-slot="product-detail-page" class="bg-background text-foreground w-full space-y-10"> <!-- Breadcrumb Navigation Bar --> <nav class="text-muted-foreground flex items-center gap-1.5 text-xs"> <span class="hover:text-foreground cursor-pointer">Storefront</span> <ChevronRight class="size-3.5" /> <span class="hover:text-foreground cursor-pointer">Pro Audio & Reference</span> <ChevronRight class="size-3.5" /> <span class="hover:text-foreground cursor-pointer">Planar Magnetic</span> <ChevronRight class="size-3.5" /> <span class="text-foreground font-medium">APX-950-PRO Reference Monitor</span> </nav> <!-- Main Hero Split: Gallery & Buy Box --> <ProductGalleryBuyBox {selectedVariantId} onSelectVariant={handleSelectVariant} /> <!-- Section 2: Flash Sale & Multi-Buy Tier Deal Bar --> <div class="space-y-3"> <FlashSaleOfferBar saleTitle="Audio Pro Week: Limited Master Batch 04" claimedPercent={82} itemsLeft={currentVariant.stockCount} /> </div> <!-- Section 3: Frequently Bought Together Bundle --> <div class="space-y-4"> <FrequentlyBoughtTogether /> </div> <!-- Section 4: Engineering & Technical Specifications Sheet --> <div class="space-y-4"> <TechnicalSpecsSheet modelNumber="APX-950-PRO" revision="Studio Edition 2026" /> </div> <!-- Section 5: Verified Customer Reviews & Photo Breakdown --> <div class="space-y-4"> <CustomerReviews /> </div> <!-- Section 6: Customer & Staff Q&A Community --> <div class="space-y-4"> <ProductQaCommunity productName="Apex Pro Reference Planar Headphones" /> </div> </div>src/lib/components/blocks/product-detail-page/ProductGalleryBuyBox.svelte12.9 kB
<script lang="ts" module> export interface ProductGalleryBuyBoxProps { selectedVariantId: string onSelectVariant: (id: string) => void } </script> <script lang="ts"> import { Star, ShieldCheck, Truck, RotateCcw, Heart, Share2, Plus, Minus, ShoppingCart, Zap, Flame, } from '@lucide/svelte' import { Badge } from '$lib/components/ui/badge' import { Button } from '$lib/components/ui/button' import { Input } from '$lib/components/ui/input' import { Separator } from '$lib/components/ui/separator' import { cn } from '$lib/utils' import { variants, type ProductVariant } from './product-variants' let { selectedVariantId, onSelectVariant }: ProductGalleryBuyBoxProps = $props() let activeImageIndex = $state(0) let quantity = $state(1) let selectedCable = $state<'4.4mm' | '3.5mm' | 'xlr'>('4.4mm') let isWishlisted = $state(false) let addExtendedWarranty = $state(true) let zipCode = $state('94103') const currentVariant = $derived(variants.find((v) => v.id === selectedVariantId) ?? variants[0]!) const activeImageUrl = $derived( currentVariant.images[activeImageIndex]?.url ?? currentVariant.images[0]!.url, ) const finalPrice = $derived.by(() => { let base = currentVariant.price * quantity if (addExtendedWarranty) base += 49 return base }) function selectVariant(v: ProductVariant) { onSelectVariant(v.id) activeImageIndex = 0 } function incrementQty() { if (quantity < currentVariant.stockCount) { quantity++ } } function decrementQty() { if (quantity > 1) { quantity-- } } function handleAddToCart() { alert(`Added ${quantity}x ${currentVariant.name} (${selectedCable}) to cart. Total: $${finalPrice}`) } function shareLink() { alert('Share link copied to clipboard!') } function handleExpressBuy() { alert(`Initiating Express Apple Pay checkout for $${finalPrice}...`) } const cableOptions = [ { value: '4.4mm', title: '4.4mm Balanced', detail: 'Pentaconn TRRRS' }, { value: '3.5mm', title: '3.5mm SE + 6.35mm', detail: 'Screw Adapter' }, { value: 'xlr', title: '4-Pin XLR Pro', detail: 'Neutrik Studio' }, ] as const </script> <div class="grid grid-cols-1 gap-8 lg:grid-cols-12 lg:gap-12"> <!-- Left Column: Interactive Image Gallery (7 Cols) --> <div class="space-y-4 lg:col-span-7"> <!-- Main Large Showcase Image --> <div class="border-border bg-muted/30 relative aspect-4/3 w-full overflow-hidden rounded-xl border shadow-xs"> <img src={activeImageUrl} alt={currentVariant.name} class="size-full object-cover transition-transform duration-300 hover:scale-105" /> <!-- Overlaid Badges --> <div class="absolute top-3 left-3 flex flex-wrap gap-1.5"> <Badge variant="default" class="h-6 font-mono text-xs font-semibold uppercase"> 2026 Flagship </Badge> <Badge variant="secondary" class="text-success h-6 font-mono text-xs"> Laboratory Calibrated </Badge> </div> <!-- Quick Action Floating Buttons --> <div class="absolute top-3 right-3 flex flex-col gap-2"> <button type="button" class={cn( 'border-border bg-background/90 flex size-8 items-center justify-center rounded-full border shadow-2xs backdrop-blur-xs transition-colors', isWishlisted ? 'text-destructive' : 'text-muted-foreground hover:text-foreground', )} onclick={() => (isWishlisted = !isWishlisted)} > <Heart class={isWishlisted ? 'size-4 fill-current' : 'size-4'} /> </button> <button type="button" class="border-border bg-background/90 text-muted-foreground hover:text-foreground flex size-8 items-center justify-center rounded-full border shadow-2xs backdrop-blur-xs transition-colors" onclick={shareLink} > <Share2 class="size-4" /> </button> </div> </div> <!-- Thumbnail Selector Row --> <div class="grid grid-cols-4 gap-3"> {#each currentVariant.images as img, idx (img.id)} <button type="button" class={cn( 'bg-muted/20 relative aspect-4/3 overflow-hidden rounded-lg border transition-colors', activeImageIndex === idx ? 'border-primary ring-primary/40 ring-2' : 'border-border opacity-70 hover:opacity-100', )} onclick={() => (activeImageIndex = idx)} > <img src={img.url} alt={img.alt} class="size-full object-cover" /> </button> {/each} </div> <!-- Value Assurance Micro-Bar --> <div class="border-border bg-muted/20 grid grid-cols-3 gap-3 rounded-lg border p-3 text-center text-xs"> <div class="flex flex-col items-center gap-1"> <Truck class="text-primary size-4" /> <span class="text-foreground font-medium">Free 2-Day Air</span> <span class="text-muted-foreground text-xs">Orders over $150</span> </div> <div class="border-border/80 flex flex-col items-center gap-1 border-x px-2"> <RotateCcw class="text-success size-4" /> <span class="text-foreground font-medium">45-Day Trial</span> <span class="text-muted-foreground text-xs">Zero-risk return</span> </div> <div class="flex flex-col items-center gap-1"> <ShieldCheck class="text-info size-4" /> <span class="text-foreground font-medium">3-Yr Warranty</span> <span class="text-muted-foreground text-xs">Direct factory support</span> </div> </div> </div> <!-- Right Column: Buy Box & Product Configuration (5 Cols) --> <div class="space-y-6 lg:col-span-5"> <!-- Title & Rating Header --> <div class="space-y-2"> <div class="text-muted-foreground flex items-center gap-2 font-mono text-xs"> <span>SKU: {currentVariant.sku}</span> <span>·</span> <span>Made in Germany</span> </div> <h1 class="text-foreground text-2xl font-bold tracking-tight sm:text-3xl"> Apex Pro Reference Planar Studio Headphones </h1> <!-- Reviews summary badge --> <div class="flex items-center gap-2 pt-1 text-xs"> <div class="text-warning flex items-center gap-1"> <Star class="fill-warning size-3.5" /> <Star class="fill-warning size-3.5" /> <Star class="fill-warning size-3.5" /> <Star class="fill-warning size-3.5" /> <Star class="fill-warning size-3.5" /> </div> <span class="text-foreground font-semibold">4.9</span> <span class="text-muted-foreground">(342 Verified Mastering Reviews)</span> </div> </div> <Separator /> <!-- Price Section with Live Discount --> <div class="space-y-1.5"> <div class="flex items-baseline gap-3"> <span class="text-foreground text-3xl font-extrabold tracking-tight"> ${currentVariant.price} </span> <span class="text-muted-foreground text-base line-through"> ${currentVariant.originalPrice} </span> <Badge variant="secondary" class="text-success font-mono text-xs font-bold"> Save ${currentVariant.originalPrice - currentVariant.price} (20% OFF) </Badge> </div> <p class="text-muted-foreground text-xs"> Interest-free installments of ${(currentVariant.price / 4).toFixed(2)}/mo with Affirm or Klarna. </p> </div> <!-- Variant Color Selector --> <div class="space-y-2.5"> <div class="flex items-center justify-between text-xs"> <span class="text-foreground font-medium">Finish / Enclosure:</span> <span class="text-muted-foreground font-mono font-semibold">{currentVariant.name}</span> </div> <div class="flex items-center gap-3"> {#each variants as v (v.id)} <button type="button" aria-label={v.name} class={cn( 'group relative flex size-9 items-center justify-center rounded-full border transition-colors', selectedVariantId === v.id ? 'border-primary ring-primary ring-offset-background ring-2 ring-offset-2' : 'border-border hover:border-muted-foreground', )} onclick={() => selectVariant(v)} > <span class="size-6 rounded-full border border-black/10 shadow-2xs" style="background-color: {v.colorHex}" ></span> </button> {/each} </div> </div> <!-- Cable Termination Selector --> <div class="space-y-2.5"> <div class="flex items-center justify-between text-xs"> <span class="text-foreground font-medium">Primary Studio Cable Termination:</span> <span class="text-primary font-mono text-xs">Included in package</span> </div> <div class="grid grid-cols-3 gap-2 text-xs"> {#each cableOptions as cable (cable.value)} <button type="button" class={cn( 'rounded-lg border p-2.5 text-center transition-colors', selectedCable === cable.value ? 'border-primary bg-primary/5 text-primary ring-primary font-semibold ring-1' : 'border-border bg-card text-foreground hover:bg-muted/40', )} onclick={() => (selectedCable = cable.value)} > <div class="font-mono text-xs font-semibold">{cable.title}</div> <div class="text-muted-foreground text-xs">{cable.detail}</div> </button> {/each} </div> </div> <!-- Add-on Warranty Checkbox --> <label class="border-border bg-muted/20 hover:bg-muted/30 flex cursor-pointer items-start gap-3 rounded-lg border p-3 text-xs transition-colors" > <input bind:checked={addExtendedWarranty} type="checkbox" class="border-border text-primary focus:ring-primary mt-0.5 size-4 rounded" /> <div class="space-y-0.5"> <div class="flex items-center justify-between"> <span class="text-foreground font-semibold">Add 3-Year Apex Care+ Accidental Protection</span> <span class="text-foreground font-mono font-bold">+$49.00</span> </div> <p class="text-muted-foreground text-xs"> Covers accidental drops, driver voice-coil failure, and free earpad replacement. </p> </div> </label> <!-- Stock Telemetry & Urgency Notice --> <div class="space-y-1.5 rounded-lg border border-orange-500/30 bg-orange-500/5 p-3 text-xs"> <div class="flex items-center justify-between"> <div class="flex items-center gap-1.5 font-semibold text-orange-600 dark:text-orange-400"> <Flame class="size-3.5 fill-current" /> <span>Fulfillment Hub Stock Level</span> </div> <span class="text-foreground font-mono font-bold">{currentVariant.stockCount} units remaining</span> </div> <p class="text-muted-foreground text-xs"> High demand: 18 sound engineers have this item in their active checkout carts. </p> </div> <!-- Quantity & Add to Cart Controls --> <div class="space-y-3 pt-2"> <div class="flex items-center gap-3"> <!-- Stepper --> <div class="border-border bg-background flex h-10 items-center rounded-lg border shadow-2xs"> <button type="button" class="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center" onclick={decrementQty} > <Minus class="size-3.5" /> </button> <span class="text-foreground w-8 text-center font-mono text-xs font-semibold">{quantity}</span> <button type="button" class="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center" onclick={incrementQty} > <Plus class="size-3.5" /> </button> </div> <!-- Primary Add to Cart --> <Button class="h-10 flex-1 gap-2 font-medium shadow-xs" onclick={handleAddToCart}> <ShoppingCart class="size-4" /> <span>Add to Cart · ${finalPrice}</span> </Button> </div> <!-- 1-Click Apple Pay / Instant Buy --> <Button variant="secondary" class="border-border h-10 w-full gap-2 border font-semibold shadow-2xs" onclick={handleExpressBuy} > <Zap class="fill-warning text-warning size-4" /> <span>Instant 1-Click Checkout (Apple Pay / G-Pay)</span> </Button> </div> <!-- Shipping Zip Code Estimator --> <div class="border-border bg-muted/20 flex items-center gap-2 rounded-lg border p-2.5 text-xs"> <Truck class="text-muted-foreground size-4 shrink-0" /> <span class="text-muted-foreground">Deliver to:</span> <Input bind:value={zipCode} maxlength={5} class="h-7 w-20 text-center font-mono text-xs" /> <span class="text-foreground font-medium">Fast Delivery: <strong>Tomorrow, 2:00 PM</strong></span> </div> </div> </div>src/lib/components/blocks/product-detail-page/product-variants.ts2.8 kB
export interface ProductVariant { id: string name: string colorHex: string sku: string inStock: boolean stockCount: number price: number originalPrice: number images: { id: string; url: string; alt: string }[] } export const variants: ProductVariant[] = [ { id: 'var-black', name: 'Obsidian Matte Black', colorHex: '#18181b', sku: 'APX-950-BLK', inStock: true, stockCount: 14, price: 599, originalPrice: 749, images: [ { id: 'img-1', url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Reference Studio Headphones on Wood Desk', }, { id: 'img-2', url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro CNC Aluminum Driver Open Back View', }, { id: 'img-3', url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Lambskin Magnetic Earpads Angle', }, { id: 'img-4', url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Studio Audio Cable Interconnects', }, ], }, { id: 'var-silver', name: 'Lunar Silver Aluminum', colorHex: '#94a3b8', sku: 'APX-950-SLV', inStock: true, stockCount: 6, price: 599, originalPrice: 749, images: [ { id: 'img-2', url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Lunar Silver Open Back View', }, { id: 'img-1', url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Silver Edition Desk Shot', }, { id: 'img-3', url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Earpads Detail', }, ], }, { id: 'var-navy', name: 'Midnight Studio Navy', colorHex: '#1e293b', sku: 'APX-950-NVY', inStock: true, stockCount: 3, price: 629, originalPrice: 779, images: [ { id: 'img-3', url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Midnight Navy Studio Edition', }, { id: 'img-1', url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Navy Perspective', }, { id: 'img-2', url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Navy Driver Housing', }, ], }, ]
Raw manifest:https://uipkge.dev/r/svelte/product-detail-page.json