> ## 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 banera

> Blok Banner w Aftersell Cart: baner z komunikatem pokazywany wewnątrz szuflady koszyka, z opcjonalnym licznikiem odliczającym.

> Blok **Banner** to pasek z komunikatem pokazywany wewnątrz koszyka, przydatny do promocji, informacji o wysyłce lub komunikatów budujących pilność, takich jak informacja o darmowej wysyłce, ogłoszenie wyprzedaży czy komunikat „koszyk zarezerwowany”. Może zawierać działający na żywo licznik odliczający.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-banner-block-reservation-countdown.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=8aff1b333a8ebe9005d2d70bc7f9a2cd" alt="Blok banera w szufladzie koszyka Aftersell pokazujący komunikat z odliczaniem rezerwacji" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

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

* **Odliczanie działa tylko wtedy, gdy spełnione są wszystkie trzy warunki:** licznik jest włączony, tekst zawiera token `{{timer}}`, a czas trwania jest większy od zera. W przeciwnym razie baner wyświetla się jako statyczny tekst.
* Licznik odlicza w formacie `MM:SS` i jest zapamiętywany dla karty przeglądarki kupującego (przetrwa nawigację po twoim sklepie w trakcie sesji), więc nie restartuje się na każdej stronie.
* **Gdy licznik osiągnie `00:00`, cały baner znika**, więc kupujący nigdy nie widzą wyzerowanego zegara.
* W podglądzie edytora licznik zapętla się, a baner nigdy się nie ukrywa, więc możesz dalej go stylizować.

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

| Ustawienie                | Co kontroluje                                                                                                                                      | Domyślnie                                      |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Text**                  | Komunikat w formacie rich text. Dodaj token `{{timer}}`, aby pokazać odliczanie.                                                                   | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | Włącza lub wyłącza odliczanie.                                                                                                                     | Wł.                                            |
| **Minutes** / **Seconds** | Jak długo trwa odliczanie. Dwa pola liczbowe, pokazywane po włączeniu **Countdown timer** i wyświetlane jako `MM:SS` w miejscu tokena `{{timer}}`. | 10 minut                                       |

Tekst podlega tłumaczeniu.

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

* **Region:** dowolny (góra, treść lub dół).
* **Maksimum:** 3 na stan koszyka — wypełniony koszyk i pusty koszyk mają osobne limity.
* **Stan:** zarówno wypełniony, jak i pusty koszyk.
* Domyślnie dodawany do nowych koszyków. Nie jest zablokowany, więc możesz go usunąć lub ukryć.

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

Obsługuje [szablon niestandardowy](/pl/aftersell/cart/custom-templates) z karty Code, który zastępuje wbudowaną strukturę tego bloku twoim JSX. Oto propsy, które otrzymuje.

| Prop                          | Typ       | Do czego służy                                                                                                                          |
| ----------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `text`                        | `string`  | Komunikat banera jako oczyszczony HTML, z tokenem `{{timer}}` **już zastąpionym** działającym odliczaniem.                              |
| `shouldUseTimer`              | `boolean` | `true`, gdy odliczanie działa dla tego banera.                                                                                          |
| `isTimerExpiredAndShouldHide` | `boolean` | `true`, gdy odliczanie osiągnęło zero.                                                                                                  |
| `isLoading`                   | `boolean` | Tutaj zawsze `false`: blok renderuje swój wbudowany szkielet podczas ładowania i wywołuje twój szablon dopiero, gdy koszyk jest gotowy. |

Nie ma osobnego propa `timer`. Odliczanie jest interpolowane do `text` za ciebie, więc wystarczy wyrenderować `text`.

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  // The built-in banner removes itself at 00:00; a custom template must do the same.
  if (props.shouldUseTimer && props.isTimerExpiredAndShouldHide) return null;

  return (
    <div className="cart-external-banner" style={{ padding: '10px', textAlign: 'center' }}>
      <span dangerouslySetInnerHTML={{ __html: props.text }} />
    </div>
  );
}
```

<Warning>
  Ten wczesny return jest ważny. Bez niego baner renderuje się dalej po wygaśnięciu licznika, a ponieważ token jest już podstawiony, kupujący widzą zamrożone `00:00`.
</Warning>

<div id="design">
  ## Design
</div>

Stylizuj ten blok w sekcji **Design** w panelu ustawień. To nadpisania per blok, które nakładają się na twój globalny design i wracają do niego, gdy są puste.

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

Sekcja **Text** w Design pozwala kontrolować typografię komunikatu banera. 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 tekstu banera. | Dziedziczy z motywu |
| **Size**           | Rozmiar czcionki.               | `14px`              |
| **Line height**    | Mnożnik wysokości linii.        | `1.4`               |
| **Letter spacing** | Odstępy między znakami.         | Normal              |

<div id="style">
  ### Style
</div>

| Ustawienie           | Co kontroluje                                                 | Domyślnie     |
| -------------------- | ------------------------------------------------------------- | ------------- |
| **Background color** | Kolor wypełnienia tła banera.                                 | `#000000`     |
| **Text color**       | Rezerwowy kolor tekstu (nadpisywany przez edytor Rich Text).  | `#ffffff`     |
| **Border**           | Czy baner ma obramowanie — **None** (0px) czy **Show** (1px). | None          |
| **Border color**     | Kolor obramowania, gdy wybrano **Show**.                      | Przezroczyste |

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