# Product Detail Experience ## Scope Builds the product detail page (PDP) on top of `07`'s design system and `09`'s discovery system, using Apple's PDP as a storytelling/configuration reference (a sticky purchase panel beside a scrolling story, not a form) — not cloned, and not assuming every merchant sells configurable electronics the way Apple does. ## One page, four product shapes Catalog has no explicit `product_type` column — adding one would mean a migration and a merchant-facing type picker neither asked for yet. Instead, `storefront/src/pages/productType.ts` **infers** a shape from data that already exists: - **Grouped** — `bundleComponents.length > 0`. The product itself represents a curated set of other products at one price (already modeled: `CatalogService::getBundleComponents`/`setBundleComponents`). - **Configurable** — more than one variant, and at least two variants disagree on the same `attributes` key (e.g. every variant has a `Color`, and more than one distinct color exists). Apple's step-by-step picker (color swatches, then storage pills) only makes sense once there's more than one independent choice to make. - **Variable** — more than one variant, but not "configurable" by the rule above — a flat list of options (e.g. differently-priced pre-built configs, or variants with no `attributes` at all, which is every seeded product today). - **Simple** — exactly one variant. No picker at all; just price, quantity, buy. This is why `attributes` (below) matters: it's the one signal that separates "configurable" from "variable," and until a merchant actually sets it, every multi-variant product reads as "variable" — an honest default, not a broken configurator. ## What closes a real gap vs. what's still honestly empty `catalog_product_variant.attributes` (free-form JSON) has been in the schema and the *admin* create/update-variant API since day one — nothing ever read it back. This phase adds it to `CatalogService::listVariantsForProduct()`'s return, so it now flows all the way to the storefront. Two sections depend on it: - **Specifications** (`components/Specifications.tsx`) — renders the selected variant's `attributes` as a key/value table. Renders nothing if `attributes` is empty — no fabricated spec sheet. - **Variant configurator** (`components/VariantSelector.tsx`) — groups variants by shared attribute keys into Apple-style per-attribute pickers when attributes exist; falls back to today's flat `