Skip to main content
Blok Header to przypięty górny obszar cart drawera, który nadaje mu wyraźny tytuł i oczywisty sposób zamknięcia. Jego układem sterujesz, przypisując Title, Logo i Close button do lewej i prawej sekcji. Ponieważ Header jest przypięty u góry, pozostaje widoczny podczas przewijania reszty koszyka.
Blok Header z tytułem koszyka, liczbą produktów i elementem zamykania u góry drawera

Działanie

  • Header jest przypięty do górnej części drawera i nie przewija się razem z korpusem koszyka.
  • Element zamykania jest zawsze dostępny i zamyka drawer.

Ustawienia

Tytuł można tłumaczyć. Jeśli tytuł okaże się pusty (np. nieustawione tłumaczenie), koszyk wraca do wyświetlania Cart, więc header nigdy nie jest pusty. Elementy pojawiają się w kolejności, w jakiej je wybierzesz, od lewej do prawej, a każdy element może być przypisany tylko do jednej sekcji naraz.

Umiejscowienie i limity

  • Region: tylko góra (top).
  • Maksymalnie: 1 na stan koszyka.
  • Stan: wypełniony i pusty koszyk (każdy stan ma własną instancję bloku Header).
  • Dodawany do nowych koszyków domyślnie w obu stanach. Nie jest zablokowany, więc możesz go usunąć lub ukryć przełącznikiem z ikoną oka.

Szablon niestandardowy

Obsługuje szablon niestandardowy z zakładki Code, który zastępuje wbudowany kod tego bloku Twoim JSX. Oto propsy, które otrzymuje.
logoUrl to jedyny prop, który nie ma wbudowanego odpowiednika: przesłany obraz w Headerze jest renderowany wyłącznie przez szablon niestandardowy. Jeśli sprzedawca ustawił logo, a ono się nie pokazuje, to właśnie dlatego.
Jeśli nie podepniesz onClose do niczego, klienci nadal mogą zamknąć drawer, klikając nakładkę lub naciskając Escape, ale Twój header nie będzie miał przycisku zamykania. Zawsze go dodawaj.

Wygląd

Stylizuj ten blok za pomocą jego sekcji Design w panelu ustawień. Są to nadpisania na poziomie bloku, które nakładają się na Twój globalny design i wracają do niego, gdy pole jest puste.

Text

Sekcja Text w Design pozwala kontrolować typografię tytułu koszyka. Pogrubienie i kolor tekstu ustawia się w edytorze Rich Text powyżej (w zakładce Settings), a nie tutaj. Czym są ustawienia wyglądu? Dowiedz się więcej tutaj: Ustawienia wyglądu.