``` `timer` * **Typ**: `string` * **Opis**: Aktualna wartość licznika sformatowana jako string * **Zastosowanie**: Wyświetlanie licznika odliczającego w niestandardowych implementacjach ogłoszeń ```

Time remaining: {props.timer}

``` `shouldUseTimer` * **Typ**: `boolean` * **Opis**: Wskazuje, czy funkcja licznika jest włączona dla tego ogłoszenia * **Zastosowanie**: Warunkowe renderowanie treści i elementów sterujących związanych z licznikiem ```

{props.shouldUseTimer && ( {props.timer} )}

``` `isTimerExpiredAndShouldHide` * **Typ**: `boolean` * **Opis**: Wskazuje, czy licznik wygasł i ogłoszenie powinno zostać ukryte * **Zastosowanie**: Sterowanie widocznością całego ogłoszenia na podstawie stanu licznika ```

{!props.isTimerExpiredAndShouldHide && (

{props.timer}

)}

```

## Nagrody progowe

Moduł Rewards pozwala dostosować wyświetlanie postępu nagród do własnego projektu, zachowując podstawowe funkcje nagród, takie jak śledzenie kamieni milowych, wizualizacja postępu i komunikaty o nagrodach.

### Dostępne propsy — **pełny szablon**

Pasek postępu nagród progowych z ikonami kamieni milowych darmowej wysyłki i produktu

`rewardsMessageHtml` * **Typ**: `string` * **Opis**: Zawartość HTML komunikatu o nagrodach * **Zastosowanie**: Wyświetlanie komunikatu o nagrodach z bogatym formatowaniem w niestandardowych implementacjach ```

``` `milestonesCompleted` * **Typ**: `number` * **Opis**: Liczba ukończonych kamieni milowych * **Zastosowanie**: Wyświetlanie liczby ukończeń lub obliczanie procentu ukończenia ```

{Math.round((props.milestonesCompleted / props.milestonesData.milestonesToRender.length) * 100)}% Complete

``` `milestonesData` * Typ: ``` { milestonesToRender: { id: string; label: string; icon: React.ReactElement; isCompleted: boolean; positionPercent: number; }[]; progressPercent: number; showMilestones: boolean; settings: { iconContainerSize: string; iconAlignment: string; labelAlignment: string; hideLabel: boolean; }; } ``` * **Opis**: Kompletna konfiguracja kamieni milowych i dane postępu dla systemu nagród * **Zastosowanie**: Dostęp do informacji o kamieniach milowych, procentu postępu i ustawień wyświetlania * **Właściwości**: * `milestonesToRender`: Tablica obiektów kamieni milowych ze statusem ukończenia i pozycjonowaniem * `progressPercent`: Aktualny postęp jako procent (0-100) * `showMilestones`: Czy wyświetlać znaczniki kamieni milowych * `settings`: Konfiguracja wizualna wyświetlania kamieni milowych

## Rabaty

Moduł Discounts obsługuje niestandardowe szablony, dzięki czemu możesz zaprojektować własny wygląd, zachowując podstawowe funkcje, takie jak zarządzanie regułami, widoczność sekcji i prezentacja nagród. Wewnętrzny identyfikator typu modułu dla niestandardowych szablonów to `TRIGGERED_REWARDS`, dla zachowania wstecznej zgodności z istniejącym kodem niestandardowych szablonów.

### **Dostępne propsy — pełny szablon**

`rules` * **Typ**: ``` { id: string; title: string; description: string; conditionsMet: boolean; }[] ``` * **Opis**: Tablica aktualnie włączonych reguł rabatowych * **Zastosowanie**: Wyświetlanie dostępnych nagród, ich tytułów, opisów oraz informacji, czy warunki każdej reguły zostały spełnione * **Właściwości**: * `id`: Unikalny identyfikator reguły nagrody * `title`: Tytuł reguły rabatowej * `description`: Opis reguły nagrody * `conditionsMet`: Czy warunki reguły są aktualnie spełnione przez koszyk. Użyj tego do budowania wzorców UX typu „odblokowano X” vs „wydaj jeszcze \$Y, aby odblokować X” ```

{props.rules.map((rule) => (

{rule.title}

{rule.conditionsMet ? "Reward unlocked!" : rule.description}

))}

``` `showSection` * **Typ**: `boolean` * **Opis**: Wskazuje, czy sekcja Discounts powinna być wyświetlana * **Zastosowanie**: Sterowanie widocznością całego modułu Discounts ```

{props.showSection && (

Available Rewards...

)}

