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

# Niestandardowy HTML

> Dodaj niestandardowy HTML lub JavaScript do swojego koszyka za pomocą wbudowanego edytora HTML.

Sekcja **Custom HTML** w Upcart pozwala Ci wstawiać niestandardowy kod do różnych części koszyka wysuwanego (cart drawer).\
Możesz również pisać JavaScript, używając tagów `<script>`, i wchodzić w interakcję z koszykiem za pomocą [Public API](https://rokt.notion.site/upcart-public-api) Upcart (np. `upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)`).

<div id="where-to-find-it">
  ## **Gdzie to znaleźć**
</div>

Przejdź do: **Cart Editor > Settings > Custom HTML**

<div id="how-it-works">
  ## **Jak to działa**
</div>

Lista rozwijana **HTML Location** pozwala Ci wybrać, gdzie kod pojawi się w układzie koszyka. Na podstawie Twojego wyboru kod zostanie wstrzyknięty do odpowiadającego obszaru koszyka.

Możesz użyć tego, aby dodać:

* Niestandardowe wiadomości
* Tekst budujący zaufanie
* Integracje z aplikacjami
* Fragmenty kodu analitycznego
* Haki stylizacyjne
* Treści promocyjne, takie jak banery ze spersonalizowanymi ofertami lub rabatami
* Gwarancje produktowe budujące zaufanie klientów

<div id="dynamic-tokens">
  ## **Dynamiczne tokeny**
</div>

Możesz użyć poniższego tokenu w dowolnym polu Custom HTML, aby wstrzyknąć bieżące dane koszyka:

| Token                 | Co renderuje                                                          |
| --------------------- | --------------------------------------------------------------------- |
| `{{UPCART_SUBTOTAL}}` | Bieżąca suma częściowa koszyka, sformatowana w walucie Twojego sklepu |

**Przykład:**

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>
```

Ten token działa we wszystkich polach lokalizacji HTML z wyjątkiem **Scripts (Before Load)**, gdzie zamiast tego powinieneś użyć API JavaScript. To jedyny dynamiczny token dostępny w polach Custom HTML.

<div id="available-html-locations">
  ## **Dostępne lokalizacje HTML**
</div>

|                                        |                                                                                                                                                        |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Lokalizacja                            | Opis                                                                                                                                                   |
| **Above announcements/rewards**        | Góra koszyka, poniżej nagłówka koszyka.                                                                                                                |
| **Below header/announcements/rewards** | Bezpośrednio pod ogłoszeniami lub paskami nagród.                                                                                                      |
| **Between each line item**             | Wstrzykiwany pod każdym produktem w koszyku.                                                                                                           |
| **Below cart items**                   | Bezpośrednio pod pozycjami koszyka, powyżej dolnych modułów.                                                                                           |
| **Above footer/add-ons**               | Poniżej pozycji koszyka i upselli, powyżej dodatków.                                                                                                   |
| **Above checkout button**              | Wewnątrz stopki, bezpośrednio nad przyciskiem checkout i sumą częściową.                                                                               |
| **Below checkout button**              | Wewnątrz stopki, bezpośrednio pod przyciskiem checkout.                                                                                                |
| **Bottom of cart**                     | Na samym dole koszyka wysuwanego (poza stopką).                                                                                                        |
| **On empty cart screen**               | Wyświetlany obok tekstu „Your cart is empty”.                                                                                                          |
| **Scripts (Before Load)**              | Niewidoczny obszar do uruchamiania JavaScript **przed** załadowaniem koszyka. Idealny do śledzenia, logiki warunkowej lub niestandardowego zachowania. |

<div id="custom-css-optional">
  ## **Niestandardowy CSS (opcjonalnie)**
</div>

Możesz stylizować swój HTML za pomocą edytora **Custom CSS** dostępnego w:\
**Upcart > Cart Editor > Settings > Custom CSS**

Na przykład, aby dostosować wyrównanie pustego koszyka:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }
```