> ## 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 przycisku checkoutu

> Blok Checkout button w Aftersell Cart: wymagane CTA w stopce, które kieruje kupujących do checkoutu.

> Blok **Checkout button** to główne wezwanie do działania w stopce koszyka, które prowadzi kupujących do checkoutu, dając im wyraźną, widoczną ścieżkę z koszyka do finalizacji zakupu. To blok wymagany.

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

* Przycisk ustala **zlokalizowany, poprawny dla rynku URL checkoutu**, dzięki czemu kupujący trafiają do checkoutu właściwego rynku. Jeśli nie da się go ustalić, wraca do standardowego linku `/checkout`.
* Z włączoną opcją **Go to cart page instead of checkout** przycisk linkuje zamiast tego do `/cart`.
* Kliknięcie nawiguje przez JavaScript, więc własna obsługa koszyka w motywie nie może go przechwycić, przy zachowaniu intencji otwarcia w nowej karcie (Cmd/Ctrl-klik, klik środkowym przyciskiem).
* Kliknięcie emituje zdarzenie SDK [`checkout`](/pl/aftersell/cart/sdk-events), które możesz subskrybować.

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

| Ustawienie                              | Co kontroluje                                                                               | Domyślnie                    |
| --------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------- |
| **Button label**                        | Etykieta w postaci zwykłego tekstu wpisywana w polu tekstowym. Obsługuje `{{total_price}}`. | `Checkout • {{total_price}}` |
| **Go to cart page instead of checkout** | Kieruje kupujących na stronę `/cart` zamiast bezpośrednio do checkoutu.                     | Wył.                         |

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

* **Region:** dół.
* **Maksimum:** 1 na stan koszyka.
* **Stan:** tylko wypełniony koszyk.
* **Zablokowany i dodawany domyślnie.** Przycisku Checkout nie można usunąć ani ukryć, można tylko zmienić jego pozycję w stopce.

<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                                                                                                                          |
| ----------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `label`     | `string`              | Etykieta przycisku jako oczyszczony HTML, z rozwiązanym `{{total_price}}`.                                                              |
| `href`      | `string \| undefined` | URL checkoutu. `undefined` w podglądzie edytora, gdzie nie ma dokąd nawigować.                                                          |
| `isLoading` | `boolean`             | Tutaj zawsze `false`: blok renderuje swój wbudowany szkielet podczas ładowania i wywołuje twój szablon dopiero, gdy koszyk jest gotowy. |

<Warning>
  **Niestandardowy przycisk checkoutu traci śledzenie checkoutu.** Wbudowany przycisk podpina handler kliknięcia, który emituje zdarzenie SDK [`checkout`](/pl/aftersell/cart/sdk-events#checkout) i rejestruje konwersję dla [analityki koszyka](/pl/aftersell/cart/analytics). Ten handler nie jest przekazywany do szablonów niestandardowych, więc nawigacja przez samo `href` pomija oba.

  Jeśli potrzebujesz tego zdarzenia, wyemituj je samodzielnie z `onClick` przed nawigacją. Raportowania atrybucji i tak nie da się w ten sposób odzyskać, więc preferuj przestylizowanie wbudowanego przycisku przez [ustawienia designu](/pl/aftersell/cart/design-settings) lub [niestandardowy CSS](/pl/aftersell/cart/custom-css), chyba że naprawdę potrzebujesz innej struktury.
</Warning>

Renderuj `href` bez zmian, nie ustawiając wartości domyślnej. `<a>` bez `href` jest nieaktywny, co jest poprawnym zachowaniem w edytorze.

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

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