Témaszekció készítése

Nyisd meg a témakódszerkesztőtHivatkozás másolása

Az adminfelületen nyisd meg a Webáruház → Témák menüpontot, és válaszd a Szerkesztés a kódszerkesztőben lehetőséget a módosítani kívánt témánál. A témaszerkesztő felső sávjából is elérheted a szerkesztőt.

A szerkesztő a téma piszkozatán dolgozik. A mentés soha nem módosítja az élő webáruházat. A közzététel egy külön lépés a végén.

Hozd létre a szekciófájltHivatkozás másolása

Nyisd meg a command palette-et (Cmd+Shift+P Macen, Ctrl+Shift+P más rendszereken), és futtasd a Téma: Új szekció… parancsot. Add neki a usp-strip nevet. A szerkesztő létrehozza az src/sections/usp-strip.tsx fájlt egy működő kiindulási alappal: egy címsorral, egy szöveggel, egy slottal a child blockok számára és a szabványos stíluslistával.

Nem kell semmit külön regisztrálnod. A témafordító mentéskor automatikusan megtalál minden defineSection hívást az src/sections/ mappában.

Írd meg a szekciótHivatkozás másolása

Cseréld le a fájl tartalmát a következőre:

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',
  description: 'One short line of reassurance',
  icon: 'section',
  category: 'marketing',
  settings: {
    text: field.text({ label: 'Text', default: 'Free delivery over 50' }),
    alignment: field.select({
      label: 'Alignment',
      options: [
        { value: 'left', label: 'Left' },
        { value: 'center', label: 'Center' },
      ],
      default: 'center',
    }),
  },
  style: ['spacing', 'background', 'typography', 'visibility'],
  component: ({ settings, attrs }) => (
    <section {...attrs} className={cn(attrs.className, 'py-6')}>
      <div className='theme-container'>
        <EditableText
          setting='text'
          as='p'
          className={cn('text-foreground', settings.alignment === 'center' && 'text-center')}
        />
      </div>
    </section>
  ),
});

Mit csinálnak az egyes részek:

• A type a szekció állandó kulcsa a téma oldalfájljaiban. Ne változtasd meg, miután a kereskedők használni kezdték a szekciót. Későbbi átnevezéshez add meg a régi kulcsot a renamedFrom mezőben.
• A label, description, icon és category értékeket látják a kereskedők a témaszerkesztő szekcióválasztójában. A marketing érték a Marketing kategóriába sorolja.
• A settings mezőkből jönnek létre a szekció beállítási paneljének mezői. Minden field.* építő tartalmaz egy címkét és egy alapértelmezett értéket, a komponens pedig már típusos formában kapja meg ezeket az értékeket a settings objektumban.
• A style határozza meg, milyen stílusvezérlőket kapnak a kereskedők. A platform az általuk választott beállításokat class-okká és attribútumokká alakítja az attrs objektumon.
• Az attrs objektumot pontosan egy root elemre kell kibontani, a cn(attrs.className, ...) segítségével összefűzve a saját class-aiddal. Enélkül a stílusvezérlők nem fognak működni.
• Az EditableText rendereli a text beállítást, így a kereskedők helyben szerkeszthetik azt a vásznon.

Minden mező és stílusvezérlő megtalálható a Szekciók, blokkok és elemstílusok oldalon.

Mentsd el és ellenőrizd a hibákatHivatkozás másolása

Mentsd el a fájlt. A szerkesztő minden mentéskor lefuttatja a témaellenőrzést, és sor, illetve oszlop szerint listázza a hibákat a Problems panelen. A fenti szekció hibátlanul átmegy az ellenőrzésen. Íme a leggyakrabban előforduló hibák és a kapott üzenetek (az utolsó rövidítve szerepel):

src/sections/usp-strip.tsx(26,19): [usage] reads setting "txt" no element definition declares for usp-strip (declared: text, alignment)
src/sections/usp-strip.tsx(18,7): [types] Type '"middle"' is not assignable to type '"center" | "left" | undefined'.
src/sections/usp-strip.tsx(5,3): [elements] type "UspStrip" must be kebab-case starting with a letter (bad-definition)
src/sections/usp-strip.tsx(2,21): [import] Theme file src/sections/usp-strip.tsx imports "lodash", which is outside the theme surface.

A teljes importálási hibaüzenet felsorolja, mit importálhat egy téma: a @poltura/theme-sdk/* modulokat, a téma saját fájljait, a Reactot, valamint egy rögzített könyvtárkészletet, például a @radix-ui/*, lucide-react, motion és clsx csomagokat.

Javítsd ki a hibákat, amíg a panel teljesen üres nem lesz.

Helyezd el a témaszerkesztőbenHivatkozás másolása

Az adminfelületen válaszd a Testreszabás lehetőséget a témánál. A kezdőlapon válaszd a Szekció hozzáadása lehetőséget, keresd meg a USP strip elemet a Marketing alatt, majd add hozzá. A következőket látod:

• „Free delivery over 50” a vásznon. Kattints rá, és írd át.
• Alignment a Left és Center opciókkal a szekció beállításaiban.
• Térköz, Háttér, Tipográfia és Láthatóság a stílusvezérlők között.

A témaszerkesztő az elhelyezést a piszkozat pages/home.json fájljába menti. A szekció kódja az src/sections/usp-strip.tsx fájlban marad.

Tedd közzéHivatkozás másolása

Válaszd a Közzététel lehetőséget a témaszerkesztőben (vagy a Közzététel gombot a kódszerkesztő állapotsorán). A piszkozat kódja és layoutja együtt válik élessé. Addig a vásárlók az előző verziót látják.