``` `onToggleSection` * **Typ**: `() => void` * **Opis**: Funkcja zwrotna przełączająca stan widoczności sekcji Discounts * **Zastosowanie**: Podepnij do przycisków lub elementów interaktywnych, aby pozwolić użytkownikom pokazywać/ukrywać sekcję nagród ``` ```

## Rekomendacje

Moduł Recommendation pozwala dostosować wyświetlanie produktów upsell do własnego projektu, zachowując podstawowe funkcje e-commerce, takie jak wybór wariantów, akcje dodawania do koszyka i wyświetlanie informacji o produkcie.

### **Dostępne propsy — szablon kafelka rekomendacji**

Kafelek rekomendacji pokazujący produkt snowboard z ceną i przyciskiem Add

*Szablon kafelka rekomendacji ma [ten sam interfejs propsów co szablon kafelka upsell](#available-props-upsell-tile-template) w module Upsells. Wszystkie dostępne propsy, typy i przykłady użycia są udokumentowane w sekcji modułu Upsells poniżej.*

## Produkty w koszyku

Moduł Cart Items pozwala dostosować wyświetlanie produktów w koszyku do własnego projektu, zachowując podstawowe funkcje e-commerce. Ten moduł oferuje wiele typów szablonów, z których każdy ma własne propsy dla różnych aspektów wyświetlania produktów w koszyku. **Wyświetlanie wskaźnika ładowania podczas dodawania do koszyka lub aktualizacji koszyka:** Standardowy moduł Cart Items nie udostępnia wbudowanego spinnera „dodawanie do koszyka”. Jeśli chcesz wyświetlać stan ładowania podczas dodawania produktu lub trwania operacji na koszyku, użyj szablonu Product tile i odczytaj propsy `isLoading` oraz `loadingOperation` (udokumentowane poniżej), aby warunkowo renderować spinner lub nakładkę. Niestandardowe szablony wymagają doświadczenia deweloperskiego — zobacz informację na górze tej strony.

### **Dostępne propsy — szablon Product tile**

**Uwaga:** Włączenie szablonu *Product Tile* nadpisze wszystkie inne szablony w tym module, w tym **Variant template**, **Properties template**, **Bundle template** i **Price template**.\ Jeśli chcesz używać niestandardowego kodu w którymkolwiek z tych szablonów, ***musisz*** *wyłączyć szablon Product Tile.* Kafelek produktu w koszyku ze zdjęciem, wariantem, ceną promocyjną, wyborem ilości i przyciskiem subskrypcji

Kafelek produktu w koszyku ze zdjęciem, wariantem, ceną promocyjną, wyborem ilości i przyciskiem subskrypcji

`title` * **Typ**: `string` * **Opis**: Tytuł/nazwa produktu * **Zastosowanie**: Wyświetlanie głównej nazwy produktu w pozycjach koszyka `variant` * **Typ**: `React.ReactNode` * **Opis**: Wstępnie wyrenderowany komponent informacji o wariancie * **Zastosowanie**: Wyświetlanie szczegółów wariantu jako komponentu React `properties` * **Typ**: `React.ReactNode` * **Opis**: Wstępnie wyrenderowany komponent właściwości produktu * **Zastosowanie**: Wyświetlanie właściwości produktu i informacji o subskrypcji jako komponentu React `bundle` * **Typ**: `React.ReactNode` * **Opis**: Wstępnie wyrenderowany komponent szczegółów zestawu * **Zastosowanie**: Wyświetlanie informacji o zestawie jako komponentu React `compareAtPrice` * **Typ**: `string | undefined` * **Opis**: Sformatowana cena porównawcza (cena pierwotna) * **Zastosowanie**: Wyświetlanie pierwotnej ceny dla produktów w promocji `price` * **Typ**: `string` * **Opis**: Sformatowana aktualna cena * **Zastosowanie**: Wyświetlanie aktualnej ceny pozycji `savings` * **Typ**: `string | undefined` * **Opis**: Sformatowana kwota oszczędności * **Zastosowanie**: Wyświetlanie, ile klient oszczędza `imageUrl` * **Typ**: `string | undefined` * **Opis**: Adres URL zdjęcia produktu * **Zastosowanie**: Wyświetlanie zdjęcia produktu `productUrl` * **Typ**: `string | undefined` * **Opis**: Adres URL strony produktu * **Zastosowanie**: Link do strony szczegółów produktu `quantity` * **Typ**: `number` * **Opis**: Aktualna ilość pozycji w koszyku * **Zastosowanie**: Wyświetlanie ilości i zarządzanie nią `showQuantitySelector` * **Typ**: `boolean` * **Opis**: Czy wyświetlać elementy sterujące ilością * **Zastosowanie**: Warunkowe wyświetlanie wyboru ilości `discountCodes` * **Typ**: `string[] | undefined` * **Opis**: Tablica zastosowanych kodów rabatowych dla tej pozycji * **Zastosowanie**: Wyświetlanie rabatów dla konkretnej pozycji `subscription` * **Typ**: ``` { subscriptionUpgradeData: { buttonText: string; defaultSellingPlanId: number; } | null; sellingPlansData: { sellingPlanGroups: { name: string; selling_plans: { id: number; name: string; }[]; }[] | null; activeSellingPlanId: string; oneTimePurchaseText: string | null; } | null; upgradeSellingPlan: (item: CartItem, sellingPlanId: number) => void; changeSellingPlan: (item: CartItem, value: string) => void; getSellingPlanGroupText: (groupName: string, planName: string) => string; } ``` * **Opis**: Kompletny obiekt zarządzania subskrypcją z danymi ulepszenia, planami sprzedaży i funkcjami obsługi * **Zastosowanie**: Zarządzanie funkcjonalnością subskrypcji * Obiekt subscription zawiera: * **subscriptionUpgradeData**: Informacje o ulepszeniu (null, jeśli ulepszenie nie jest dostępne) * `buttonText`: Tekst przycisku ulepszenia * `defaultSellingPlanId`: ID domyślnego planu sprzedaży dla ulepszeń * **sellingPlansData**: Dostępne opcje planów sprzedaży (null, jeśli brak planów) * `sellingPlanGroups`: Tablica grup planów z ich planami sprzedaży * `activeSellingPlanId`: ID aktualnie wybranego planu sprzedaży * `oneTimePurchaseText`: Tekst opcji zakupu jednorazowego (null, jeśli niedostępna) * **upgradeSellingPlan**: Funkcja przejścia na konkretny plan sprzedaży * **changeSellingPlan**: Funkcja zmiany aktualnego planu sprzedaży * **getSellingPlanGroupText**: Funkcja pomocnicza do formatowania wyświetlanego tekstu planu sprzedaży `onIncrease` * **Typ**: `() => void` * **Opis**: Funkcja zwiększająca ilość pozycji * **Zastosowanie**: Obsługa akcji zwiększania ilości `onDecrease` * **Typ**: `() => void` * **Opis**: Funkcja zmniejszająca ilość pozycji * **Zastosowanie**: Obsługa akcji zmniejszania ilości `onDeleteProduct` * **Typ**: `() => void` * **Opis**: Funkcja usuwająca pozycję z koszyka * **Zastosowanie**: Obsługa usuwania pozycji `onQuantityChange` * **Typ**: `(quantity: string) => void` * **Opis**: Funkcja obsługująca bezpośrednie wprowadzanie ilości * **Zastosowanie**: Obsługa ręcznych zmian ilości `handleInputChange` * **Typ**: `(e: React.ChangeEvent) => void` * **Opis**: Funkcja obsługi zmian w polu ilości * **Zastosowanie**: Obsługa zmian w polu wprowadzania ilości `replaceItemWithVariant` * **Typ**: `(variantId: string) => Promise<{ success: boolean }>` * **Opis**: Funkcja zastępująca pozycję innym wariantem * **Zastosowanie**: Obsługa przełączania wariantów `isLoading` * **Typ**: `boolean` * **Opis**: Stan ładowania dla operacji na koszyku * **Zastosowanie**: Wyświetlanie wskaźników ładowania `loadingOperation` * **Typ**: `'increase' | 'decrease' | 'inputChange' | 'remove' | 'subscription' | undefined` * **Opis**: Konkretna operacja, która aktualnie się ładuje * **Zastosowanie**: Wyświetlanie stanów ładowania właściwych dla danej operacji `setLoadingOperation` * **Typ**: `(op: "increase" | "decrease" | "inputChange" | "remove" | "subscription" | undefined) => void` * **Opis**: Funkcja ustawiająca stan operacji ładowania * **Zastosowanie**: Zarządzanie stanami ładowania dla różnych operacji `rawItem` * **Typ**: `CartItem` (zobacz `CartItem` [typ poniżej](#cartitem-object-properties)) * **Opis**: Surowe dane pozycji koszyka zawierające wszystkie informacje

### **Dostępne propsy — szablon Variant**

Wiersz wariantu pozycji koszyka pokazujący wybrany rozmiar Medium

`item` * **Typ**: `CartItem` (zobacz `CartItem` [typ poniżej](#cartitem-object-properties)) * **Opis**: Surowe dane pozycji koszyka zawierające informacje o wariancie * **Zastosowanie**: Dostęp do szczegółów wariantu z pozycji koszyka

### **Dostępne propsy — szablon Properties**

Wiersz właściwości pozycji koszyka pokazujący notatkę z wiadomością prezentową

`productProperties` * **Typ**: `{ key: string; value: string; isUrl?: boolean; }[]` * **Opis**: Tablica właściwości produktu (pola niestandardowe, właściwości pozycji) `subscriptionLabel` * **Typ**: `string | undefined` * **Opis**: Etykieta informacji o subskrypcji

### **Dostępne propsy — szablon Bundle**

Rozwinięty zestaw z listą trzech dołączonych produktów składowych z wariantami

`getSizedImageUrl` * **Typ**: `getSizedImageUrl: ({ src, width, height }: SizedImageParams) => string` * **Opis**: Funkcja pomocnicza do pobierania adresów URL obrazów o właściwym rozmiarze `item` * **Typ**: ``` { itemComponents: { quantity: number; image: { url: string; height: number | null; width: number | null; alt: string; }; product: { title: string; has_only_default_variant: boolean; }; variantTitle: string; }[]; variantTitle: string | undefined; hasComponents: boolean; } ``` * **Opis**: Informacje o pozycji zestawu wraz ze składnikami. `itemComponents` to tablica obiektów składników — iteruj po niej (map), aby wyrenderować każdy składnik zestawu. `showDetailsText` * **Typ**: `string | undefined` * **Opis**: Tekst akcji „pokaż szczegóły” * **Zastosowanie**: Wyświetlanie tekstu przycisku rozwijania `hideDetailsText` * **Typ**: `string | undefined` * **Opis**: Tekst akcji „ukryj szczegóły” `isExpanded` * **Typ**: `boolean` * **Opis**: Czy szczegóły zestawu są rozwinięte `toggleCollapsible` * **Typ**: `() => void` * **Opis**: Funkcja przełączająca widoczność szczegółów zestawu * **Zastosowanie**: Obsługa akcji rozwijania/zwijania `chevronDownIconComponent` * **Typ**: `React.ReactElement` * **Opis**: Wstępnie wyrenderowana ikona strzałki (chevron) do rozwijania/zwijania * **Zastosowanie**: Wyświetlanie spójnego wskaźnika rozwijania/zwijania

### **Dostępne propsy — szablon Price**

Cena w koszyku z przekreśloną ceną pierwotną, ceną promocyjną i oszczędnościami

`compareAtPrice` * **Typ**: `string | undefined` * **Opis**: Sformatowana cena porównawcza (cena pierwotna) * **Zastosowanie**: Wyświetlanie pierwotnej ceny dla produktów w promocji `price` * **Typ**: `string` * **Opis**: Sformatowana aktualna cena * **Zastosowanie**: Wyświetlanie aktualnej ceny pozycji `savings` * **Typ**: `string | undefined` * **Opis**: Sformatowana kwota oszczędności * **Zastosowanie**: Wyświetlanie, ile klient oszczędza

### **Właściwości obiektu CartItem**

Obiekt `CartItem` zawiera wszystkie szczegółowe informacje o pozycji koszyka. Ten obiekt jest dostępny jako props.rawItem w szablonie Product Tile oraz props.item w szablonie Variant.

#### **Podstawowa identyfikacja**

* `key (string)` - Unikalny identyfikator tej pozycji koszyka. * `id (number)` - ID wariantu (pole starszego typu, użyj zamiast niego variant\_id) * `variant_id (number)` - ID wariantu Shopify dla tej pozycji * `product_id (number)` - ID produktu Shopify * `lineIdxFrom1 (number)` - Indeks tej pozycji (liczony od 1) w oryginalnym koszyku przed modyfikacjami

#### **Informacje o produkcie**

* `title (string)` - Tytuł pozycji (zazwyczaj tytuł wariantu) * `product_title (string)` - Główny tytuł produktu * `handle (string)` - Uchwyt adresu URL produktu (np. „camp-stool”) * `vendor (string)` - Nazwa dostawcy/marki produktu * `product_type (string)` - Kategoria/typ produktu do celów podatkowych * `sku (string)` - Identyfikator SKU (Stock Keeping Unit) * `product_description (string)` - Pełny opis produktu * `product_has_only_default_variant (boolean)` - Czy produkt ma tylko jeden wariant

#### **Ceny (wszystkie ceny w centach)**

* `quantity (number)` - Liczba sztuk tej pozycji w koszyku * `price (number)` - Cena jednostkowa przed rabatami * `original_price (number)` - To samo co price * `discounted_price (number)` - Cena jednostkowa po rabatach na poziomie produktu * `compare_at_price (number | null)` - Cena porównawcza (MSRP). Uwaga: To pole jest dodawane przez Upcart, a nie dostarczane przez API koszyka Shopify * `final_line_price (number)` - Łączna cena po rabatach na poziomie produktu (ilość × discounted\_price) * `original_line_price (number)` - Łączna cena przed rabatami (ilość × price) * `line_price (number)` - Łączna cena po wszystkich rabatach * `final_price (number)` - **Przestarzałe** - Cena jednostkowa po rabatach produktowych (nie uwzględnia ilości) * `total_discount (number)` - To samo co line\_level\_total\_discount * `line_level_total_discount (number)` - Łączna kwota rabatu zastosowanego do tej pozycji

#### **Media i adresy URL**

* `image (string)` - Adres URL głównego zdjęcia produktu * `url (string)` - Względna ścieżka URL do strony produktu (np. „/products/camp-stool?variant=42789611372803”) * `featured_image (object | null)` - Szczegóły wyróżnionego zdjęcia: * `alt (string)` - Tekst alternatywny zdjęcia * `aspect_ratio (number)` - Proporcje zdjęcia * `height (number)` - Wysokość zdjęcia w pikselach * `url (string)` - Adres URL zdjęcia * `width (number)` - Szerokość zdjęcia w pikselach

#### **Warianty i opcje**

* `variant_title (string | null)` - Tytuł wariantu (np. „Large / Red”) * `variant_options (string[])` - Tablica wartości opcji wariantu * `options_with_values (Array)` - Szczegółowe informacje o opcjach: * `name (string)` - Nazwa opcji (np. „Size”) * `value (string)` - Wartość opcji (np. „Large”) * `untranslated_product_title (string | undefined)` - Oryginalny tytuł produktu przed tłumaczeniem (tylko w odpowiedziach mutacji koszyka) * `untranslated_variant_title (string | undefined)` - Oryginalny tytuł wariantu przed tłumaczeniem (tylko w odpowiedziach mutacji koszyka)

#### **Właściwości niestandardowe i metadane**

* `properties (Record | null)` - Niestandardowe właściwości pozycji lub `null`, gdy pozycja ich nie ma — sprawdź przed odczytem klucza. Właściwości, których klucze zaczynają się od `__`, są zawsze ukryte przed klientami; klucze zaczynające się od pojedynczego `_` również są ukryte, gdy włączone jest ustawienie koszyka **Hide properties starting with single underscore "\_"**. * `gift_card (boolean)` - Czy ta pozycja jest kartą podarunkową * `taxable (boolean)` - Czy ta pozycja podlega opodatkowaniu * `requires_shipping (boolean)` - Czy ta pozycja wymaga wysyłki * `grams (number)` - Waga pozycji w gramach

#### **Rabaty i promocje**

* `discounts (Array)` - Uproszczone informacje o rabatach: * `amount (number)` - Kwota rabatu w centach * `title (string)` - Tytuł/nazwa rabatu * `line_level_discount_allocations (Array)` - Szczegółowe informacje o alokacji rabatów: * `amount (number)` - Kwota rabatu w centach * `discount_application (object)` - Pełne szczegóły zastosowania rabatu: * `allocation_method (string)` - Sposób alokacji rabatu * `created_at (string)` - Kiedy rabat został utworzony * `description (string | null)` - Opis rabatu * `key (string)` - Identyfikator klucza rabatu * `target_selection (string)` - Co jest celem rabatu * `target_type (string)` - Typ celu * `title (string)` - Tytuł rabatu * `total_allocated_amount (number)` - Łączna alokowana kwota * `type ('discount_code' | '')` - Typ rabatu (pusty string dla rabatów automatycznych) * `value (string)` - Wartość rabatu * `value_type (string)` - Sposób stosowania wartości

#### **Produkty w zestawach**

* `has_components (boolean | undefined)` - Czy ta pozycja jest zestawem zawierającym inne produkty (tylko w odpowiedziach GET koszyka) * `item_components (Array | null | undefined)` - Szczegóły składników zestawu: * `quantity (number)` - Ilość tego składnika * `image (object)` - Zdjęcie składnika: * `url (string)` - Adres URL zdjęcia * `height (number | null)` - Wysokość zdjęcia * `width (number | null)` - Szerokość zdjęcia * `alt (string)` - Tekst alternatywny * `product (object)` - Informacje o produkcie składnika: * `title (string)` - Tytuł produktu * `has_only_default_variant (boolean)` - Czy produkt ma tylko domyślny wariant * `variantTitle (string)` - Tytuł wariantu składnika

#### **Reguły biznesowe**

* `quantity_rule (object | undefined)` - Ograniczenia ilości (tylko w odpowiedziach GET koszyka): * `min (number)` - Minimalna dozwolona ilość * `max (number | null)` - Maksymalna dozwolona ilość (null = brak limitu) * `increment (number)` - Krok zmiany ilości

#### **Informacje o subskrypcji**

* `selling_plan_allocation (object | undefined)` - Szczegóły subskrypcji/planu sprzedaży: * `price (number)` - Cena subskrypcji w centach * `compare_at_price (number | null)` - Cena porównawcza subskrypcji * `per_delivery_price (number)` - Cena za dostawę * `selling_plan (object)` - Szczegóły planu sprzedaży: * `id (number)` - ID planu sprzedaży * `name (string)` - Nazwa planu * `description (string)` - Opis planu * `options (Array)` - Opcje planu: * `name (string)` - Nazwa opcji * `position (number)` - Pozycja opcji * `value (string)` - Wartość opcji * `recurring_deliveries (boolean)` - Czy plan ma cykliczne dostawy

#### **Metadane integracji**

* `__appIntegrated (object | undefined)` - Dane integracji z aplikacją firmy trzeciej: * `app ('stay.ai')` - Identyfikator zintegrowanej aplikacji * `bundleRole ('parent' | 'child')` - Rola w strukturze zestawu

## Upselle

Moduł Upsells pozwala dostosować wyświetlanie produktów upsell do własnego projektu, zachowując podstawowe funkcje e-commerce, takie jak wybór wariantów, akcje dodawania do koszyka i wyświetlanie informacji o produkcie.

### **Dostępne propsy — szablon kafelka upsell**

Kafelek upsell pokazujący produkt z ceną promocyjną, listą wariantów i przyciskiem Add

`itemUrl` * **Typ**: `string` * **Opis**: Adres URL strony produktu * **Zastosowanie**: Tworzenie linków do strony szczegółów produktu dla lepszej nawigacji użytkownika ```

