create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/src/sections/ProductDetails/blocks/AddToCartBlock.tsx

@@ -0,0 +1,15 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { AddToCart, type AddToCartProps } from '../../../components/commerce/AddToCart'
+import '../../../styles/blocks.css'
+
+/** 12C · add-to-cart block — always present; fills the remaining width (48 at 390). The section's buttonLabel overrides the label when set. */
+export const addToCartSchema = defineSchema({ kind: 'block', name: 'add-to-cart', family: '12C', parents: ['product-details'], title: 'Add to cart', description: 'The Add to cart button for the current product.', icon: '+', requiresContext: ['product'] }, { label: field.text('Add to cart') })
+export type AddToCartBlockSettings = SettingsOf<typeof addToCartSchema>
+
+export function AddToCartBlock({ label, ...rest }: AddToCartBlockSettings & Omit<AddToCartProps, 'label'>): JSX.Element {
+  return (
+    <div className="nv-block nv-pdp-atc" data-block="add-to-cart">
+      <AddToCart label={label} {...rest} />
+    </div>
+  )
+}

package/templates/nova/src/sections/ProductDetails/blocks/ProductDescription.tsx

@@ -0,0 +1,15 @@
+import { defineSchema } from '@tanqory/theme-kit'
+import { RichText } from '../../../components/content/RichText'
+import '../../../styles/blocks.css'
+
+/** 12C · product-description block — hidden when empty; a tab can use it as its source instead. */
+export const productDescriptionSchema = defineSchema({ kind: 'block', name: 'product-description', family: '12C', parents: ['product-details'], title: 'Product description', description: 'The description of the current product.', icon: '¶', requiresContext: ['product'] }, {})
+
+export function ProductDescriptionBlock({ html }: { html?: string }): JSX.Element | null {
+  if (!html?.replace(/<[^>]*>/g, '').trim()) return null
+  return (
+    <div className="nv-block" data-block="product-description">
+      <RichText html={html} />
+    </div>
+  )
+}

package/templates/nova/src/sections/ProductDetails/blocks/ProductInventory.tsx

@@ -0,0 +1,38 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { useNova } from '../../../styles/NovaProvider'
+import { fmt } from '../../../styles/strings'
+import type { ProductVariant } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+import './commerce-blocks.css'
+
+/**
+ * 12C · product-inventory block — a dot + text, never colour alone. Shown per
+ * the section's showInventory: always · low-only (at or below the threshold,
+ * warning colour: "Only 3 left in Queen") · never.
+ *
+ * Only from a count the platform sent: a variant without `quantityAvailable`
+ * (the merchant does not show stock levels, the variant is not tracked, or it
+ * keeps selling at zero) renders nothing at all — no "In stock" guess.
+ */
+export const productInventorySchema = defineSchema(
+  { kind: 'block', name: 'product-inventory', family: '12C', parents: ['product-details'], title: 'Product inventory', description: 'How many of the current product are in stock.', icon: '◔', requiresContext: ['product'] },
+  { inStockLabel: field.text('In stock'), soldOutLabel: field.text('Sold out') },
+)
+export type ProductInventorySettings = SettingsOf<typeof productInventorySchema>
+
+export function ProductInventoryBlock({ inStockLabel, soldOutLabel, variant, show, threshold, variantLabel }: ProductInventorySettings & { variant?: ProductVariant; show: 'always' | 'low-only' | 'never'; threshold: number; variantLabel?: string }): JSX.Element | null {
+  const { strings } = useNova()
+  if (show === 'never' || !variant) return null
+  const qty = variant.quantityAvailable
+  if (typeof qty !== 'number') return null
+  const soldOut = !variant.available
+  const low = !soldOut && qty > 0 && qty <= threshold
+  if (show === 'low-only' && !low) return null
+  const text = soldOut ? soldOutLabel : low ? (variantLabel ? fmt(strings.onlyLeftIn, { count: qty, variant: variantLabel }) : fmt(strings.onlyLeft, { count: qty })) : inStockLabel
+  return (
+    <p className="nv-block nv-pdp-stock" data-block="product-inventory" data-level={soldOut ? 'out' : low ? 'low' : 'in'}>
+      <span className="nv-pdp-stock__dot" aria-hidden />
+      {text}
+    </p>
+  )
+}

