Sezioni e impostazioni

Le sezioni sono componenti React con un contratto di impostazioni tipizzato. Il componente esporta un schema; la piattaforma lo valida al momento della build, e i commercianti modificano i valori nell’editor del tema Workspace — nessun cambiamento di codice, nessun redeploy.

Una sezione

app/sections/hero.tsx

import type { SectionSchema } from "@kotao/storefront-contracts";

export const schema: SectionSchema = {
  type: "hero",
  label: "Hero",
  settings: [
    { type: "text", name: "heading", label: "Heading", defaultValue: "Welcome" },
    { type: "richtext", name: "subheading", label: "Subheading" },
    { type: "image", name: "background", label: "Background image" },
  ],
};

export function Hero({ heading, subheading }: HeroProps) {
  /* … */
}

Lo schema rispecchia l’entrata della sezione in kotao.theme.json — la porta di validazione della build controlla entrambi contro SectionSchemaSchema da @kotao/storefront-contracts.

Tipi di input delle impostazioni

Valori semplici: text, textarea, richtext, number, boolean, color, color_scheme, date, font, url, link, file, video.

Valori strutturati: range (min/max/step), select / radio / segmented (opzioni), image (rapporto d’aspetto opzionale), e le misurazioni di commercio dimension, weight, money (valore + unità).

Lettura dei valori a runtime

Avvolgi l’app in ThemeSettingsProvider e leggi con gli hook da @kotao/storefront/react:

• useThemeSettings() — impostazioni globali del tema.
• useSectionSettings(sectionId) — valori di un’istanza di sezione.
• useGlobalThemeTokens() — token di design derivati dalle impostazioni.

Server-side, fetchThemeSettings / resolveThemeSettings (da @kotao/storefront/settings) caricano e fondono il documento dei valori con i tuoi default di schema.

Anteprima live

L’editor Workspace comunica con il tuo tema tramite il bridge editor (@kotao/storefront/editor) — lo scaffold lo collega, così le modifiche alle impostazioni appaiono in tempo reale nell’anteprima senza ricarica.