> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Blok Header

> Blok Header w Aftersell Cart: tytuł, liczba produktów, logo i element zamykania przypięte do górnej części cart drawera.

> 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.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-header-block-title-item-count.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e60cc6dbfe8728eb818d20cf5aa8ae5c" alt="Blok Header z tytułem koszyka, liczbą produktów i elementem zamykania u góry drawera" width="689" height="91" data-path="images/aftersell/cart-header-block-title-item-count.png" />
</Frame>

<div id="behavior">
  ## Działanie
</div>

* 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.

<div id="settings">
  ## Ustawienia
</div>

| Ustawienie | Co kontroluje                                                                                                                                                                                                                             | Domyślnie                    |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| **Left**   | Jakie elementy renderują się w lewej sekcji (`Title`, `Logo`, `Close button`) i w jakiej kolejności.                                                                                                                                      | `Title`                      |
| **Right**  | Jakie elementy renderują się w prawej sekcji (`Title`, `Logo`, `Close button`) i w jakiej kolejności.                                                                                                                                     | `Close button`               |
| **Title**  | Sformatowany nagłówek koszyka. Obsługuje tokeny `{{cart_item_count}}` i `{{total_price}}`.                                                                                                                                                | `Cart • {{cart_item_count}}` |
| **Image**  | Obraz udostępniany szablonowi niestandardowemu jako `props.logoUrl`. To pole pojawia się tylko wtedy, gdy aktywny jest szablon niestandardowy, a wbudowany header nigdy go nie renderuje. Obsługiwane formaty: WebP, JPEG, PNG, GIF, SVG. | Brak                         |

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.

<div id="placement-and-limits">
  ## Umiejscowienie i limity
</div>

* **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.

<div id="custom-template">
  ## Szablon niestandardowy
</div>

Obsługuje [szablon niestandardowy](/pl/aftersell/cart/custom-templates) z zakładki Code, który zastępuje wbudowany kod tego bloku Twoim JSX. Oto propsy, które otrzymuje.

<Note>
  `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.
</Note>

| Prop           | Typ                                       | Do czego służy                                                                                                                     |
| -------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `title`        | `string`                                  | Tytuł headera jako oczyszczony HTML, z już rozwiązanymi tokenami `{{cart_item_count}}` i `{{total_price}}`.                        |
| `logoUrl`      | `string \| null`                          | Przesłany obraz headera. `null`, gdy sprzedawca go nie ustawił.                                                                    |
| `leftSection`  | `('title' \| 'logo' \| 'close_button')[]` | Elementy wybrane do lewej sekcji, w kolejności renderowania.                                                                       |
| `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | Elementy wybrane do prawej sekcji, w kolejności renderowania.                                                                      |
| `itemCount`    | `number`                                  | Liczba produktów w koszyku, tak jak widzi ją klient.                                                                               |
| `onClose`      | `() => void`                              | Zamyka drawer. Podepnij to do swojego elementu zamykania.                                                                          |
| `isLoading`    | `boolean`                                 | Tutaj zawsze `false`: blok renderuje wbudowany szkielet podczas ładowania i wywołuje Twój szablon dopiero, gdy koszyk jest gotowy. |

<Warning>
  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.
</Warning>

<div id="design">
  ## Wygląd
</div>

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.

<div id="text">
  ### Text
</div>

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.

| Ustawienie         | Co kontroluje            | Domyślnie           |
| ------------------ | ------------------------ | ------------------- |
| **Font**           | Rodzina czcionek tytułu. | Dziedziczy z motywu |
| **Size**           | Rozmiar czcionki.        | `18px`              |
| **Line height**    | Mnożnik wysokości linii. | `1.3`               |
| **Letter spacing** | Odstępy między znakami.  | Normal              |

Czym są ustawienia wyglądu? Dowiedz się więcej tutaj: [Ustawienia wyglądu](/pl/aftersell/cart/design-settings).