package/templates/nova/src/sections/ProductDetails/blocks/ProductPrice.tsx

@@ -0,0 +1,19 @@
+import { defineSchema } from '@tanqory/theme-kit'
+import { Price } from '../../../components/commerce/Price'
+import type { Money } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+import './commerce-blocks.css'
+
+/** 12C · product-price block — never empty. Sale: sale colour + struck compare-at + "Save" pill; the section's priceNote under it (13 muted). */
+export const productPriceSchema = defineSchema({ kind: 'block', name: 'product-price', family: '12C', parents: ['product-details'], title: 'Product price', description: 'The price of the current product.', icon: '$', requiresContext: ['product'] }, {})
+
+export function ProductPriceBlock({ price, compareAt, soldOut, note, taxNote }: { price: Money; compareAt?: Money | null; soldOut?: boolean; note?: string; taxNote?: string }): JSX.Element {
+  return (
+    <div className="nv-block nv-pdp-price" data-block="product-price">
+      <Price size="pdp" showSave price={price} compareAt={compareAt} soldOut={soldOut} />
+      {/* "Tax included." when the store's prices include tax (Settings › Taxes), in the note's style. */}
+      {taxNote && <p className="nv-pdp-price__note" data-kind="tax">{taxNote}</p>}
+      {note?.trim() && <p className="nv-pdp-price__note">{note}</p>}
+    </div>
+  )
+}

package/templates/nova/src/sections/ProductDetails/blocks/ProductSku.tsx

@@ -0,0 +1,15 @@
+import { defineSchema } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+import './commerce-blocks.css'
+
+/** 12C · product-sku block — mono 12 under the tabs; hidden when the variant has no SKU. */
+export const productSkuSchema = defineSchema({ kind: 'block', name: 'product-sku', family: '12C', parents: ['product-details'], title: 'Product SKU', description: 'The SKU of the current product.', icon: '⌗', requiresContext: ['product'] }, {})
+
+export function ProductSkuBlock({ sku, label = 'SKU' }: { sku?: string; label?: string }): JSX.Element | null {
+  if (!sku?.trim()) return null
+  return (
+    <p className="nv-block nv-pdp-sku" data-block="product-sku">
+      {label} {sku}
+    </p>
+  )
+}

package/templates/nova/src/sections/ProductDetails/blocks/ProductTitle.tsx

@@ -0,0 +1,17 @@
+import { defineSchema } from '@tanqory/theme-kit'
+import type { Product } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+import './commerce-blocks.css'
+
+/** 12C · product-title block — always the product title: h1 32 → 24 at 390, balanced; the vendor above when shown. */
+export const productTitleSchema = defineSchema({ kind: 'block', name: 'product-title', family: '12C', parents: ['product-details'], title: 'Product title', description: 'The name of the current product.', icon: 'T', requiresContext: ['product'] }, {})
+
+export function ProductTitleBlock({ product, showVendor, level = 1 }: { product: Product; showVendor?: boolean; level?: 1 | 2 }): JSX.Element {
+  const H = `h${level}` as 'h1'
+  return (
+    <div className="nv-block nv-pdp-title" data-block="product-title">
+      {showVendor && product.vendor && <p className="nv-pdp-title__vendor"><bdi>{product.vendor}</bdi></p>}
+      <H className="nv-pdp-title__text"><bdi>{product.title}</bdi></H>
+    </div>
+  )
+}

package/templates/nova/src/sections/ProductDetails/blocks/Quantity.tsx

@@ -0,0 +1,14 @@
+import { defineSchema } from '@tanqory/theme-kit'
+import { QuantitySelector } from '../../../components/commerce/QuantitySelector'
+import '../../../styles/blocks.css'
+
+/** 12C · quantity block — the stepper (52) beside the add button; hidden when the section's showQuantity is off. */
+export const quantitySchema = defineSchema({ kind: 'block', name: 'quantity', family: '12C', parents: ['product-details'], title: 'Quantity', description: 'A quantity stepper for the current product.', icon: '#', requiresContext: ['product'] }, {})
+
+export function QuantityBlock({ value, onChange, max, disabled }: { value: number; onChange: (n: number) => void; max?: number; disabled?: boolean }): JSX.Element {
+  return (
+    <div className="nv-block" data-block="quantity">
+      <QuantitySelector value={value} onChange={onChange} max={max} disabled={disabled} />
+    </div>
+  )
+}

