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

# Header-blok

> Aftersell Cart Header-blokken: titlen, vareantallet, logoet og lukkekontrollen fastgjort øverst i draweren.

> Blokken **Header** er det fastgjorte øverste område af cart draweren, som giver draweren en tydelig titel og en oplagt måde at lukke den på. Du styrer dens layout ved at tildele **Title**, **Logo** og **Close button** til den venstre og højre sektion. Fordi Header er fastgjort øverst, forbliver den synlig, mens resten af kurven scroller.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-header-block-title-item-count.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e60cc6dbfe8728eb818d20cf5aa8ae5c" alt="Header-blok med kurvtitel, vareantal og lukkekontrol øverst i draweren" width="689" height="91" data-path="images/aftersell/cart-header-block-title-item-count.png" />
</Frame>

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

* Header er fastgjort øverst i draweren og scroller ikke med kurvens body.
* Lukkekontrollen er altid tilgængelig og lukker draweren.

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

| Indstilling | Hvad den styrer                                                                                                                                                                                                                                   | Standard                     |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| **Left**    | Hvilke elementer der renderes i den venstre sektion (`Title`, `Logo`, `Close button`) og i hvilken rækkefølge.                                                                                                                                    | `Title`                      |
| **Right**   | Hvilke elementer der renderes i den højre sektion (`Title`, `Logo`, `Close button`) og i hvilken rækkefølge.                                                                                                                                      | `Close button`               |
| **Title**   | Rich text-overskrift til kurven. Understøtter tokens `{{cart_item_count}}` og `{{total_price}}`.                                                                                                                                                  | `Cart • {{cart_item_count}}` |
| **Image**   | Et billede, der eksponeres til en brugerdefineret skabelon som `props.logoUrl`. Dette felt vises kun, mens en brugerdefineret skabelon er aktiv, og den indbyggede header renderer det aldrig. Understøttede formater: WebP, JPEG, PNG, GIF, SVG. | Ingen                        |

Titlen kan oversættes. Hvis din titel ender med at være tom (for eksempel en manglende oversættelse), falder kurven tilbage på at vise **Cart**, så headeren aldrig er tom.
Elementer vises i den rækkefølge, du vælger dem, fra venstre mod højre, og hvert element kan kun tildeles én sektion ad gangen.

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

* **Region:** kun top.
* **Maksimum:** 1 pr. kurvtilstand.
* **Tilstand:** fyldt og tom kurv (hver tilstand har sin egen Header-instans).
* Tilføjes som standard til nye kurve i begge tilstande. Ikke låst, så du kan fjerne eller skjule den med øje-omskifteren.

<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.

<Note>
  `logoUrl` er den ene prop, der ikke har nogen indbygget pendant: Headerens uploadede billede **renderes kun af en brugerdefineret skabelon**. Hvis en forhandler har angivet et logo, og det ikke vises, er dette grunden.
</Note>

| Prop           | Type                                      | Hvad den bruges til                                                                                                            |
| -------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `title`        | `string`                                  | Header-titlen som saneret HTML, med `{{cart_item_count}}` og `{{total_price}}` allerede opløst.                                |
| `logoUrl`      | `string \| null`                          | Det uploadede header-billede. `null`, når forhandleren ikke har angivet et.                                                    |
| `leftSection`  | `('title' \| 'logo' \| 'close_button')[]` | Elementer valgt til den venstre sektion, i render-rækkefølge.                                                                  |
| `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | Elementer valgt til den højre sektion, i render-rækkefølge.                                                                    |
| `itemCount`    | `number`                                  | Varer i kurven, som kunden ser den.                                                                                            |
| `onClose`      | `() => void`                              | Lukker draweren. Forbind den til din lukkekontrol.                                                                             |
| `isLoading`    | `boolean`                                 | Altid `false` her: blokken renderer sin indbyggede skeleton under indlæsning og kalder først din skabelon, når kurven er klar. |

<Warning>
  Hvis du ikke forbinder `onClose` til noget, kan kunderne stadig lukke draweren ved at klikke på overlayet eller trykke på Escape, men din header vil ikke have en lukkeknap. Inkludér altid en.
</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 kurvtitlen. Fed og tekstfarve indstilles i Rich Text-editoren ovenfor (i fanen Settings), ikke her.

| Indstilling        | Hvad den styrer               | Standard         |
| ------------------ | ----------------------------- | ---------------- |
| **Font**           | Skriftfamilie for titlen.     | Arves fra temaet |
| **Size**           | Skriftstørrelse.              | `18px`           |
| **Line height**    | Multiplikator for linjehøjde. | `1.3`            |
| **Letter spacing** | Tegnafstand.                  | Normal           |

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