> ## 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 Upsells
> Blok Upsells w Aftersell Cart — oferty produktowe wybierane przez strategię, pokazywane w szufladzie koszyka.
> Blok **Upsells** pokazuje oferty produktowe w szufladzie koszyka, wybierane przez wybraną przez Ciebie **Strategię**. Gdy kupujący otwiera koszyk, blok wyświetla produkty zwracane przez Twoją Strategię na podstawie bieżącej zawartości koszyka i skonfigurowanych reguł targetowania.
Zwiększaj średnią wartość zamówienia, pokazując trafne oferty produktowe w momencie, gdy kupujący otwierają koszyk, korzystając ze Strategii, która decyduje, co pokazać, na podstawie zawartości koszyka i Twoich reguł targetowania.
W odróżnieniu od bloku [**Product add-on**](/pl/aftersell/cart/product-add-on-block), który zawsze pokazuje jeden wybrany przez Ciebie produkt, Upsells jest napędzany Strategią, która decyduje, co pokazać.
## Zachowanie
* Produkty są pobierane na żywo na podstawie bieżącego koszyka kupującego, więc oferty odzwierciedlają to, co faktycznie jest w koszyku.
* **Cała sekcja ukrywa się, gdy nie rozwiążą się żadne produkty** — brak podpiętej Strategii, Strategia nic nie zwraca albo żaden ze zwróconych produktów nie nadaje się do kupienia. Kupujący nigdy nie widzą pustej sekcji Upsells.
* Jeśli zwrócona oferta niesie rabat, kupujący widzi uczciwe przekreślenie i odznakę rabatu, a rabat jest stosowany przy checkoucie.
## Ustawienia
| Ustawienie | Co kontroluje | Domyślnie |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ |
| **Title** | Nagłówek rich-text nad ofertami. Obsługuje pogrubienie, kursywę, wyrównanie i kolor. | `You may also like` |
| **Add button text** | Etykieta przycisku dodawania przy każdym produkcie. | `Add` |
| **Strategy** | Strategia, która wybiera pokazywane produkty. | Strategia Shopify AI, przypisana za Ciebie |
| **Layout** | **Carousel** lub **List**. | Carousel |
| **Maximum products** | Ile maksymalnie produktów pokazać. Przyjmuje `1`–`12`. | `4` |
| **Show compare-at price** | Czy pokazywać przekreśloną cenę porównawczą. | Włączone |
| **Show product reviews** | Czy pokazywać oceny gwiazdkowe i liczbę recenzji na każdej karcie upsellu. Oceny pochodzą z metafields produktów Twojej aplikacji recenzji i pojawiają się tylko wtedy, gdy istnieją poprawne dane recenzji. | Wyłączone |
### Obsługiwane aplikacje recenzji
Obsługiwane są następujące aplikacje recenzji oparte na metafields: Shopify Product Reviews, Junip, Okendo, Growave, Fera, Stamped, Loox, REVIEWS.io, Automizely Reviews, Judge.me, Ali Reviews, Trustoo, Rivo, Rivyo i Vitals. Yotpo nie jest obsługiwane, ponieważ używa osobnego API zamiast metafields produktów.
## Wygląd
Blok Upsells ma nadpisania wyglądu per blok w swoim panelu **Design**. Nadpisują one globalne ustawienia wyglądu koszyka tylko dla tego bloku. Pozostawienie wartości pustej dziedziczy ustawienie globalne.
### Stylizacja tekstu
Blok Upsells zawiera sekcję **Text** w swoich ustawieniach Design. Użyj jej, aby kontrolować typografię poszczególnych elementów tekstowych na każdej karcie upsellu. Wybierz element tekstowy z selektora, aby dostosować jego ustawienia:
| Ustawienie | Co kontroluje |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| **Text color** | Kolor wybranego elementu tekstowego. |
| **Font** | **Theme font** (dziedziczy krój z motywu) lub **Custom font** (wpisz nazwę kroju, który motyw już ładuje). Dostępne tylko dla **Heading**. |
| **Size** | Rozmiar czcionki w pikselach. |
| **Weight** | Grubość czcionki: Light, Regular, Medium, Semibold lub Bold. |
| **Line height** | Wysokość wiersza jako mnożnik rozmiaru czcionki (na przykład `1.4`). |
| **Letter spacing** | Odstęp między literami w pikselach. Wartości ujemne zwężają tekst. |
Elementy tekstowe, które możesz stylizować, są pogrupowane według kategorii:
**Heading**
* **Heading** — nagłówek sekcji nad kartami upsellu (na przykład *You may also like*). Obsługuje też niestandardowy krój. Pogrubienie i kolor ustawiasz w Rich Text Editor powyżej.
**Product**
* **Product title** — nazwa produktu na każdej karcie upsellu.
* **Review count** — liczba recenzji pokazywana, gdy włączone jest **Show product reviews**.
**Pricing**
* **Price** — bieżąca cena na każdej karcie.
* **Compare-at price** — przekreślona cena oryginalna.
* **Discount** — etykieta rabatu (na przykład *20% off*).
Pozostawienie dowolnego pola pustego zachowuje domyślną wartość elementu.
Kliknięcie elementu tekstowego bezpośrednio w podglądzie koszyka podświetla go i automatycznie otwiera jego kontrolki w panelu.
### Kolory kafelków
| Ustawienie | Co kontroluje | Domyślnie |
| ------------------------- | ----------------------------------------------- | ------------- |
| **Tile background color** | Wypełnienie tła każdej karty produktu upsell. | Przezroczyste |
| **Tile border color** | Kolor obramowania każdej karty produktu upsell. | `#F6F6F7` |
### Recenzje
Gdy **Show product reviews** jest włączone, możesz dostosować kolory gwiazdek w sekcji **Reviews** panelu Design.
| Ustawienie | Co kontroluje | Domyślnie |
| -------------------- | ------------------------------------ | --------- |
| **Star color** | Wypełniona część każdej gwiazdki. | `#FDCC0D` |
| **Empty star color** | Niewypełniona część każdej gwiazdki. | `#D1D5DB` |
## Umieszczenie i limity
* **Region:** body lub bottom.
* **Maksimum:** 1 na stan koszyka — wypełniony koszyk i pusty koszyk mają osobne limity.
* **Stan:** zarówno wypełniony, jak i pusty koszyk.
* Niedodawany domyślnie. Niezablokowany — możesz go usunąć lub ukryć.
## Wybór strategii
Blok Upsells nie przychodzi pusty: jeśli nie ustawiono Strategii, Aftersell rozwiązuje strategię Shopify AI Twojego sklepu — tworząc ją, jeśli jeszcze jej nie masz — i wstawia ją, więc blok działa od razu. Otwórz selektor **Strategy**, aby ją zmienić. Selektor ma dwie grupy:
**Quick start**
* **Create strategy from selected products** — wybierz konkretne produkty bezpośrednio, a Strategia zostanie utworzona automatycznie.
* **Create strategy from scratch** — otwiera edytor Strategii, abyś mógł budować reguły bez opuszczania edytora koszyka.
**Strategies**
* **Shopify AI recommendations** — tworzy Strategię opartą o własne rekomendacje Shopify, nazwaną później wszędzie **Shopify AI recommended products**. Ta pozycja znika, gdy już ją masz, ponieważ sklep potrzebuje tylko jednej strategii Shopify AI.
* Twoje istniejące Strategie, wylistowane po nazwie. Wpisz w pole wyszukiwania, aby je filtrować.
Po wybraniu Strategii jej nazwa pojawia się w wierszu strategii wewnątrz bloku.
## Zarządzanie wybraną strategią
Po podpięciu Strategii w wierszu strategii pojawia się przycisk **•••** (wielokropek). Kliknij go, aby otworzyć menu akcji:
* **Edit strategy** — otwiera edytor Strategii w nowej karcie, dzięki czemu Twoja sesja edytora koszyka i wszelkie niezapisane zmiany pozostają nienaruszone. Ta opcja nie jest dostępna dla strategii rekomendowanej przez Shopify AI, która jest zarządzana automatycznie i nie ma edytowalnych reguł.
* **Remove from upsell** — odłącza Strategię od tego bloku. Sama Strategia nie jest usuwana; pozostaje dostępna na Twojej liście Strategii.
Edytowanie Strategii w nowej karcie nie wpływa na sesję edytora koszyka — możesz wrócić do karty edytora koszyka i kontynuować konfigurację bez utraty pracy.
## Szablon niestandardowy
Obsługuje [szablon niestandardowy](/pl/aftersell/cart/custom-templates) z zakładki Code, który zastępuje wbudowane znaczniki tego bloku Twoim JSX. Oto propsy, które otrzymuje.
### Zawartość bloku
| Prop | Typ | Do czego służy |
| --------------- | ---------------------- | ---------------------------------------------------------------------------------- |
| `title` | `string` | Nagłówek sekcji. |
| `addButtonText` | `string` | Etykieta przycisku dodawania do koszyka. |
| `layout` | `'carousel' \| 'list'` | Przewijanie poziome lub zawijanie. Rozgałęziaj swoje znaczniki na tej podstawie. |
| `upsells` | `UpsellCard[]` | Produkty gotowe do wyświetlenia. Zobacz [kształt karty](#the-upsell-card) poniżej. |
| `isLoading` | `boolean` | `true`, gdy produkty upsell są jeszcze pobierane. |
### Dodawanie do koszyka
| Prop | Typ | Do czego służy |
| ----------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
| `selectVariant` | `(productId: string, variantId: number) => void` | Wybiera wariant dla produktu. |
| `handleAdd` | `(productId: string) => void` | Dodaje wybrany wariant tego produktu do koszyka. |
| `addingProductId` | `string \| null` | Produkt aktualnie dodawany, abyś mógł wyłączyć tylko jego przycisk. `null` w stanie spoczynku. |
### Kontrolki karuzeli
Istotne tylko, gdy `layout` to `'carousel'`.
| Prop | Typ | Do czego służy |
| -------------- | ------------------------------------- | -------------------------------------------------------------------------------------------- |
| `trackRef` | `{ current: HTMLDivElement \| null }` | Podepnij do swojego scrollera przez `ref={props.trackRef}`, aby strzałki mogły go przewijać. |
| `atStart` | `boolean` | `true`, gdy ścieżka jest na początkowej krawędzi. Wyłącz lewą strzałkę. |
| `atEnd` | `boolean` | `true`, gdy ścieżka jest na końcowej krawędzi. Wyłącz prawą strzałkę. |
| `scrollByCard` | `(direction: 1 \| -1) => void` | Przewija ścieżkę o jedną kartę w lewo (`-1`) lub w prawo (`1`). |
### Karta upsellu
Każdy wpis w `upsells`:
| Pole | Typ | Do czego służy |
| ------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `productId` | `string` | GID produktu. Używaj jako klucza React i jako celu dodania do koszyka. |
| `title` | `string` | Tytuł produktu. |
| `description` | `string` | Opis w czystym tekście. `''`, gdy produkt go nie ma. |
| `url` | `string \| null` | URL strony produktu. `null`, gdy niedostępny. |
| `imageUrl` | `string \| null` | Obraz wyróżniający. `null`, gdy produkt go nie ma. |
| `selectedVariantImageUrl` | `string \| null` | Własny obraz wybranego wariantu. `null`, gdy go nie ma — wróć do `imageUrl`. |
| `variantTitle` | `string \| null` | Wartości opcji wybranego wariantu (np. `Medium / Blue`), już rozwiązane. `null`, gdy wariant nie ma prawdziwego tytułu — pusty lub placeholder `Default Title` z Shopify. Produkt z jednym nazwanym wariantem nadal zwraca tę nazwę, więc zabezpieczaj przez `{upsell.variantTitle && …}`, a nie polegaj na `hasMultipleVariants`. |
| `priceLabel` | `string` | Cena do pokazania, już sformatowana. Cena promocyjna przy rabacie, w przeciwnym razie cena wariantu. |
| `compareAtLabel` | `string \| null` | Przekreślony oryginał, już sformatowany. `null`, gdy nie ma czego przekreślić. |
| `discountLabel` | `string \| null` | Etykieta rabatu inline, np. `(20% off)`. `null`, gdy brak rabatu. |
| `review` | `object \| null` | `{ rating, count, stars }`, gdzie `stars` to 5 wstępnie wyrenderowanych URL-i obrazów z uwzględnionym częściowym wypełnieniem. Renderuj każdy jako element obrazu. `null`, gdy recenzje są wyłączone lub produkt ich nie ma. |
| `options` | `Array<{ name, values }>` | Grupy opcji, do budowania selektorów lub swatchy. |
| `variants` | `array` | Kombinacje wariantów. Zobacz poniżej. |
| `selectedVariantId` | `number` | Aktualnie wybrany wariant. Przekaż go do `selectVariant`. |
| `hasMultipleVariants` | `boolean` | Czy w ogóle renderować selektor wariantów. |
| `vendor` | `string` | Dostawca produktu. |
Każdy wpis w `variants` niesie `id`, `title`, `price` i `compareAtPrice` (surowe, niesformatowane, w głównej jednostce waluty jako ciągi znaków), `availableForSale`, `imageUrl`, `sku` oraz `selectedOptions` (`[{ name, value }]`).
**Dostępność jest per kombinacja, nie per opcja.** `options` daje grupy do wyrenderowania, ale to, czy dana selekcja jest do kupienia, znajduje się na pasującym wpisie w `variants`. Rozwiąż kombinację wybraną przez kupującego względem `variants` i bramkuj na `availableForSale` tego wpisu, zamiast zakładać, że każda wartość w `options` jest zamawialna.
`priceLabel` i `compareAtLabel` są już sformatowane do wyświetlania, podczas gdy `variants[].price` i `variants[].compareAtPrice` to surowe ciągi w głównej jednostce waluty. Nie mieszaj ich: pokazuj etykiety, a surowych wartości używaj tylko do porównań.
## Wygląd
Stylizuj ten blok w jego sekcji **Design** w panelu ustawień. To nadpisania per blok, które nakładają się na Twój globalny wygląd i wracają do niego, gdy są puste.
Czym są ustawienia wyglądu? Dowiedz się więcej tutaj: [Ustawienia wyglądu](/pl/aftersell/cart/design-settings).