package/templates/nova/src/sections/ProductDetails/blocks/Tab.tsx

@@ -0,0 +1,23 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/**
+ * 12C · tab block — one information panel under the buy box (0–6, 3
+ * recommended). source custom (its body) or product-description. Skipped when
+ * its body is empty. The section decides accordion vs tabs (accordionItems;
+ * always an accordion at 390) — the saved per-block `layout` is LEGACY-HIDDEN.
+ * Only the first open item is honoured.
+ */
+export const TAB_ICONS = ['none', 'truck', 'return', 'chat', 'shield', 'star', 'gift', 'leaf', 'clock', 'check', 'card'] as const
+export const tabSchema = defineSchema(
+  { kind: 'block', name: 'tab', family: '12C', parents: ['product-details'], title: 'Tab', description: 'One row of a product info accordion or tab strip.', icon: '▭' },
+  {
+    heading: field.text('', { extension: '12C tab: the panel title the canvas shows ("Materials & care"); the contract lists no title row — like the 12D accordion block it uses the shared heading. Blank + source product-description = "Description".' }),
+    source: field.select(['custom', 'product-description'], 'custom'),
+    body: field.richtext(''),
+    icon: field.select(TAB_ICONS, 'none'),
+    openByDefault: field.boolean(false),
+    layout: field.select(['accordion', 'tabs'], 'accordion', { legacyHidden: true }),
+  },
+)
+export type TabSettings = SettingsOf<typeof tabSchema>

package/templates/nova/src/sections/ProductDetails/blocks/VariantPickerBlock.tsx

@@ -0,0 +1,44 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { VariantPicker, type VariantStyle } from '../../../components/commerce/VariantPicker'
+import type { Product } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+import './commerce-blocks.css'
+
+/**
+ * 12C · variant-picker block — hidden for single-variant products. Buttons 44
+ * tall; swatches 44 targets. The size guide link opens the section's drawer
+ * (sizeGuidePage, else sizeGuideContent); hidden when neither exists.
+ */
+export const variantPickerSchema = defineSchema(
+  { kind: 'block', name: 'variant-picker', family: '12C', parents: ['product-details'], title: 'Variant picker', description: 'Size, colour and other options for the current product.', icon: '◧', requiresContext: ['product'] },
+  {
+    sizeGuideLabel: field.text('Size guide'),
+    sizeGuideContent: field.richtext(''),
+  },
+)
+export type VariantPickerBlockSettings = SettingsOf<typeof variantPickerSchema>
+
+export interface VariantPickerBlockProps extends VariantPickerBlockSettings {
+  product: Product
+  selected: Record<string, string>
+  onChange: (option: string, value: string) => void
+  style?: VariantStyle
+  /** A swatches block is present: colour options render there. */
+  withoutColour?: boolean
+  /** Presence shows the size guide link. */
+  onOpenSizeGuide?: () => void
+}
+
+export function VariantPickerBlock({ sizeGuideLabel, product, selected, onChange, style, withoutColour, onOpenSizeGuide }: VariantPickerBlockProps): JSX.Element | null {
+  const guide = onOpenSizeGuide && sizeGuideLabel.trim() ? (
+    <button type="button" className="nv-pdp-guide" onClick={onOpenSizeGuide}>
+      {sizeGuideLabel}
+    </button>
+  ) : undefined
+  const picker = <VariantPicker product={product} selected={selected} onChange={onChange} style={style} only={withoutColour ? 'other' : undefined} sizeGuide={guide} />
+  return picker ? (
+    <div className="nv-block" data-block="variant-picker">
+      {picker}
+    </div>
+  ) : null
+}

package/templates/nova/src/sections/ProductDetails/blocks/commerce-blocks.css