``` `imageUrl` * **Typ**: `string | undefined` * **Opis**: Adres URL zdjęcia produktu * **Zastosowanie**: Wyświetlanie zdjęć produktów w niestandardowych implementacjach upselli * **Rozwiązanie awaryjne**: Obsłuż wartości undefined w bezpieczny sposób, używając obrazów zastępczych `description` * **Typ**: `string` * **Opis**: Opis produktu * **Zastosowanie**: Wyświetlanie opisu produktu w niestandardowych implementacjach upselli `altText` * **Typ**: `string` * **Opis**: Tekst alternatywny zdjęcia produktu dla dostępności * **Zastosowanie**: Wsparcie czytników ekranu i poprawa zgodności z wymogami dostępności ``` {props.altText}

``` `productId` * **Typ**: `string` * **Opis**: Unikalny identyfikator produktu * **Zastosowanie**: Śledzenie produktów, implementacja analityki lub użycie w funkcji dodawania do koszyka `productTitle` * **Typ**: `string` * **Opis**: Tytuł/nazwa produktu * **Zastosowanie**: Wyświetlanie nazwy produktu w niestandardowych implementacjach upselli ```

{props.productTitle}

``` `oldPrice` & `newPrice` * **Typ**: `string | null` (oldPrice), `string` (newPrice) * **Opis**: Sformatowana cena porównawcza i cena aktualna * **Zastosowanie**: Wyświetlanie informacji cenowych ze wskaźnikami promocji `isSingleVariant` * **Typ**: `boolean` * **Opis**: Wskazuje, czy produkt ma tylko jeden wariant * **Zastosowanie**: Warunkowe renderowanie elementów interfejsu wyboru wariantu `productOptions` * **Typ**: `{ name: string; position: 1 | 2 | 3; values: string[]; }[]` * **Opis**: Kompletna konfiguracja opcji produktu wraz ze wszystkimi dostępnymi wyborami * **Zastosowanie**: Dostęp do szczegółowych informacji o opcjach produktu dla zaawansowanego interfejsu wyboru wariantów `variantOptions` * **Typ**: `{ label: string; value: string }[]` * **Opis**: Dostępne opcje wariantów produktu * **Zastosowanie**: Tworzenie list rozwijanych lub przycisków wyboru wariantu * **Struktura**: Każda opcja zawiera wyświetlaną etykietę i unikalny identyfikator wartości `selectedVariantId` & `selectedVariantLabel` * **Typ**: string (selectedVariantId), string | undefined (selectedVariantLabel) * **Opis**: ID aktualnie wybranego wariantu i jego wyświetlana etykieta * **Zastosowanie**: Śledzenie i wyświetlanie informacji o wybranym wariancie `onVariantChange` * **Typ**: `(variantId: string) => void` * **Opis**: Funkcja obsługująca zmiany wyboru wariantu * **Zastosowanie**: Aktualizacja wybranego wariantu, gdy użytkownik dokona wyboru `onAddClick` * **Typ**: `(productId: string, variantId?: string) => void` * **Opis**: Funkcja obsługująca dodanie produktu do koszyka * **Zastosowanie**: Implementacja funkcji dodawania do koszyka z właściwą identyfikacją produktu i wariantu ``` ``` `rating` & `reviewCount` * **Typ**: `number | undefined` (rating), `string | undefined` (reviewCount) * **Opis**: Ocena produktu i sformatowany tekst liczby opinii * **Zastosowanie**: Wyświetlanie dowodu społecznego i wskaźników jakości produktu `addLoading` & `addButtonText` * **Typ**: `boolean` (addLoading), `string` (addButtonText) * **Opis**: Stan ładowania akcji dodawania do koszyka i tekst przycisku * **Zastosowanie**: Przekazywanie użytkownikowi informacji zwrotnej podczas operacji na koszyku i dostosowanie tekstu przycisku `cartItemsCount` * **Typ**: `number` * **Opis**: Aktualna liczba produktów w koszyku * **Zastosowanie**: Wyświetlanie stanu koszyka lub implementacja logiki opartej na koszyku

## Dodatkowe notatki

Moduł Notes pozwala dostosować funkcjonalność notatek do koszyka do własnego projektu, zachowując podstawowe możliwości robienia notatek, takie jak rozwijane sekcje, obsługa pola tekstowego i stany ładowania.

### **Dostępne propsy — pełny szablon**

Sekcja notatek koszyka z rozwijanym polem tekstowym specjalnych instrukcji

`cartNote` * **Typ**: `string` * **Opis**: Aktualna treść notatki do koszyka wprowadzona przez klienta * **Zastosowanie**: Wyświetlanie tekstu notatki do koszyka i zarządzanie nim w niestandardowych implementacjach ```

