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

# Banner-blok

> Aftersell Cart Banner-blokken: et beskedbanner vist inde i skuffen, med en valgfri nedtællingstimer.

> **Banner**-blokken er en beskedstribe vist inde i carten, nyttig til kampagner, forsendelsesbeskeder eller hastebudskaber som en meddelelse om gratis fragt, en udsalgsannoncering eller en "cart reserveret"-besked. Den kan indeholde en live nedtællingstimer.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-banner-block-reservation-countdown.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=8aff1b333a8ebe9005d2d70bc7f9a2cd" alt="Banner-blok i Aftersell-cart-skuffen med en nedtællingsbesked om reservation" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

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

* **Nedtællingen kører kun, når alle tre betingelser er opfyldt:** timeren er aktiveret, teksten indeholder `{{timer}}`-tokenet, og varigheden er større end nul. Ellers vises banneret som statisk tekst.
* Timeren tæller ned i `MM:SS` og huskes for kundens fane (den overlever navigation i din butik under sessionen), så den genstarter ikke på hver side.
* **Når timeren når `00:00`, forsvinder hele banneret**, så kunder aldrig ser et ur på nul.
* I editorens forhåndsvisning kører timeren i loop, og banneret skjules aldrig, så du kan blive ved med at style det.

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

| Indstilling               | Hvad den styrer                                                                                                                                | Standard                                       |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Text**                  | Rich-text-beskeden. Inkludér `{{timer}}`-tokenet for at vise en nedtælling.                                                                    | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | Slår nedtællingen til eller fra.                                                                                                               | Til                                            |
| **Minutes** / **Seconds** | Hvor længe nedtællingen kører. To talfelter, der vises, når **Countdown timer** er slået til, og vises som `MM:SS`, hvor `{{timer}}` optræder. | 10 minutter                                    |

Teksten kan oversættes.

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

* **Region:** alle (top, brødtekst eller bund).
* **Maksimum:** 3 pr. cart-tilstand — den fyldte cart og den tomme cart har hver deres egen kvote.
* **Tilstand:** både fyldt og tom cart.
* Tilføjes til nye carts som standard. Ikke låst, så du kan fjerne eller skjule den.

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

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

| Prop                          | Type      | Hvad den bruges til                                                                                                         |
| ----------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------- |
| `text`                        | `string`  | Bannerbeskeden som saneret HTML, hvor `{{timer}}`-tokenet **allerede er erstattet** af den live nedtælling.                 |
| `shouldUseTimer`              | `boolean` | `true`, når nedtællingen kører for dette banner.                                                                            |
| `isTimerExpiredAndShouldHide` | `boolean` | `true`, når nedtællingen har nået nul.                                                                                      |
| `isLoading`                   | `boolean` | Altid `false` her: blokken viser sin indbyggede skeleton under indlæsning og kalder først din skabelon, når carten er klar. |

Der er ingen separat `timer`-prop. Nedtællingen interpoleres ind i `text` for dig, så det er nok at rendere `text`.

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  // The built-in banner removes itself at 00:00; a custom template must do the same.
  if (props.shouldUseTimer && props.isTimerExpiredAndShouldHide) return null;

  return (
    <div className="cart-external-banner" style={{ padding: '10px', textAlign: 'center' }}>
      <span dangerouslySetInnerHTML={{ __html: props.text }} />
    </div>
  );
}
```

<Warning>
  Den tidlige return er vigtig. Uden den bliver dit banner ved med at rendere, efter timeren er udløbet, og fordi tokenet allerede er erstattet, ser kunderne et fastfrosset `00:00`.
</Warning>

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

Stil denne blok med dens **Design**-sektion i indstillingspanelet. Dette er tilsidesættelser pr. blok, der lægges 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 bannerbeskeden. Fed og tekstfarve indstilles i Rich Text-editoren ovenfor (i fanen Settings), ikke her.

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

<div id="style">
  ### Style
</div>

| Indstilling          | Hvad den styrer                                                | Standard    |
| -------------------- | -------------------------------------------------------------- | ----------- |
| **Background color** | Bannerets baggrundsfyld.                                       | `#000000`   |
| **Text color**       | Fallback-tekstfarve (tilsidesættes af Rich Text-editoren).     | `#ffffff`   |
| **Border**           | Om banneret har en kant — **None** (0px) eller **Show** (1px). | None        |
| **Border color**     | Kantens farve, når **Show** er valgt.                          | Transparent |

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