@@ -0,0 +1,13 @@
+/* 12C · product-details blocks. */
+.nv-pdp-title { display: grid; gap: var(--space-2); }
+.nv-pdp-title__vendor { font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-pdp-title__text { font-size: var(--pdp-title); line-height: 1.15; letter-spacing: var(--tracking-h2); font-weight: var(--weight-heading); text-wrap: balance; }
+.nv-root :lang(th) .nv-pdp-title__text, .nv-root:lang(th) .nv-pdp-title__text, .nv-root[dir='rtl'] .nv-pdp-title__text { letter-spacing: 0; line-height: var(--leading-h4); }
+.nv-pdp-price { display: grid; gap: var(--space-2); }
+.nv-pdp-price__note { font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-pdp-guide { min-height: var(--touch-target); margin-block: calc((var(--touch-target) - 1lh) / -2); color: var(--color-fg); font-size: var(--type-body-sm); font-weight: var(--weight-body); text-decoration: underline; text-underline-offset: var(--underline-offset); cursor: pointer; }
+.nv-pdp-stock { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-body-sm); color: var(--color-success); }
+.nv-pdp-stock__dot { width: 8px; height: 8px; border-radius: var(--radius-circle); background: currentColor; }
+.nv-pdp-stock[data-level='low'] { color: var(--color-warning-ink); }
+.nv-pdp-stock[data-level='out'] { color: var(--color-fg-muted); }
+.nv-pdp-sku { font-family: var(--font-mono); font-size: var(--type-label); color: var(--color-fg-muted); }

package/templates/nova/src/sections/ProductDetails/index.ts

@@ -0,0 +1,44 @@
+import { defineSection, imageFor, productFor, resolveSettings } from '@tanqory/theme-kit'
+import { ProductDetails, ProductDetailsBlock } from './ProductDetails'
+import { presets } from './presets'
+import { productDetailsSchema } from './schema'
+import { productDescriptionSchema } from './blocks/ProductDescription'
+import { productPriceSchema } from './blocks/ProductPrice'
+import { quantitySchema } from './blocks/Quantity'
+import { tabSchema } from './blocks/Tab'
+import { addToCartSchema } from './blocks/AddToCartBlock'
+import { variantPickerSchema } from './blocks/VariantPickerBlock'
+import { productInventorySchema } from './blocks/ProductInventory'
+import { productTitleSchema } from './blocks/ProductTitle'
+import { productSkuSchema } from './blocks/ProductSku'
+import { badgeSchema } from '../../components/commerce/blocks/Badge'
+import { swatchesSchema } from '../../components/commerce/blocks/Swatches'
+import { headingSchema } from '../../components/content/blocks/Heading'
+import { buttonSchema } from '../../components/content/blocks/Button'
+import { imageSchema } from '../../components/content/blocks/Image'
+import { textSchema } from '../../components/content/blocks/Text'
+
+export default defineSection({
+  id: 'product-details',
+  schema: productDetailsSchema,
+  blocks: [productDescriptionSchema, productPriceSchema, quantitySchema, tabSchema, addToCartSchema, variantPickerSchema, productInventorySchema, productTitleSchema, productSkuSchema, badgeSchema, swatchesSchema, headingSchema, buttonSchema, imageSchema, textSchema],
+  component: ProductDetails,
+  category: 'commerce',
+  zone: 'main',
+  title: 'Product details',
+  description: 'Gallery, price, variants and Add to cart for the current product.',
+  icon: '◉',
+  requiresContext: ['product'],
+  presets,
+  data: (node, store, { actions }) => {
+      const r = resolveSettings(productDetailsSchema, node.settings)
+      const { product, unavailable } = productFor(store, r.handles.product, store.currentProduct)
+      // Blocks keep their saved settings; the section resolves each block's schema.
+      const blocks = (node.blocks ?? []).filter((b) => (productDetailsSchema.blocks as readonly string[]).includes(b.type)).map((b) => ({ type: b.type, settings: b.settings, image: b.type === 'image' ? imageFor(store, b.settings?.image as string | undefined) : undefined })) as ProductDetailsBlock[]
+      return { ...r.settings, product, productUnavailable: unavailable, blocks, breadcrumbs: store.breadcrumbs, sizeGuide: r.handles.sizeGuidePage ? (store.pages?.[r.handles.sizeGuidePage] ?? null) : null, consentPending: Boolean(store.consentEnabled && store.consentAnswered === false), taxesIncluded: store.shop.taxesIncluded === true,
+      // `?variant=` opens the page on that variant in the first HTML (ignored unless it is this product's).
+      ...(store.currentVariantId && product && product.handle === store.currentProduct?.handle ? { initialVariantId: store.currentVariantId } : {}),
+      onAddToCart: (variant: { id: string }, quantity: number) => actions.cart.add(variant.id, quantity),
+    }
+  },
+})

package/templates/nova/src/sections/ProductDetails/presets.ts

@@ -0,0 +1,10 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Default product page
+  {"name": "pdp-standard", "label": "Standard", "settings": {"galleryLayout": "thumbnails-left", "mediaRatio": "portrait", "stickyPurchase": "both", "stickyAddToCart": "mobile", "variantStyle": "auto", "showInventory": "low-only"}, "blocks": [{"type": "product-title", "settings": {}}, {"type": "product-price", "settings": {}}, {"type": "variant-picker", "settings": {}}, {"type": "quantity", "settings": {}}, {"type": "add-to-cart", "settings": {}}, {"type": "product-inventory", "settings": {}}, {"type": "tab", "settings": {"source": "product-description", "openByDefault": true}}, {"type": "tab", "settings": {"source": "custom"}}, {"type": "badge", "settings": {"icon": "truck"}}, {"type": "badge", "settings": {"icon": "return"}}]},
+  // Image-rich products (fashion, home)
+  {"name": "pdp-editorial", "label": "Editorial", "settings": {"galleryLayout": "stacked", "mediaRatio": "portrait", "stickyPurchase": "desktop"}, "blocks": []},
+  // Simple products, few images
+  {"name": "pdp-compact", "label": "Compact", "settings": {"galleryLayout": "thumbnails-below", "mediaRatio": "square", "accordionItems": true}, "blocks": []},
+]

