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

> Aftersell Cart Notes-blokken: et sammenklappeligt ordrenote-felt, som gemmer kundens instruktioner i kurven og ordren.

> Blokken **Notes** er et sammenklappeligt felt, hvor kunder kan tilføje ordrenoter eller særlige instruktioner (gavebeskeder, leveringsinstruktioner og så videre) uden at forlade kurven. Noten gemmes i kurven og føres videre til ordren.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-notes-block-collapsible-order-notes-field.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=a54c41fc0b8417e00e8232762ef6a6c2" alt="Notes-blok med et sammenklappeligt ordrenote-felt, hvor kunder kan tilføje særlige instruktioner" width="854" height="262" data-path="images/aftersell/cart-notes-block-collapsible-order-notes-field.png" />
</Frame>

<div id="behavior">
  ## Adfærd
</div>

* Feltet er et **sammenklappeligt disclosure-element**, sammenklappet som standard. Sammenklapning er kun visuel — en gemt note gælder stadig. Når det er sammenklappet med en gemt note, vises et flueben, så kunden ved, at noten er gemt.
* Noten **gemmes, når kunden klikker væk** (ved blur), med statusfeedback for gemmer / gemt / fejl.
* Hvis kurvnoten ændres andre steder — på `/cart`-siden eller i en anden fane — synkroniserer feltet til den, medmindre kunden allerede er begyndt at skrive, så deres igangværende note aldrig overskrives.

<div id="settings">
  ## Indstillinger
</div>

| Indstilling     | Hvad den styrer                                | Standard                              |
| --------------- | ---------------------------------------------- | ------------------------------------- |
| **Title**       | Feltets label. Rich text, kan oversættes.      | `Order notes`                         |
| **Placeholder** | Inputfeltets pladsholdertekst. Kan oversættes. | `Special instructions for your order` |

<div id="placement-and-limits">
  ## Placering og grænser
</div>

* **Region:** body eller bund.
* **Maksimum:** 1 pr. kurvtilstand.
* **Tilstand:** kun fyldt kurv.
* Tilføjes ikke som standard. Ikke låst — du kan fjerne eller skjule den.

<div id="custom-template">
  ## Brugerdefineret skabelon
</div>

Understøtter en [brugerdefineret skabelon](/da/aftersell/cart/custom-templates) fra dens Code-fane, som erstatter denne bloks indbyggede markup med din JSX. Dette er de props, den modtager.

| Prop            | Type                                       | Hvad den bruges til                                                                                       |
| --------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
| `titleHtml`     | `string`                                   | Saneret rich text-titel-HTML. Tom, når forhandleren har ladet titlen stå tom.                             |
| `titleText`     | `string`                                   | Titel som ren tekst. Brug den til textarea'ets `aria-label` og som overskrift, når der ikke er rich text. |
| `hasTitle`      | `boolean`                                  | Om en af titelformerne er til stede. Styrer overskriften og omskifterens `aria-label`.                    |
| `placeholder`   | `string`                                   | Pladsholder vist i det tomme notefelt.                                                                    |
| `noteInput`     | `string`                                   | Den aktuelle notetekst.                                                                                   |
| `status`        | `'idle' \| 'saving' \| 'saved' \| 'error'` | Gemme-livscyklus. Driver den oplæste status-live-region.                                                  |
| `statusLabel`   | `string`                                   | Opløst live-region-meddelelse for `status`. Tom når idle.                                                 |
| `displayStatus` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Status til ikonet. Som `status`, bortset fra at en sammenklappet note med tekst læses som `saved`.        |
| `isExpanded`    | `boolean`                                  | Om notefeltet er udvidet. Sammenklapning er kun visuel; noten bevares altid.                              |
| `onNoteChange`  | `(value: string) => void`                  | Opdaterer noteteksten. Kald med den nye værdi, for eksempel fra textarea'ets `onInput`.                   |
| `onNoteBlur`    | `(event: unknown) => void`                 | Gemmer noten. Tilknyt direkte til textarea'ets `onBlur`; den læser værdien fra eventet.                   |
| `onToggle`      | `() => void`                               | Skifter mellem udvidet og sammenklappet tilstand.                                                         |

<Warning>
  **Noten gemmes ved `onNoteBlur`, ikke ved hvert tastetryk.** Forbind både `onNoteChange` og `onNoteBlur`, ellers gemmes noter aldrig — uden fejl. Hold statusteksten i en live-region, så skærmlæsere annoncerer gemmer og gemt.
</Warning>

<div id="design">
  ## Design
</div>

Style denne blok med dens **Design**-sektion i indstillingspanelet. Det er tilsidesættelser pr. blok, som lægger sig oven på dit globale design og falder tilbage til det, når de er tomme.

<div id="text">
  ### Text
</div>

Sektionen **Text** i Design lader dig styre typografien for to elementer. Brug **Text element**-vælgeren til at skifte mellem dem.

**Title** — sektionens overskrift over notefeltet. Fed indstilles i Rich Text-editoren ovenfor (i fanen Settings). Tekstfarve indstilles i Toggle-sektionen i Design.

| Indstilling        | Hvad den styrer               | Standard |
| ------------------ | ----------------------------- | -------- |
| **Size**           | Skriftstørrelse.              | `14px`   |
| **Line height**    | Multiplikator for linjehøjde. | `1.4`    |
| **Letter spacing** | Tegnafstand.                  | Normal   |

**Note field** — teksten inde i textarea'et, hvor kunderne skriver deres note.

| Indstilling        | Hvad den styrer                                           | Standard                     |
| ------------------ | --------------------------------------------------------- | ---------------------------- |
| **Text color**     | Farve på notens tekst.                                    | Arves fra kurvens tekstfarve |
| **Size**           | Skriftstørrelse.                                          | `14px`                       |
| **Weight**         | Skriftvægt — Light, Regular, Medium, Semibold eller Bold. | Regular (400)                |
| **Line height**    | Multiplikator for linjehøjde.                             | `1.5`                        |
| **Letter spacing** | Tegnafstand.                                              | Normal                       |

Hvad er designindstillinger? Læs mere her: [Designindstillinger](/da/aftersell/cart/design-settings).