> ## 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 Notes
> Blok Notes w Aftersell Cart: zwijane pole notatek do zamówienia, które zapisuje instrukcje klienta w koszyku i zamówieniu.
> Blok **Notes** to zwijane pole, w którym klienci mogą dodawać notatki do zamówienia lub specjalne instrukcje (wiadomości do prezentu, instrukcje dostawy itd.) bez opuszczania koszyka. Notatka jest zapisywana w koszyku i przenoszona do zamówienia.
## Działanie
* Pole jest **zwijanym elementem (disclosure)**, domyślnie zwiniętym. Zwinięcie jest tylko wizualne — zapisana notatka nadal obowiązuje. Gdy pole jest zwinięte, a notatka zapisana, wyświetla się znacznik wyboru, aby klient wiedział, że jego notatka jest zachowana.
* Notatka **zapisuje się, gdy klient kliknie poza pole** (on blur), z informacją o statusie: zapisywanie / zapisano / błąd.
* Jeśli notatka koszyka zmieni się gdzie indziej — na stronie `/cart` lub w innej karcie — pole synchronizuje się z nią, chyba że klient już zaczął pisać, dzięki czemu jego notatka w trakcie pisania nigdy nie jest nadpisywana.
## Ustawienia
| Ustawienie | Co kontroluje | Domyślnie |
| --------------- | --------------------------------------------------- | ------------------------------------- |
| **Title** | Etykieta pola. Tekst sformatowany, można tłumaczyć. | `Order notes` |
| **Placeholder** | Tekst zastępczy pola. Można tłumaczyć. | `Special instructions for your order` |
## Umiejscowienie i limity
* **Region:** korpus (body) lub dół (bottom).
* **Maksymalnie:** 1 na stan koszyka.
* **Stan:** tylko wypełniony koszyk.
* Nie jest dodawany domyślnie. Nie jest zablokowany — możesz go usunąć lub ukryć.
## Szablon niestandardowy
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.
| Prop | Typ | Do czego służy |
| --------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| `titleHtml` | `string` | Oczyszczony sformatowany tytuł w HTML. Pusty, gdy sprzedawca zostawił tytuł pusty. |
| `titleText` | `string` | Tytuł jako zwykły tekst. Użyj go dla `aria-label` textarea oraz jako nagłówka, gdy nie ma tekstu sformatowanego. |
| `hasTitle` | `boolean` | Czy istnieje którakolwiek forma tytułu. Warunkuje nagłówek i `aria-label` przełącznika. |
| `placeholder` | `string` | Placeholder pokazywany w pustym polu notatki. |
| `noteInput` | `string` | Aktualny tekst notatki. |
| `status` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Cykl zapisu. Steruje odczytywanym na głos regionem statusu (live region). |
| `statusLabel` | `string` | Rozwiązany komunikat live region dla `status`. Pusty w stanie bezczynności. |
| `displayStatus` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Status dla ikony. Jak `status`, z tym że zwinięta notatka z tekstem odczytywana jest jako `saved`. |
| `isExpanded` | `boolean` | Czy pole notatki jest rozwinięte. Zwinięcie jest tylko wizualne; notatka zawsze pozostaje zachowana. |
| `onNoteChange` | `(value: string) => void` | Aktualizuje tekst notatki. Wywołuj z nową wartością, np. z `onInput` textarea. |
| `onNoteBlur` | `(event: unknown) => void` | Zapisuje notatkę. Podepnij bezpośrednio do `onBlur` textarea; odczytuje wartość ze zdarzenia. |
| `onToggle` | `() => void` | Przełącza stan rozwinięcia i zwinięcia. |
**Notatka zapisuje się w `onNoteBlur`, a nie przy każdym naciśnięciu klawisza.** Podepnij zarówno `onNoteChange`, jak i `onNoteBlur`, w przeciwnym razie notatki po cichu nigdy się nie zapiszą. Trzymaj tekst statusu w live region, aby czytniki ekranu ogłaszały zapisywanie i zapisano.
## Wygląd
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.
### Text
Sekcja **Text** w Design pozwala kontrolować typografię dwóch elementów. Użyj selektora **Text element**, aby przełączać się między nimi.
**Title** — nagłówek sekcji nad polem notatki. Pogrubienie ustawia się w edytorze Rich Text powyżej (w zakładce Settings). Kolor tekstu ustawia się w sekcji Toggle w Design.
| Ustawienie | Co kontroluje | Domyślnie |
| ------------------ | ------------------------ | --------- |
| **Size** | Rozmiar czcionki. | `14px` |
| **Line height** | Mnożnik wysokości linii. | `1.4` |
| **Letter spacing** | Odstępy między znakami. | Normal |
**Note field** — tekst wewnątrz pola textarea, w którym kupujący wpisują swoją notatkę.
| Ustawienie | Co kontroluje | Domyślnie |
| ------------------ | ------------------------------------------------------------- | ---------------------------------- |
| **Text color** | Kolor tekstu notatki. | Dziedziczy z koloru tekstu koszyka |
| **Size** | Rozmiar czcionki. | `14px` |
| **Weight** | Grubość czcionki — Light, Regular, Medium, Semibold lub Bold. | Regular (400) |
| **Line height** | Mnożnik wysokości linii. | `1.5` |
| **Letter spacing** | Odstępy między znakami. | Normal |
Czym są ustawienia wyglądu? Dowiedz się więcej tutaj: [Ustawienia wyglądu](/pl/aftersell/cart/design-settings).