A chrome stabil class-ai

A platform alapértelmezett elemeket biztosít a márkaelemekhez, a kosárhoz, a felhasználói menühöz, a promóciós sávhoz, a chathez, a nyelvi bannerhez és a product cardokhoz. A témák az SDK-n keresztül vagy a fejlécükben és láblécükben található platformblokkok segítségével renderelik ezeket. Ezeknek az elemeknek a stílusát az alábbi stabil class-okkal szabhatod át. A classok kizárólag a platform elemein léteznek, a téma vagy a kereskedő által írt jelöléseken nem.

Mindegyik class egy egyszerű kebab-case token az elem className attribútumában. Önmagában nem hordoz semmilyen stílust, és a theme interface részét képezi: a platform a körülötte lévő Tailwind utility classokat módosíthatja, magát a tokent viszont soha.

Az override-mintaHivatkozás másolása

A szabályokat a témád src/styles/theme.css fájljába írd, réteg nélkül (unlayered), a :where() szelektorral:

:where(.header-brand) {
  letter-spacing: 0.08em;
}

:where(.cart-count) {
  background: var(--color-surface);
  border-color: var(--color-line);
}

Ez két dolog miatt működik:

• A réteg nélküli CSS felülírja a Tailwindet. A platform utility classai a @layer utilities rétegben élnek. Egy réteg nélküli szabály a specificity-től függetlenül felülír minden rétegzett szabályt, így sem az !important használatára, sem specifikusabb szelektorra nincs szükség.
• A :where() 0-n tartja a specificity-t. A szabályod a cascade legkönnyebben felülírható eleme marad, így egy későbbi saját szabályod, vagy ugyanazon az elemen lévő state class továbbra is érvényesül. A forráskódbeli sorrend válik az override-mechanizmussá.

A header-brand a @poltura/theme-sdk/chrome csomagban található Brand és Logo komponensek, valamint a logo blokk által kirajzolt hivatkozáson található. Ezek a legtöbb téma láblécében is megjelennek, így egy sima .header-brand szabály a lábléc logóját is eléri. A kizárólag a láblécre vonatkozó szabályokat a saját footer classoddal szűkítsd le.

A classokHivatkozás másolása

A chat widget class-ainak teljes listáját a Chat widget chrome oldalon találod.

FejlécállapotokHivatkozás másolása

A fejléc egy szekciócsoport (layout/header.json), így az elemei inkább a kereskedő saját stílusbeállításait hordozzák, mintsem class hookokat. A görgetési állapota attribútumként érhető el a CSS számára:

:where([data-theme-chrome='header'][data-header-scrolled]) [data-header-section] {
  box-shadow: 0 1px 0 var(--border);
}

A @poltura/theme-sdk/chrome csomagban lévő useHeaderVisibility() ugyanezeket a scrolled és hidden állapotokat olvassa ki kódban.

Lebegő elemekHivatkozás másolása

Bármi, amit egy téma a viewport aljára rögzít (sticky vásárlási sáv, lebegő gomb, saját banner), három eltolási értéket (offset) ad hozzá a bottom értékéhez, amelyek alapértelmezetten 0px méretűek:

:where(.my-sticky-buy) {
  position: fixed;
  bottom: calc(
    var(--banner-bottom-offset, 0px) + var(--preview-bar-offset, 0px) +
      var(--poltura-editor-inset-bottom, 0px)
  );
}

A platform chatindítója, az oldal tetejére ugró gomb, a bannerek és a cookie-sáv már eleve így működnek. A --poltura-editor-inset-bottom csak a témaszerkesztőn belül létezik, így az élő webáruházat nem befolyásolja. Enélkül az alulra rögzített elem telefonon a témaszerkesztő fülsávja vagy beállítólapja alá kerülne.

Amihez nincs hookHivatkozás másolása

A fejléc menü-, kereső- és nyelvválasztó blokkjai, valamint a MainNav, MobileNav, MegaMenu, MobileMenu, HeaderSearch és LocaleSwitcher komponensek nem használnak class hookokat. Ezeket az elem stílusbeállításaival, az SDK-elemek által fogadott className és classes propokkal (lásd a chrome, a navigáció és a keresés referenciáit), a fenti fejlécattribútumokkal vagy a tárolóikkal formázhatod.

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

• Fejléc megamenük: blokkokból felépített széles fejléc-legördülők.
• Chat widget chrome: a chat widget minden class-a és része.