package/templates/nova/src/sections/ProductDetails/schema.ts

@@ -0,0 +1,44 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12C · 01 product-details — gallery left, purchase column right and sticky.
+ * The buy box is a FIXED hierarchy — title → price → options → quantity + add
+ * to cart → stock — whatever order the blocks are saved in; everything else
+ * (description, tabs, badges, SKU) is a block BELOW it, never between.
+ * At 390 the gallery swipes and a sticky bar keeps "Add to cart" in reach.
+ */
+export const productDetailsSchema = defineSchema(
+  {
+    kind: 'section',
+    name: 'product-details',
+    family: '12C',
+    blocks: ['product-title', 'product-price', 'variant-picker', 'swatches', 'quantity', 'add-to-cart', 'product-inventory', 'product-description', 'product-sku', 'tab', 'badge', 'heading', 'text', 'button', 'image'],
+  },
+  {
+    product: field.resource('product'),
+    galleryLayout: field.select(['thumbnails-left', 'thumbnails-below', 'stacked'], 'thumbnails-left'),
+    mediaRatio: field.select(['adapt', 'portrait', 'square'], 'portrait'),
+    enableZoom: field.boolean(true),
+    stickyPurchase: field.select(['both', 'desktop', 'mobile', 'none'], 'both'),
+    stickyAddToCart: field.select(['off', 'mobile', 'all'], 'mobile'),
+    stickyShowVariant: field.boolean(true),
+    showBreadcrumb: field.boolean(true),
+    variantStyle: field.select(['auto', 'buttons', 'swatches', 'select'], 'auto'),
+    showVendor: field.boolean(false),
+    showSku: field.boolean(false),
+    showInventory: field.select(['always', 'low-only', 'never'], 'low-only'),
+    lowStockThreshold: field.range(5, 1, 20, 1),
+    showQuantity: field.boolean(true),
+    accordionItems: field.boolean(true),
+    buttonLabel: field.text('Add to cart'),
+    priceNote: field.text(''),
+    sizeGuidePage: field.resource('page'),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('standard'),
+    spacingTop: shared.spacingTop('small'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    anchorId: shared.anchorId(),
+  },
+)

package/templates/nova/src/sections/ProductGrid/ProductGrid.tsx

@@ -0,0 +1,38 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { SectionHead } from '../../components/content/SectionHead'
+import { useNova } from '../../styles/NovaProvider'
+import { EditorFrame } from '../../components/states/EditorFrame'
+import type { Collection } from '@tanqory/theme-kit'
+import { sectionRootProps } from '../../components/section/shared'
+import { ProductListing, type ListingData } from '../../components/listing/ProductListing'
+import '../../components/section/shared.css'
+import '../../styles/sections/commerce.css'
+import { productGridSchema } from './schema'
+
+export type ProductGridSettings = SettingsOf<typeof productGridSchema>
+export interface ProductGridProps extends ProductGridSettings, ListingData {
+  collection?: Collection | null
+}
+
+export function ProductGrid(props: ProductGridProps): JSX.Element | null {
+  const { collection, subheading, showQuickAdd, contentAlignment, sectionWidth, heading, eyebrow, description, headerSize, products = [], state } = props
+  const { mode, strings } = useNova()
+  const empty = !collection || (!products.length && state !== 'loading' && state !== 'error' && !(props.facets ?? []).some((f) => f.values?.some((v) => v.active)))
+  if (empty) {
+    return mode === 'editor' ? (
+      <section {...sectionRootProps(props, 'product-grid')} className="nv-merch">
+        <div className="nv-section-container" data-width={sectionWidth}>
+          <EditorFrame section="product-grid" title={collection ? strings.editorNoProducts : strings.editorChooseCollection} hint={collection ? strings.editorNoProductsHint : strings.editorChooseCollectionHint} />
+        </div>
+      </section>
+    ) : null
+  }
+  return (
+    <section {...sectionRootProps(props, 'product-grid')} className="nv-merch">
+      <div className="nv-section-container" data-width={sectionWidth}>
+        <SectionHead heading={heading} eyebrow={eyebrow || subheading} description={description} headerSize={headerSize} align={contentAlignment} />
+        <ProductListing settings={props} data={{ ...props, shopAllHref: props.shopAllHref ?? collection?.url }} quickAdd={showQuickAdd} />
+      </div>
+    </section>
+  )
+}

package/templates/nova/src/sections/ProductGrid/index.ts

@@ -0,0 +1,25 @@
+import { collectionFor, defineSection, Product, resolveSettings } from '@tanqory/theme-kit'
+import { addProduct } from '../data'
+import { ProductGrid } from './ProductGrid'
+import { presets } from './presets'
+import { productGridSchema } from './schema'
+
+export default defineSection({
+  id: 'product-grid',
+  schema: productGridSchema,
+  component: ProductGrid,
+  category: 'commerce',
+  zone: 'main',
+  title: 'Product grid',
+  description: 'A grid of products you choose.',
+  icon: '▦',
+  presets,
+  listing: true,
+  data: (node, store, { actions }) => {
+      const r = resolveSettings(productGridSchema, node.settings)
+      const { collection } = collectionFor(store, r.handles.collection)
+      return { ...r.settings, collection, products: collection?.products, total: collection?.productsCount,
+      onQuickAdd: (product: Product) => addProduct(actions, product),
+    }
+  },
+})

package/templates/nova/src/sections/ProductGrid/presets.ts

@@ -0,0 +1,6 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // All products on a landing page
+  {"name": "grid-shop-all", "label": "Shop all", "settings": {"collection": "all", "filterLayout": "top-bar", "showQuickAdd": true}, "blocks": []},
+]