```

`notesPlaceholder`

* **Typ**: `string`

* **Opis**: Tekst zastępczy pola wprowadzania notatek

* **Zastosowanie**: Podpowiedź dla klientów, co powinni zawrzeć w notatce

```
<textarea  
  placeholder={props.notesPlaceholder}  
  ...  
/>
```

`notesTitle`

* **Typ**: `string`

* **Opis**: Tytuł/nagłówek sekcji notatek

* **Zastosowanie**: Wyświetlanie tytułu sekcji w niestandardowych implementacjach notatek

```
<h3 className="notes-title" dangerouslySetInnerHTML={{ __html: props.notesTitle }} />
```

`chevronDownIconComponent`

* **Typ**: `React.ReactElement`

* **Opis**: Wstępnie wyrenderowany komponent ikony strzałki (chevron) do funkcji rozwijania/zwijania

* **Zastosowanie**: Wyświetlanie spójnych wskaźników rozwijania/zwijania w niestandardowych implementacjach

`loadingIndicatorComponent`

* **Typ**: `React.ReactElement | null`

* **Opis**: Wstępnie wyrenderowany komponent wskaźnika ładowania dla operacji asynchronicznych

* **Zastosowanie**: Wyświetlanie stanów ładowania podczas zapisywania notatki

`handleCartNoteChange`

* **Typ**: `(newCartNote: string) => void`

* **Opis**: Funkcja obsługująca zmiany treści notatki do koszyka

* **Zastosowanie**: Aktualizacja notatki do koszyka, gdy użytkownik modyfikuje tekst

`isExpanded`

* **Typ**: `boolean`

* **Opis**: Wskazuje, czy sekcja notatek jest aktualnie rozwinięta

* **Zastosowanie**: Sterowanie widocznością obszaru wprowadzania notatek

`toggleCollapsible`

* **Typ**: `() => void`

* **Opis**: Funkcja przełączająca stan rozwinięcia/zwinięcia sekcji notatek

* **Zastosowanie**: Podepnij do przycisków lub elementów interaktywnych, aby sterować widocznością sekcji

***

<div id="footer-section">
  ## Sekcja Footer
</div>

<div id="add-ons">
  ## Dodatki
</div>

Moduł Addons pozwala dostosować wyświetlanie produktów-dodatków do własnego projektu, zachowując podstawowe funkcje e-commerce, takie jak wyświetlanie informacji o produkcie, ceny, przełączniki i formatowanie waluty.

<div id="available-props-full-template-6">
  ### **Dostępne propsy — pełny szablon**
</div>

`addonProduct`

* **Typ**:

```
  {  
    product: {  
      id: number;  
      title: string;  
      description: string;  
    };  
    variant: {  
      id: number;  
      price: number;  
      compare_at_price: number | null;  
    };  
    image: {  
      src: string;  
      alt: string;  
    };  
  }
  ```

* **Opis**: Kompletne informacje o produkcie-dodatku, w tym szczegóły produktu, ceny wariantu i dane zdjęcia

* **Zastosowanie**: Dostęp do wszystkich informacji o produkcie potrzebnych do wyświetlania produktów-dodatków

* **Struktura**: Zawiera zagnieżdżone obiekty product, variant i image z kompleksowymi danymi produktu

* **Właściwości obiektu Product** `addonProduct.product`

* **id**: Unikalny numeryczny identyfikator produktu
    * **title**: Wyświetlana nazwa produktu-dodatku
    * **description**: Opis produktu w formacie HTML
  * **Właściwości obiektu Variant**

* **id**: Unikalny numeryczny identyfikator wariantu
    * **price**: Aktualna cena w centach
    * **compare\_at\_price**: Cena pierwotna w centach (null, jeśli brak ceny porównawczej)
  * **Właściwości obiektu Image**

* **src**: Adres URL zdjęcia produktu
    * **alt**: Tekst alternatywny zdjęcia (dla dostępności)

`toggle`

* **Typ**:

```
  {  
    state: 'enabled' | 'disabled' | 'loading';  
    handleEnable: () => void;  
    handleDisable: () => void;  
  } | null
  ```

* **Opis**: Stan przełącznika i funkcje obsługi włączania/wyłączania dodatku

* **Zastosowanie**: Implementacja interaktywnego przełącznika wyboru dodatku

* **Stany**: Trzy możliwe stany — enabled, disabled i loading

* **Funkcje obsługi**: Osobne funkcje dla akcji włączania i wyłączania

`moneyFormat`

* **Typ**: `string`

* **Opis**: Ciąg formatu waluty używany do formatowania cen

* **Zastosowanie**: Przekaż do funkcji formatMoney dla spójnego wyświetlania waluty

`formatMoney`

* **Typ**:

```
  (options: {  
    cents: string | number;  
    format?: string;  
    shouldRemoveHTML?: boolean;  
  }) => string
  ```

* **Opis**: Funkcja pomocnicza do formatowania wartości walutowych

* **Zastosowanie**: Spójne formatowanie cen zgodnie z ustawieniami waluty sklepu

* **Parametry**: Przyjmuje wartość w centach, opcjonalny ciąg formatu oraz opcję usuwania HTML

<div id="discount-codes">
  ## Kody rabatowe
</div>

Moduł Discount Code pozwala dostosować funkcjonalność wprowadzania kodów rabatowych do własnego projektu, zachowując podstawowe możliwości e-commerce, takie jak walidacja kodów, wysyłanie formularza i informacje zwrotne dla użytkownika.

<div id="available-props-full-template-7">
  ### **Dostępne propsy — pełny szablon**
</div>

`indicator`

* **Typ**: `'validating' | 'invalid' | 'none'`

* **Opis**: Aktualny stan walidacji pola kodu rabatowego

* **Zastosowanie**: Wyświetlanie odpowiedniej informacji zwrotnej w interfejsie na podstawie stanu walidacji

* **Stany**:

* `validating`: Kod jest przetwarzany/walidowany
  * `invalid`: Walidacja kodu nie powiodła się
  * `none`: Brak stanu walidacji (domyślny/bezczynny)

`discountCodeInput`

* **Typ**: `string`

* **Opis**: Aktualna wartość pola wprowadzania kodu rabatowego

* **Zastosowanie**: Wyświetlanie tekstu kodu rabatowego wprowadzonego przez użytkownika i zarządzanie nim

```
<input  
  type="text"  
  value={props.discountCodeInput}  
  onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
  ...  
