> ## 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.
# Notes-Block
> Der Notes-Block des Aftersell Cart: ein einklappbares Bestellnotiz-Feld, das Käuferanweisungen im Warenkorb und in der Bestellung speichert.
> Der **Notes**-Block ist ein einklappbares Feld, in dem Käufer Bestellnotizen oder besondere Anweisungen hinzufügen können (Geschenknachrichten, Lieferanweisungen und so weiter), ohne den Warenkorb zu verlassen. Die Notiz wird im Warenkorb gespeichert und in die Bestellung übernommen.
## Verhalten
* Das Feld ist ein **einklappbares Disclosure**, standardmäßig eingeklappt. Das Einklappen ist rein visuell — eine gespeicherte Notiz gilt weiterhin. Ist es mit gespeicherter Notiz eingeklappt, wird ein Häkchen angezeigt, damit der Käufer weiß, dass seine Notiz gespeichert ist.
* Die Notiz **wird gespeichert, wenn der Käufer wegklickt** (beim Blur), mit Statusrückmeldung für Speichern / Gespeichert / Fehler.
* Wenn sich die Warenkorb-Notiz anderswo ändert — auf der `/cart`-Seite oder in einem anderen Tab — synchronisiert sich das Feld damit, es sei denn, der Käufer hat bereits zu tippen begonnen, sodass seine laufende Notiz nie überschrieben wird.
## Einstellungen
| Einstellung | Was sie steuert | Standard |
| --------------- | --------------------------------------------------- | ------------------------------------- |
| **Title** | Die Beschriftung des Felds. Rich Text, übersetzbar. | `Order notes` |
| **Placeholder** | Der Platzhaltertext des Eingabefelds. Übersetzbar. | `Special instructions for your order` |
## Platzierung und Limits
* **Region:** Body oder unten.
* **Maximum:** 1 pro Warenkorb-Zustand.
* **Zustand:** nur gefüllter Warenkorb.
* Nicht standardmäßig hinzugefügt. Nicht gesperrt — du kannst ihn entfernen oder ausblenden.
## Benutzerdefiniertes Template
Unterstützt ein [benutzerdefiniertes Template](/de/aftersell/cart/custom-templates) über seinen Code-Tab, das das integrierte Markup dieses Blocks durch dein JSX ersetzt. Das sind die Props, die er erhält.
| Prop | Typ | Wofür sie ist |
| --------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
| `titleHtml` | `string` | Bereinigtes Rich-Text-Titel-HTML. Leer, wenn der Händler den Titel leer gelassen hat. |
| `titleText` | `string` | Titel als reiner Text. Verwende ihn für das `aria-label` der Textarea und als Überschrift, wenn es keinen Rich Text gibt. |
| `hasTitle` | `boolean` | Ob eine der beiden Titelformen vorhanden ist. Steuert die Überschrift und das `aria-label` des Toggles. |
| `placeholder` | `string` | Platzhalter, der im leeren Notizfeld angezeigt wird. |
| `noteInput` | `string` | Aktueller Notiztext. |
| `status` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Speicher-Lebenszyklus. Steuert die gesprochene Status-Live-Region. |
| `statusLabel` | `string` | Aufgelöste Live-Region-Ansage für `status`. Leer im Idle-Zustand. |
| `displayStatus` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Status für das Symbol. Wie `status`, außer dass eine eingeklappte Notiz mit Text als `saved` gilt. |
| `isExpanded` | `boolean` | Ob das Notizfeld ausgeklappt ist. Das Einklappen ist rein visuell; die Notiz bleibt immer bestehen. |
| `onNoteChange` | `(value: string) => void` | Aktualisiert den Notiztext. Rufe sie mit dem neuen Wert auf, zum Beispiel aus dem `onInput` der Textarea. |
| `onNoteBlur` | `(event: unknown) => void` | Speichert die Notiz. Hänge sie direkt an das `onBlur` der Textarea; sie liest den Wert aus dem Event. |
| `onToggle` | `() => void` | Schaltet den Aus- und Einklappzustand um. |
**Die Notiz wird bei `onNoteBlur` gespeichert, nicht bei jedem Tastendruck.** Verdrahte sowohl `onNoteChange` als auch `onNoteBlur`, sonst werden Notizen stillschweigend nie gespeichert. Halte den Statustext in einer Live-Region, damit Screenreader Speichern und Gespeichert ansagen.
## Design
Style diesen Block über seinen **Design**-Abschnitt im Einstellungs-Panel. Das sind blockspezifische Overrides, die über deinem globalen Design liegen und darauf zurückfallen, wenn sie leer sind.
### Text
Der Abschnitt **Text** in Design lässt dich die Typografie zweier Elemente steuern. Verwende den **Text element**-Picker, um zwischen ihnen zu wechseln.
**Title** — die Abschnittsüberschrift über dem Notizfeld. Fett wird im Rich-Text-Editor darüber (im Settings-Tab) festgelegt. Die Textfarbe wird im Toggle-Abschnitt von Design festgelegt.
| Einstellung | Was sie steuert | Standard |
| ------------------ | --------------------------------- | -------- |
| **Size** | Schriftgröße. | `14px` |
| **Line height** | Multiplikator für die Zeilenhöhe. | `1.4` |
| **Letter spacing** | Zeichenabstand. | Normal |
**Note field** — der Text innerhalb der Textarea, in die Käufer ihre Notiz eintippen.
| Einstellung | Was sie steuert | Standard |
| ------------------ | ----------------------------------------------------------- | -------------------------------- |
| **Text color** | Farbe des Notiztexts. | Erbt von der Warenkorb-Textfarbe |
| **Size** | Schriftgröße. | `14px` |
| **Weight** | Schriftstärke — Light, Regular, Medium, Semibold oder Bold. | Regular (400) |
| **Line height** | Multiplikator für die Zeilenhöhe. | `1.5` |
| **Letter spacing** | Zeichenabstand. | Normal |
Was sind Design-Einstellungen? Erfahre mehr hier: [Design-Einstellungen](/de/aftersell/cart/design-settings).