package/templates/nova/src/sections/ProductGrid/schema.ts

@@ -0,0 +1,37 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12C · 03 product-grid — the same browsing grid as main-collection, placed
+ * anywhere with a CHOSEN collection (not the route's), under the shared
+ * heading. Quick add is on by default here only (browsing landing pages):
+ * single-variant products add directly, others open a variant sheet (host).
+ * A chosen collection that is empty or missing → hidden (editor: setup).
+ */
+export const productGridSchema = defineSchema(
+  { kind: 'section', name: 'product-grid', family: '12C' },
+  {
+    subheading: field.text('', { legacyHidden: true }),
+    collection: field.resource('collection', 'all'),
+    columns: field.select(['3', '4'], '3'),
+    mobileColumns: field.select(['1', '2'], '2'),
+    filterLayout: field.select(['sidebar', 'top-bar', 'drawer', 'none'], 'sidebar'),
+    showSort: field.boolean(true),
+    showCount: field.boolean(true),
+    pagination: field.select(['load-more', 'pages'], 'load-more'),
+    productsPerPage: field.select(['12', '24', '48'], '24'),
+    showQuickAdd: field.boolean(true),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    contentAlignment: shared.contentAlignment('left'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    heading: shared.heading(),
+    eyebrow: shared.eyebrow(),
+    description: shared.description(),
+    headerSize: shared.headerSize('medium'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

package/templates/nova/src/sections/ProductRecommendations/ProductRecommendations.tsx

@@ -0,0 +1,45 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { CardRow } from '../../components/content/CardRow'
+import { ProductCard } from '../../components/commerce/ProductCard'
+import { useNova } from '../../styles/NovaProvider'
+import { EditorChip } from '../../components/states/EditorFrame'
+import type { Product } from '@tanqory/theme-kit'
+import { sectionRootProps } from '../../components/section/shared'
+import '../../components/section/shared.css'
+import '../../styles/sections/commerce.css'
+import { productRecommendationsSchema } from './schema'
+
+export type ProductRecommendationsSettings = SettingsOf<typeof productRecommendationsSchema>
+export interface ProductRecommendationsProps extends ProductRecommendationsSettings {
+  /** From the platform for the current product and intent. */
+  products?: Product[] | null
+  /** Editor preview when the platform returns nothing. */
+  sampleProducts?: Product[]
+}
+
+export function ProductRecommendations(props: ProductRecommendationsProps): JSX.Element | null {
+  const { limit, layout, intent, sectionWidth, heading, eyebrow, description, headerSize, products, sampleProducts = [] } = props
+  const { mode, strings } = useNova()
+  const real = (products ?? []).slice(0, limit)
+  const sample = real.length < 2 && mode === 'editor'
+  const list = sample ? sampleProducts.slice(0, limit) : real
+  if (list.length < 2) return null
+  // An empty heading falls back to the intent's own title.
+  const title = heading.trim() || (intent === 'complementary' ? strings.goesWellWith : strings.youMayAlsoLike)
+  return (
+    <section {...sectionRootProps(props, 'product-recommendations')} className="nv-merch" data-intent={intent}>
+      <div className="nv-section-container" data-width={sectionWidth}>
+        {sample && (
+          <p className="nv-merch__sample">
+            <EditorChip section="product-recommendations" /> {strings.editorSampleProducts}
+          </p>
+        )}
+        <CardRow eyebrow={eyebrow} heading={title} description={description} headerSize={headerSize} layout={layout} columns={4} carouselOnMobile>
+          {list.map((p) => (
+            <ProductCard key={p.id} product={p} />
+          ))}
+        </CardRow>
+      </div>
+    </section>
+  )
+}

package/templates/nova/src/sections/ProductRecommendations/index.ts

@@ -0,0 +1,20 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { ProductRecommendations } from './ProductRecommendations'
+import { presets } from './presets'
+import { productRecommendationsSchema } from './schema'
+
+export default defineSection({
+  id: 'product-recommendations',
+  schema: productRecommendationsSchema,
+  component: ProductRecommendations,
+  category: 'product',
+  zone: 'main',
+  title: 'Product recommendations',
+  description: 'Products related to the one being viewed.',
+  icon: '✧',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(productRecommendationsSchema, node.settings)
+      return { ...r.settings, products: store.recommendations?.[r.settings.intent] ?? null }
+  },
+})

package/templates/nova/src/sections/ProductRecommendations/presets.ts

@@ -0,0 +1,8 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Default PDP recommendations
+  {"name": "recs-carousel", "label": "You may also like", "settings": {"layout": "carousel", "limit": 4, "intent": "related"}, "blocks": []},
+  // Cart page or short catalogues
+  {"name": "recs-grid", "label": "Grid", "settings": {"layout": "grid", "limit": 4}, "blocks": []},
+]

package/templates/nova/src/sections/ProductRecommendations/schema.ts

@@ -0,0 +1,28 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12C · 07 product-recommendations — the data-driven row under the product
+ * page, on the shared carousel. It disappears for shoppers when there is
+ * nothing to show — never a "No recommendations" box; fewer than 2 → hidden.
+ * The editor previews sample products with the neutral chip.
+ * intent complementary ("Goes well with") is a DATA REQUIREMENT.
+ */
+export const productRecommendationsSchema = defineSchema(
+  { kind: 'section', name: 'product-recommendations', family: '12C' },
+  {
+    limit: field.range(4, 2, 8, 1),
+    layout: field.select(['grid', 'carousel'], 'carousel'),
+    intent: field.select(['related', 'complementary'], 'related'),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    heading: shared.heading(),
+    eyebrow: shared.eyebrow(),
+    description: shared.description(),
+    headerSize: shared.headerSize('medium'),
+    anchorId: shared.anchorId(),
+  },
+)