/>
```

`discountCodePlaceholder`

* **Typ**: `string`

* **Opis**: Tekst zastępczy pola wprowadzania kodu rabatowego

* **Zastosowanie**: Podpowiedź dla użytkowników, co wpisać w pole

`discountCodeButtonText`

* **Typ**: `string`

* **Opis**: Tekst wyświetlany na przycisku zastosowania/wysłania

* **Zastosowanie**: Dostosowanie tekstu przycisku wysyłania kodu rabatowego

`setDiscountCodeInput`

* **Typ**: `(value: string | ((prev: string) => string)) => void`

* **Opis**: Funkcja aktualizująca wartość pola kodu rabatowego

* **Zastosowanie**: Obsługa zmian wprowadzanych przez użytkownika w polu kodu rabatowego

`handleSubmit`

* **Typ**: `(e: React.FormEvent<HTMLFormElement>) => void`

* **Opis**: Funkcja obsługująca wysłanie formularza w celu zastosowania kodu rabatowego

* **Zastosowanie**: Przetwarzanie walidacji i stosowania kodu rabatowego

* **Zdarzenie**: Obsługuje zdarzenia wysłania formularza

```
<form onSubmit={props.handleSubmit} >  
  <div className="input-group">  
    <input  
      type="text"  
      value={props.discountCodeInput}  
      onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
      placeholder={props.discountCodePlaceholder}  
    />   
    <button   
      type="submit"  
      disabled={props.indicator === 'validating' || !props.discountCodeInput.trim()}  
    >  
      {props.discountCodeButtonText}  
    </button>  
  </div>  
