Hogyan működnek a témák

A téma TSX-komponensek és JSON-fájlok fastruktúrája. A szekciók és a blokkok a defineSection és a defineBlock függvénnyel deklarált React-komponensek. Az oldalak layoutjai, a beállításértékek és a szövegek mellettük lévő JSON-fájlokban találhatók. A kereskedők a témaszerkesztőben rendezik el a szekciókat; te azt írod meg, amire a témaszerkesztő nem képes.

Nyisd meg a kódszerkesztőtHivatkozás másolása

Minden bolt futtathat saját témakódot. Az adminfelületen nyisd meg a Webáruház → Témák menüpontot, majd válaszd a Szerkesztés a kódszerkesztőben lehetőséget a témánál. A témaszerkesztő felső sávja szintén a szerkesztőre mutat.

Ez egy böngészős kódszerkesztő a téma SDK TypeScript-kiegészítéseivel, Tailwind-tippekkel, mentéskori formázással, a Téma: Új szekció… paranccsal, Changes panellel és a korábbi mentések idővonalával. A mentések a téma piszkozatába kerülnek. A közzététel külön lépés, így az éles webáruház nem változik munka közben.

A téma a @poltura/theme-sdk/<module> route-ról importálja a Poltura API-kat. Saját fájljait, a Reactet és egy rögzített listán szereplő könyvtárakat is importálhat (például @radix-ui/*, lucide-react, motion, clsx és zod). Ha az ellenőrzés elutasít egy importálást, a hibaüzenet felsorolja az összes engedélyezett csomagot.

A téma fastruktúrájaHivatkozás másolása

theme.json                          név, schema_version, motor
settings/schema.json                minden mentéskor generálódik a src/settings.ts fájlból
settings/values.json                beállításértékek
settings/presets.json               stílus-presetek, amelyek között a kereskedő válthat
pages/<template>.json               szekciólayout sablononként (home, product, ...)
pages/custom/<name>.json            a kereskedő egyéni oldalainak layoutjai
layout/header.json, footer.json     header és lábléc szekciócsoportjai
emails/<slug>.json                  e-mail-tartalom
texts/<language>.json               a téma saját felületi szövegei, nyelvenként egy fájl
assets/                             a téma által szállított képek, betűkészletek és ikonok
og/<kind>.tsx                       megosztási képek sablonjai (opcionális)
src/settings.ts                     a téma beállítási panelje, a field.* használatával megírva
src/sections/, src/blocks/          szekció- és blokktípusok, fájlonként egy
src/layout/                         opcionális keretfelület kódban, például chat.tsx
src/templates/                      opcionális sablonok kódban, például pages/landing.tsx
src/components/, src/styles/        megosztott komponensek és CSS
src/preview-scenarios.ts            mintaadat-állapotok a témaszerkesztőhöz

Írj egy szekciótHivatkozás másolása

A src/sections/ vagy src/blocks/ alatti fájlok mindegyike egyszer deklarálja a típusát. A fordító futtatás nélkül olvassa be a deklarációkat, és ezekből buildeli a témaszerkesztő választóját, a szerkesztő layoutsémáját és a közzétételi ellenőrzéseket. Nincs regisztrációs fájl.

import { EditableText, defineSection, field } from '@poltura/theme-sdk/elements';
import { cn } from '@poltura/theme-sdk/ui';

export const uspStrip = defineSection({
  type: 'usp-strip',
  label: 'USP strip',
  icon: 'section',
  category: 'marketing',
  settings: { text: field.text({ label: 'Text', default: 'Free delivery over 50' }) },
  style: ['spacing', 'background', 'typography'],
  component: ({ attrs }) => (
    <section {...attrs} className={cn(attrs.className, 'py-6')}>
      <EditableText setting='text' as='p' className='theme-container text-center' />
    </section>
  ),
});

A komponens kibontja az attrs-t az egyetlen root elementjére. A kereskedő által választott stílusbeállítások így jutnak el hozzá. A Témaszekció készítése útmutató végigvezet a teljes folyamaton, a szerkesztőtől a közzétételig. A Szekciók, blokkok és elemstílusok bemutatja a beállításokat, a blokkokat és a stíluslehetőségeket.

Stílus-presetekHivatkozás másolása

A settings/presets.json fájl a téma legfeljebb nyolc elnevezett megjelenését sorolja fel. Minden preset rendelkezik egy id-val, egy címkével, egy-öt darab #rgb vagy #rrggbb színmintával a választóhoz, valamint a settings/values.json értékeinek egy részével:

{
  "$schema": "../.schemas/presets.schema.json",
  "presets": [
    {
      "id": "bright",
      "label": "Bright",
      "label_i18n": { "hu": "Élénk" },
      "swatches": ["#ff3d7f", "#111111", "#fafafa"],
      "values": { "colors.primary": "#ff3d7f", "colors_dark.primary": "#ff8fb1", "radius": "0" }
    }
  ]
}

A presetre váltás csak a piszkozat beállításait módosítja. Minden megjelenési beállítás átveszi a preset értékét, vagy annak hiányában a default értékét (sötét párjánál a dark_default értéket) a settings/schema.json fájlból, így az előző presetből semmi sem marad meg. A tartalmi beállítások és az összes oldal, layout, szöveg és e-mail változatlan marad. Az id-k az a-z, 0-9 és - karaktereket használhatják, a default pedig a gyári megjelenésnek van fenntartva.

A beállítás típusa dönti el, hogy megjelenésnek vagy tartalomnak számít-e. A színek, színátmenetek, betűtípusok, select mezők, radio buttonök, számok, csúszkák és checkboxok megjelenésnek számítanak. A szöveg, a képek, a linkek és a többi tartalomnak számít. Egy beállítás felülbírálhatja ezt a "content": true értékkel (egy „Cookie banner megjelenítése” checkbox a kereskedő döntése, nem a téma megjelenése) vagy a "content": false értékkel (egy CSS-hosszméretet tároló szöveges mező).

A preset értékének a settings/schema.json egyik megjelenési beállítására kell hivatkoznia, és illeszkednie kell annak típusához. Amint a téma preseteket is tartalmaz, minden megjelenési beállításhoz kötelező a default. Mentéskor, telepítéskor, közzétételkor és a téma buildelésekor a rendszer elutasítja az ezeket a szabályokat megsértő preset-fájlokat.

Ellenőrizd közzététel előttHivatkozás másolása

A kódszerkesztő minden mentéskor lefuttatja a témaellenőrzést, és annak eredményeit a Problems panelen listázza, sor- és oszlopszámmal ellátva. Ellenőrzi a layoutfájlokat, a szekciókat, a beállításokat, az importálásokat és a típusokat.

Ugyanez az ellenőrzés fut a poltura theme check <dir> paranccsal a témakönyvtáron. A --types <pack> kapcsoló a téma SDK típuscsomagjára mutat, a --json pedig egyetlen géppel olvasható sort ír ki. Ugyanezzel a parancssori eszközzel le is töltheted a témát egy mappába, feltöltheted a módosításaidat egy piszkozatba, előnézetet kérhetsz, közzétehetsz és visszavonhatsz módosításokat: lásd a Témaparancsok leírást. Még nincs npm-en

További lépésekHivatkozás másolása