A kosárgomb testreszabása

A headerben található kosárgomb egy platformkomponens. Ez kezeli a mini kosarat (egy popover nagy képernyőn, egy oldalsó sheet kis képernyőn), az élő tételszámot, az átirányítást a pénztárhoz, valamint az akadálymentességet (képernyőolvasó-értesítések, fókuszkezelés). A téma készen kapja ezt a felületi elemet, és eldönti, hol helyezkedjen el és hogyan nézzen ki, anélkül hogy saját kosárlogikát kellene megvalósítania.

Hol találhatóHivatkozás másolása

A header egy szekciócsoport a témád layout/header.json fájljában: egy header szekció, amelynek bar régiója olyan blokkokat tartalmaz, mint a logo, menu, search, language, account és cart. A cart blokk jeleníti meg a kosárgombot. A layout fájlban így néz ki:

{
  "id": "cart-mkdl2e",
  "type": "cart",
  "settings": {
    "display": "icon_count",
    "opens": "drawer"
  }
}

A kódban ugyanez a gomb a CartButton a @poltura/theme-sdk/cart csomagból, a mini kosár bodyja pedig a MiniCart.

A testreszabás módjaiHivatkozás másolása

Próbáld ki ezeket sorrendben. Mindegyik lépés többet változtat, mint az előző.

1. Színek és lekerekítés: kód nélkülHivatkozás másolása

A gomb kizárólag a téma design tokenjeit használja, így követi a témát:

Módosítsd ezeket a téma beállításaiban a Témaszerkesztő felületén (a kereskedő színei), vagy a témád src/styles/tokens.css és tokens.dark.css fájljaiban, és a kosárgomb követni fogja a változtatást a webáruház többi részével együtt.

2. Pozíció és layout: a blokk áthelyezéseHivatkozás másolása

A cart blokk ugyanolyan elem, mint bármelyik másik. A kereskedők áthúzhatják a Témaszerkesztő fejléc fastruktúrájában. A téma az alapértelmezett pozíciót a layout/header.json fájlban határozza meg, például egy jobbra igazított stack elemben az account mellett. A blokk stílusbeállításai (térközök, képernyőméretenkénti láthatóság) a root elemre vonatkoznak.

3. Célzott CSS: formázás a tokeneken túlHivatkozás másolása

A trigger a stabil .cart-button class-szal rendelkezik, a számláló a .cart-count, a felirat a .cart-button-label, a mini kosár felülete pedig a .cart-panel class-t kapja. Lásd a stabil felületi osztályok leírását. Ezek a class-ok a mini kosár gombján találhatók. Az opens: page beállítással a blokk ehelyett egy sima hivatkozást jelenít meg a kosároldalra.

:where(.cart-button) {
  border: 1px solid var(--primary);
  border-radius: 9999px;
}

4. Feliratok szövege: témaszövegekHivatkozás másolása

A látható felirat és az értesítések a platform cart szövegeiből származnak (cart.title, cart.itemCount, cart.empty). A téma texts/<language>.json fájlja felülírja a platform azonos kulcsú szövegeit, így a téma nyelvenként átnevezheti a gombot:

{ "cart": { "title": "Bag" } }

5. A blokk re-renderelése: CartButton propokHivatkozás másolása

Írd felül a cart blokkot, hogy a platform gombját más propokkal jelenítsd meg. Megmarad a mini kosár, a számláló és az akadálymentességi logika. Az override-od dönti el, hogy mi jelenjen meg, így a kereskedő Megjelenés és Megnyitás beállításai csak akkor érvényesülnek, ha beolvasod őket a settings objektumból:

import { CartButton } from '@poltura/theme-sdk/cart';
import { overrideBlock } from '@poltura/theme-sdk/elements';

function CartBlock() {
  return (
    <div className='inline-flex items-center'>
      <CartButton
        icon='bag'
        countPlacement='overlay'
        showLabel={false}
        classes={{ count: 'bg-foreground text-background' }}
      />
    </div>
  );
}

export const cart = overrideBlock('cart', CartBlock);

6. Teljes csere: saját felület megvalósításaHivatkozás másolása

Ha a design teljesen más triggert igényel, jeleníts meg saját elemet, és olvasd ki az élő kosárállapotot a useCart hookból:

import { useCart } from '@poltura/theme-sdk/cart';
import { useTranslations } from '@poltura/theme-sdk/i18n';
import { Link } from '@poltura/theme-sdk/routing';

export function CartLink() {
  const { cart } = useCart();
  const t = useTranslations('cart');
  const count = cart?.itemCount ?? 0;
  return (
    <Link href='/cart' aria-label={count > 0 ? t('itemCount', { count }) : t('title')}>
      {t('title')} {count > 0 ? count : null}
    </Link>
  );
}

A useCart().miniCart (open, setOpen) megnyitja és bezárja a mini kosarat, a <MiniCart /> pedig megjeleníti a bodyját a saját felületeden belül (surface='popover' vagy 'sheet').

Egy egyedi trigger eldobja a platform popoverjét és sheetjét, azok fókuszkezelését és a beépített bejelentéseit, így ezeket mind neked kell kézben tartanod. Érdemes az 1–5. lépéseket előnyben részesíteni, hacsak a design nem igényel ettől eltérő interakciót.

Amit a platform kezelHivatkozás másolása

A kosármódosítások, a pénztár, a fizetések és az árazási logika soha nem kerülnek át a témába. A téma a @poltura/theme-sdk/cart csomagon keresztül olvassa az állapotot és hívja meg a műveleteket, a felületet pedig a @poltura/theme-sdk/chrome segítségével állítja össze. Ez a határvonal biztosítja, hogy a téma a platformfrissítések után is működőképes maradjon.

Változtatások ellenőrzéseHivatkozás másolása

• Válaszd a Mentés lehetőséget a kódszerkesztőben, és a szerkesztő Előnézet felülete megjeleníti a webáruházat a kódod mellett.
• A Közzététel buildeli a téma új verzióját, és élesíti a webáruházban.

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

• Termékoldal: a kosárba helyezés testreszabása: a vásárlási doboz a termékoldalon.
• cart referencia: CartButton, MiniCart, useCart és a többiek.