</form>
```

<div id="cart-summary">
  ## Podsumowanie koszyka
</div>

Moduł Cart Summary pozwala dostosować wyświetlanie podsumowania koszyka i rabatów do własnego projektu, zachowując podstawowe funkcje e-commerce, takie jak zarządzanie rabatami, obliczanie oszczędności i przejrzystość cen.

<div id="available-props-full-template-8">
  ### **Dostępne propsy — pełny szablon**
</div>

`totalSavingsText`

* **Typ**: `string`

* **Opis**: Etykieta tekstowa sekcji łącznych oszczędności

* **Zastosowanie**: Wyświetlanie etykiety oszczędności w niestandardowych implementacjach podsumowania koszyka

`discountApplications`

* **Typ**:

```
  {  
    key: string;  
    title: string;  
    type: 'discount_code' | '';  
  }[]
  ```

* **Opis**: Tablica zastosowanych kodów rabatowych i rabatów automatycznych

* **Zastosowanie**: Wyświetlanie wszystkich aktywnych rabatów z ich tytułami i typami

* **Struktura**: Każdy rabat zawiera unikalny klucz, wyświetlany tytuł i identyfikator typu

`cartTotalDiscount`

* **Typ**: `number`

* **Opis**: Łączna kwota rabatu w centach

* **Zastosowanie**: Dostęp do surowej wartości rabatu do obliczeń lub niestandardowego formatowania

`showCartTotalDiscount`

* **Typ**: `boolean`

* **Opis**: Wskazuje, czy łączny rabat powinien być wyświetlany. Oznaczony jako przestarzały na rzecz `showTotalSavings`, ale zobacz uwagę poniżej — wewnątrz niestandardowego szablonu to nadal ten props, którym dysponujesz.

* **Zastosowanie**: Warunkowe renderowanie informacji o rabacie w zależności od ustawień

`formattedCartTotalDiscount`

* **Typ**: `string`

* **Opis**: Wstępnie sformatowany ciąg HTML łącznej kwoty rabatu. Oznaczony jako przestarzały na rzecz `formattedTotalSavings`, ale zobacz uwagę poniżej.

* **Zastosowanie**: Wyświetlanie poprawnie sformatowanej kwoty rabatu z symbolami waluty

<Warning>
  **`showTotalSavings` i `formattedTotalSavings` nie są dostępne wewnątrz niestandardowego szablonu.** Istnieją w wewnętrznym kontekście modułu, ale szablon Cart summary otrzymuje tylko `showCartTotalDiscount` i `formattedCartTotalDiscount` — odczyt nowszej pary zwraca `undefined`. Użyj tych dwóch powyżej i pamiętaj, że pokazują tylko sumę rabatów; nie uwzględniają ustawienia **Show compare-at price savings in footer total**.
</Warning>

`isRemovingDiscount`

* **Typ**: `boolean`

* **Opis**: Wskazuje, czy trwa operacja usuwania rabatu

* **Zastosowanie**: Wyświetlanie stanów ładowania podczas usuwania rabatu

`handleRemoveDiscount`

* **Typ**: `() => Promise<void>`

* **Opis**: Funkcja obsługująca usuwanie kodu rabatowego

* **Zastosowanie**: Usuwanie zastosowanych kodów rabatowych z koszyka

`totalCompareAtPrice`

* **Typ**: `number`

* **Opis**: Suma cen porównawczych (wszystkich produktów w koszyku)

* **Zastosowanie**: Obliczanie i wyświetlanie oszczędności lub informacji o pierwotnych cenach

`totalAfterAllDiscounts`

* **Typ**: `number`

* **Opis**: Ostateczna suma koszyka w centach po zastosowaniu wszystkich rabatów

* **Zastosowanie**: Wyświetlanie ostatecznej ceny, którą zapłacą klienci

`originalTotalPrice`

* **Typ**: `number`

* **Opis**: Pierwotna suma koszyka w centach przed jakimikolwiek rabatami

* **Zastosowanie**: Pokazywanie pierwotnych cen dla przejrzystości i obliczania oszczędności

`cartItemCount`

* **Typ**: `number`

* **Opis**: Łączna liczba produktów w koszyku

* **Zastosowanie**: Wyświetlanie informacji o liczbie produktów w podsumowaniach koszyka

<div id="trust-badges">
  ## Odznaki zaufania
</div>

Moduł Trust Badges pozwala dostosować wyświetlanie odznak zaufania do własnego projektu, zachowując podstawowe funkcje budowania zaufania, takie jak warunkowa widoczność odznak i właściwa obsługa obrazów.

<div id="available-props-full-template-9">
  ### **Dostępne propsy — pełny szablon**
</div>

`showBadge`

* **Typ**: `boolean`

* **Opis**: Wskazuje, czy odznaka zaufania powinna być wyświetlana

* **Zastosowanie**: Sterowanie widocznością odznak zaufania w zależności od ustawień modułu

`badgeUrl`

* **Typ**: `string`

* **Opis**: Adres URL obrazu odznaki zaufania do wyświetlenia

* **Zastosowanie**: Źródłowy adres URL obrazu odznaki zaufania w niestandardowych implementacjach

Shopping Cart ({props.cartQuantity})

{rule.title}

Available Rewards...

{props.productTitle}