Developer Docs

Fashion Vertical

Frontend implementation for fashion-specific UX: 2D variant grids (size × color), interactive size charts, editorial lookbooks with "Shop the Look", and product collections (seasonal drops, capsule, permanent ranges).

🏗️ Architecture

Backend (Ready)                    Frontend (This Feature)
──────────────────                 ─────────────────────────
products subgraph                  VariantGrid.svelte
  ├─ SizeChart/SizeChartEntry      SizeChartModal.svelte
  ├─ Product.sizeChart             fashionUtils (catalogUtils.ts)
  ├─ Product.fitGuide              Item detail page enhancements
  └─ ProductVariant.colorHex

malets subgraph                    LookbookGallery.svelte
  ├─ Lookbook entity               (storefront widget)
  └─ LookbookOutfit → productIds

products subgraph                  CollectionBrowser.svelte
  ├─ ProductCollection entity      (storefront widget)
  └─ CollectionType enum           Catalog page ?collection= filter

🧩 Components

VariantGrid

File: src/lib/components/catalog/VariantGrid.svelte

2D size × color matrix replacing flat VariantSelector chips for fashion products. Automatically detected when a product has both Size and Color variant options.

Prop Type Default Description
variants VariantInfo[] [] Flat list of product variants
selectedVariantId string '' Currently selected variant ID
basePrice number 0 Base price in cents for delta display
currency string 'USD' Price formatting currency code
onchange (id: string) => void noop Callback when selection changes

Behavior:

  • Renders a color swatch row using colorHex from backend (CSS name fallback)
  • Renders a size chip row with availability cross-referenced per combo
  • Sold-out combos are visually disabled with strikethrough/opacity
  • Missing combos (sparse grid) are hidden/disabled
  • Used on the item detail page when buildVariantMatrix() returns non-null

SizeChartModal

File: src/lib/components/catalog/SizeChartModal.svelte

Accessible modal with measurement table, unit toggle, and active-size highlighting.

Prop Type Default Description
show boolean false Visibility control
chartName string '' Chart title (e.g. "Women's Tops")
sizeSystem SizeSystem 'UNIVERSAL' Regional standard badge
entries SizeChartEntry[] [] Measurement rows
activeSize string '' Currently selected size for highlighting
fitGuide string '' Fit guide text shown as banner
onclose () => void required Close callback

Features:

  • cm ↔ in toggle (client-side conversion via convertMeasurement())
  • Only shows columns that have data (via getSizeChartColumns())
  • Active row highlighted with accent color
  • Closes via backdrop click, ESC key, or close button
  • Accessible with role="dialog", aria-modal="true"

LookbookGallery

File: src/lib/components/fashion/LookbookGallery.svelte

Editorial lookbook widget for fashion malet storefronts. Registered as the LOOKBOOK_GALLERY layout slot type.

Prop Type Description
malet MaletData Full malet object (used for ID and handle)
config any Optional widget configuration

Features:

  • Card grid with hero images, titles, season tags, and outfit counts
  • Click expands to show outfits list inline
  • Each outfit has expandable "Shop this Look" with linked products
  • Products loaded lazily via federated product IDs
  • Empty state: renders nothing if no published lookbooks

CollectionBrowser

File: src/lib/components/fashion/CollectionBrowser.svelte

Product collection cards for the storefront. Registered as the COLLECTION_BROWSER layout slot type.

Prop Type Description
malet MaletData Full malet object
config any Optional widget configuration

Features:

  • Responsive card grid with cover images
  • Type badges: 🍂 Seasonal, 💎 Capsule, ♾️ Permanent
  • Pre-order indicator
  • "Ending Soon" warning for collections expiring within 7 days
  • Links to /{malet}/catalog?collection={slug} for inline filtering

📊 GraphQL Queries

Fashion Queries (`src/lib/queries/fashion.ts`)

Query Variables Returns
GET_LOOKBOOKS maletId, status? LookbookNode[]
GET_LOOKBOOK_BY_SLUG maletId, slug LookbookNode | null
GET_ACTIVE_COLLECTIONS maletId ProductCollectionNode[]
GET_COLLECTION_BY_SLUG maletId, slug ProductCollectionNode | null

Extended Item Detail Queries (`src/lib/queries/community.ts`)

Added to GET_ITEM_DETAILS and GET_ITEM_DETAILS_BY_SLUG:

  • sizeChart { name sizeSystem entries { size bust waist hips length shoulderWidth sleeveLength unit } }
  • fitGuide
  • Variant fields: colorHex, image { url alt }

🔧 Utility Functions

Added to src/lib/utils/catalogUtils.ts:

Function Signature Description
convertMeasurement (value, fromUnit, toUnit) → number cm ↔ in conversion, rounded to 1dp
buildVariantMatrix (variants) → VariantMatrix | null 2D size × color grid construction
getSizeChartColumns (entries) → MeasurementKey[] Detect which measurement columns have data

Constants exported: SIZE_CHART_MEASUREMENT_KEYS, MEASUREMENT_LABELS

📂 File Reference

File Purpose
src/lib/queries/fashion.ts Lookbook + Collection GraphQL queries and types
src/lib/queries/community.ts Extended item detail queries (sizeChart, fitGuide, colorHex)
src/lib/utils/catalogUtils.ts Fashion utility functions (convertMeasurement, buildVariantMatrix, getSizeChartColumns)
src/lib/components/catalog/VariantGrid.svelte 2D size × color variant matrix
src/lib/components/catalog/SizeChartModal.svelte Size chart modal with unit toggle
src/lib/components/fashion/LookbookGallery.svelte Lookbook storefront widget
src/lib/components/fashion/CollectionBrowser.svelte Collection browser storefront widget
src/lib/components/storefront/WidgetRegistry.svelte Widget registration (LOOKBOOK_GALLERY, COLLECTION_BROWSER)
src/lib/queries/malet.ts LayoutSlotType extended with new widget types
src/routes/[malet]/item/[id]/+page.svelte Item detail page (VariantGrid, SizeChartModal, fitGuide, zoom)
tests/fashionUtils.test.ts Unit tests (23 test cases)
tests/fashion.test.ts E2E Playwright tests