> ## 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 Product add-on

> Blok Product add-on w Aftersell Cart: oferuj jeden konkretny produkt jako szybkie dodanie wewnątrz drawera.

> Blok **Product add-on** oferuje pojedynczy, konkretny produkt, który wybierasz jako dodatek wewnątrz koszyka, promując jeden znany produkt (gwarancję, próbkę, bestseller) jako szybkie dodanie bezpośrednio w koszyku.

<Info>
  W przeciwieństwie do bloku [**Upsells**](/pl/aftersell/cart/upsells-block), który pokazuje produkty wybrane przez strategię, Product add-on zawsze pokazuje dokładnie ten produkt, który wybierzesz.
</Info>

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-product-add-on-block-additional-product.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=29c7598c41c78f6503af7f9cd7ec084a" alt="Blok Product add-on oferujący dodatkowy produkt, który klient może dołączyć do koszyka" width="678" height="125" data-path="images/aftersell/cart-product-add-on-block-additional-product.png" />
</Frame>

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

* **Jeśli nie da się ustalić żadnego aktywnego wariantu** — produkt jest nieustawiony, zarchiwizowany lub niedostępny — blok renderuje **nic** zamiast martwego przycisku.
* Kontrolka odzwierciedla, czy pozycja dodatku *tego konkretnego bloku* jest w koszyku, więc jej wyłączenie usuwa pozycję, którą dodała (i nie wpłynie na ten sam produkt dodany gdzie indziej).
* Cena porównawcza (compare-at) jest przekreślana, gdy istnieje rzeczywista obniżka; etykieta „% off” jest ukrywana, jeśli rabat zaokrągla się poniżej 1%.
* Obraz dodatku wraca do głównego obrazu produktu, gdy wybrany wariant go nie ma.

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

| Ustawienie       | Co kontroluje                                                                                               | Domyślnie                             |
| ---------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| **Display type** | Jak wygląda kontrolka dodawania: **Toggle** lub **Checkbox**.                                               | Toggle                                |
| **Product**      | Wariant produktu do zaoferowania — jeden selektor obejmuje oba. Obraz i cena pochodzą z wybranego wariantu. | Brak                                  |
| **Title**        | Sformatowany nagłówek.                                                                                      | `<strong>{{product_title}}</strong>`  |
| **Price label**  | Linia ceny.                                                                                                 | `{{price}}`                           |
| **Description**  | Tekst pomocniczy.                                                                                           | `Add {{product_title}} to your order` |

**Title**, **Price label** i **Description** obsługują te same cztery tokeny: `{{product_title}}`, `{{price}}`, `{{compare_at_price}}` i `{{savings}}`.

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

* **Region:** korpus (body) lub dół (bottom).
* **Maksymalnie:** 3 na stan koszyka — wypełniony koszyk i pusty koszyk mają osobne limity.
* **Stan:** zarówno wypełniony, jak i pusty koszyk.
* Nie jest dodawany domyślnie. Nie jest zablokowany — możesz go usunąć lub ukryć.

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

<div id="content">
  ### Treść
</div>

| Prop                      | Typ              | Do czego służy                                                                                                                            |
| ------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `addonTitle`              | `string`         | Tytuł jako zwykły tekst. Użyj go dla tekstu alternatywnego i `aria-label` oraz jako wartości zapasowej, gdy nie ma sformatowanego tytułu. |
| `addonTitleHtml`          | `string`         | Oczyszczony sformatowany tytuł w HTML. Pusty, gdy go nie ma.                                                                              |
| `descriptionHtml`         | `string`         | Oczyszczony sformatowany opis w HTML. Pusty, gdy go nie ma.                                                                               |
| `formattedPrice`          | `string`         | Etykieta ceny sformatowana walutowo. Pusta, gdy nie jest pokazywana.                                                                      |
| `formattedCompareAtPrice` | `string`         | Sformatowana cena porównawcza wariantu (MSRP). Pusta, gdy nie ma rzeczywistej oszczędności.                                               |
| `savings`                 | `string`         | Etykieta oszczędności w pełnych procentach, np. `25%`. Pusta, gdy nie ma oszczędności.                                                    |
| `priceHtml`               | `string \| null` | Oczyszczony sformatowany HTML ceny z dedykowanego pola ceny. `null`, gdy puste.                                                           |
| `ctaText`                 | `string`         | Etykieta przycisku, dla formatu `button`.                                                                                                 |
| `imageUrl`                | `string`         | Obraz produktu. Pusty, gdy go nie ma.                                                                                                     |
| `productUrl`              | `string`         | URL strony produktu. Pusty, gdy go nie ma — w takim przypadku nie linkuj obrazu ani tytułu.                                               |

<div id="state-and-actions">
  ### Stan i akcje
</div>

| Prop           | Typ                                  | Do czego służy                                                                                         |
| -------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------ |
| `variantId`    | `number \| null`                     | Ustalony wariant. `null`, gdy nie ma aktywnego wariantu, bo produkt jest nieustawiony lub niedostępny. |
| `format`       | `'button' \| 'checkbox' \| 'toggle'` | Jak kupujący dodaje dodatek. Rozgałęziaj na tym swój kod.                                              |
| `isEnabled`    | `boolean`                            | Czy dodatek jest aktualnie w koszyku.                                                                  |
| `isAdding`     | `boolean`                            | `true`, gdy trwa dodawanie lub usuwanie. Na tej podstawie wyłączaj swoją kontrolkę.                    |
| `handleAdd`    | `() => void`                         | Dodaje dodatek. Dla formatu `button`.                                                                  |
| `handleToggle` | `() => void`                         | Przełącza dodatek do koszyka i z koszyka. Dla `checkbox` i `toggle`.                                   |
| `isLoading`    | `boolean`                            | `true`, gdy koszyk nadal wykonuje pierwsze pobranie.                                                   |

<Warning>
  `format` decyduje, który handler ma zastosowanie: `handleAdd` dla `button`, `handleToggle` dla `checkbox` i `toggle`. `variantId` równy `null` oznacza, że nie ma czego dodać, więc warunkuj swoją kontrolkę na tej wartości, zamiast wywoływać handler, który nie może się powieść.
</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ę trzech elementów. Użyj selektora **Text element**, aby przełączać się między nimi.

**Title** — nazwa produktu. Obsługuje także niestandardową rodzinę czcionek. 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.        | `15px`              |
| **Line height**    | Mnożnik wysokości linii. | `1.33`              |
| **Letter spacing** | Odstępy między znakami.  | Normal              |

**Price** — linia ceny. Pogrubienie i kolor tekstu ustawia się w edytorze Rich Text powyżej.

| Ustawienie         | Co kontroluje            | Domyślnie |
| ------------------ | ------------------------ | --------- |
| **Size**           | Rozmiar czcionki.        | `15px`    |
| **Line height**    | Mnożnik wysokości linii. | `1.33`    |
| **Letter spacing** | Odstępy między znakami.  | Normal    |

**Description** — tekst pomocniczy. Pogrubienie i kolor tekstu ustawia się w edytorze Rich Text powyżej.

| Ustawienie         | Co kontroluje            | Domyślnie |
| ------------------ | ------------------------ | --------- |
| **Size**           | Rozmiar czcionki.        | `14px`    |
| **Line height**    | Mnożnik wysokości linii. | `1.29`    |
| **Letter spacing** | Odstępy między znakami.  | Normal    |

<Tip>
  Kliknięcie elementu tekstowego bezpośrednio w podglądzie koszyka podświetla go i automatycznie otwiera jego kontrolki w panelu.
</Tip>

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