Előnézeti állapotok a témaszerkesztőben

A kereskedők nemcsak élő adatokra terveznek oldalakat, hanem különböző állapotokra is: üres kosárra, még rendelés nélküli vásárlóra vagy értékelések nélküli termékre. A témaszerkesztő eszköztárában található Adatok gombbal domainek szerint válthatsz ezek között az állapotok között, a szerkesztőfelület pedig újratöltés nélkül, helyben frissül. A platform biztosít domaineket a saját adataihoz (kosár, rendelések, címek), és a témád is definiálhat sajátokat bármely komponenshez.

A kereskedői nézetHivatkozás másolása

Az előnézet eszköztára az alábbi kapcsolódó vezérlőket tartalmazza:

• A Bejelentkezett / Vendég beállítja a szerkesztőfelület bejelentkezési állapotát. A Vendég még a valós sessiont is elrejti, így a kijelentkezett oldalak is tervezhetők maradnak. A Bejelentkezett egy mintavásárlóval pótolja a hiányzó sessiont, így a fiókoldalak megfelelően megjelennek.
• Az Adatok menüben minden domainhez külön sor tartozik. Először a platform sorai jelennek meg, a téma saját sorai pedig A témádból csoport alatt láthatók. A gombon megjelenő pont jelzi, ha az alapértelmezettől eltérő beállítást választottál. Azok a sorok, amelyek csak bejelentkezett vásárlókra vonatkoznak, Vendég módban halványítva jelennek meg.

A kiválasztott beállítások megmaradnak, miközben a kereskedő navigál a felületen, a módosítások pedig azonnal érvénybe lépnek: a téma domainjei re-renderelődnek, a platform domainjei pedig újratöltik az oldal adatait.

Beépített domainekHivatkozás másolása

A platform ezeket a szerveren alkalmazza, így a komponenseid a szokásos SDK-hookokon keresztül kapják meg az előkészített adatokat (például egy üres rendeléslistát vagy egy mintakosarat), külön saját kód nélkül.

Saját domainek definiálásaHivatkozás másolása

Hozz létre egy src/preview-scenarios.ts fájlt a témádban, és exportáld a domaineket defaultként:

import { definePreviewScenarios } from '@poltura/theme-sdk/editor';

export default definePreviewScenarios([
  {
    key: 'reviews',
    label: 'Reviews',
    options: [
      { value: 'live', label: 'Live data' },
      { value: 'sample', label: 'Sample' },
      { value: 'empty', label: 'None' },
    ],
  },
]);

Mindig az első opció az alapértelmezett. Állítsd be a requiresAuth: true értéket egy domainen, ha szeretnéd, hogy a sora halványítva jelenjen meg, amikor a kereskedő a Vendég állapotot tekinti meg.

Az aktív állapot beolvasása egy komponensbenHivatkozás másolása

import { usePreviewScenario } from '@poltura/theme-sdk/editor';

export function ReviewCount({ count }: { count: number }) {
  const shown = usePreviewScenario('reviews') === 'empty' ? 0 : count;
  return <p>{shown} reviews</p>;
}

A témaszerkesztőn kívül a hook mindig a domain alapértelmezett értékét adja vissza (az első opciót), így a rá épülő elágazások soha nem változtatják meg azt, amit a vásárlók látnak. Nincs szükség külön feltételes védelemre körülötte.

A beépített témák működő példát is tartalmaznak erre. Mindegyik definiálja a reviews domaint az src/preview-scenarios.ts fájlban. A @poltura/theme-sdk/product csomagból származó Reviews beolvassa ezt, és élő, minta- vagy üres értékeléseket jelenít meg. A Catalog, Editorial, Essential, Launch és Pop témák az src/blocks/product-reviews.tsx fájlban renderelik.

SzabályokHivatkozás másolása

A szabályokat megsértő bejegyzéseket a rendszer hibaüzenet nélkül kihagyja, így a választófelület soha nem hibásodik meg:

• A kulcsok és opcióértékek kisbetűket, számjegyeket, - és _ karaktereket használhatnak, betűvel vagy számjeggyel kell kezdődniük, és legfeljebb 32 karakter hosszúak lehetnek.
• A kulcsnak egyedinek kell lennie, és nem egyezhet meg a beépített kulcsokkal (cart, orders, addresses).
• Egy domainnek legalább két érvényes opcióval kell rendelkeznie. A hatodik utáni opciókat a rendszer figyelmen kívül hagyja.
• A rendszer csak az első 12 domaint veszi figyelembe.
• A rendszer 40 karakter után levágja a címkéket.

Hogyan működik?Hivatkozás másolása

A webáruház egyesíti a saját deklarációidat a platform domainjeivel, és átadja őket a témaszerkesztőnek, amikor a szerkesztőfelület betöltődik. A választófelület mindent megjelenít, ami érkezik, így egy új domainhez nincs szükség módosításra az adminfelületen. A kiválasztott opciókat a preview_data URL-paraméter továbbítja, amely végigkíséri a kereskedőt a szerkesztőfelületen. Amikor egy beállítás megváltozik, a témaszerkesztő jelzi a szerkesztőfelületnek, amely helyben átírja ezt a paramétert, és újratölti az adatokat. Maga az oldal soha nem töltődik újra.

A mintaadatok csak a témaszerkesztő előnézetében jelennek meg. Ha egy vásárló hozzáadja a preview_data paramétert egy webáruház URL-jéhez, élő adatokat kap.

Következő lépésekHivatkozás másolása

• A kosár gomb testreszabása: a headerben lévő kosár stílusának módosítása, áthelyezése vagy cseréje.
• editor referencia: definePreviewScenarios, usePreviewScenario és useIsEditing.