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

> Het Banner-blok van de Aftersell Cart: een berichtenbanner die in de drawer wordt getoond, met een optionele afteltimer.

> Het **Banner**-blok is een berichtenstrook die in de cart wordt getoond, handig voor promoties, verzendberichten of urgentiemeldingen zoals een melding over gratis verzending, een aankondiging van een sale of een "cart gereserveerd"-melding. Het kan een live afteltimer bevatten.

<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 in de Aftersell cart drawer met een aftelbericht voor reservering" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

<div id="behavior">
  ## Gedrag
</div>

* **De afteltimer loopt alleen wanneer aan alle drie de voorwaarden is voldaan:** de timer is ingeschakeld, de tekst bevat het `{{timer}}`-token en de duur is groter dan nul. Anders wordt de banner als statische tekst getoond.
* De timer telt af in `MM:SS` en wordt onthouden voor het tabblad van de shopper (hij blijft behouden bij navigatie binnen je winkel tijdens de sessie), zodat hij niet op elke pagina opnieuw start.
* **Wanneer de timer `00:00` bereikt, verdwijnt de hele banner**, zodat shoppers nooit een klok op nul zien staan.
* In de editorvoorvertoning loopt de timer in een lus en verdwijnt de banner nooit, zodat je hem kunt blijven stylen.

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

| Instelling                | Wat het regelt                                                                                                                                    | Standaard                                      |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Text**                  | Het rich-text-bericht. Voeg het `{{timer}}`-token toe om een afteltimer te tonen.                                                                 | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | Zet de afteltimer aan of uit.                                                                                                                     | Aan                                            |
| **Minutes** / **Seconds** | Hoe lang de afteltimer loopt. Twee getalvelden, zichtbaar zodra **Countdown timer** aanstaat, weergegeven als `MM:SS` op de plek van `{{timer}}`. | 10 minuten                                     |

De tekst is vertaalbaar.

<div id="placement-and-limits">
  ## Plaatsing en limieten
</div>

* **Regio:** overal (boven, midden of onder).
* **Maximum:** 3 per cart-status — de gevulde cart en de lege cart hebben elk hun eigen limiet.
* **Status:** zowel gevulde als lege cart.
* Standaard toegevoegd aan nieuwe carts. Niet vergrendeld, dus je kunt het verwijderen of verbergen.

<div id="custom-template">
  ## Aangepaste template
</div>

Ondersteunt een [aangepaste template](/nl/aftersell/cart/custom-templates) via het tabblad Code, die de ingebouwde markup van dit blok vervangt door jouw JSX. Dit zijn de props die het ontvangt.

| Prop                          | Type      | Waarvoor het dient                                                                                                                      |
| ----------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `text`                        | `string`  | Het bannerbericht als gesaneerde HTML, waarbij het `{{timer}}`-token **al is vervangen** door de live afteltimer.                       |
| `shouldUseTimer`              | `boolean` | `true` wanneer de afteltimer voor deze banner loopt.                                                                                    |
| `isTimerExpiredAndShouldHide` | `boolean` | `true` zodra de afteltimer nul heeft bereikt.                                                                                           |
| `isLoading`                   | `boolean` | Hier altijd `false`: het blok rendert zijn ingebouwde skeleton tijdens het laden en roept jouw template pas aan zodra de cart klaar is. |

Er is geen aparte `timer`-prop. De afteltimer wordt voor je in `text` geïnterpoleerd, dus `text` renderen is voldoende.

```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>
  Die vroege return is belangrijk. Zonder deze return blijft je banner renderen nadat de timer is verlopen, en omdat het token al is vervangen, zien shoppers een bevroren `00:00`.
</Warning>

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

Style dit blok met de sectie **Design** in het instellingenpaneel. Dit zijn overrides per blok die bovenop je globale design komen en erop terugvallen wanneer ze leeg zijn.

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

De sectie **Text** in Design regelt de typografie van het bannerbericht. Vet en tekstkleur stel je in de Rich Text Editor hierboven in (op het tabblad Settings), niet hier.

| Instelling         | Wat het regelt                   | Standaard            |
| ------------------ | -------------------------------- | -------------------- |
| **Font**           | Font family voor de bannertekst. | Neemt over van thema |
| **Size**           | Lettergrootte.                   | `14px`               |
| **Line height**    | Regelhoogtevermenigvuldiger.     | `1.4`                |
| **Letter spacing** | Tracking tussen letters.         | Normal               |

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

| Instelling           | Wat het regelt                                                  | Standaard   |
| -------------------- | --------------------------------------------------------------- | ----------- |
| **Background color** | De achtergrondvulling van de banner.                            | `#000000`   |
| **Text color**       | Fallback-tekstkleur (overschreven door de Rich Text Editor).    | `#ffffff`   |
| **Border**           | Of de banner een rand heeft — **None** (0px) of **Show** (1px). | None        |
| **Border color**     | Kleur van de rand wanneer **Show** is geselecteerd.             | Transparent |

Wat zijn designinstellingen? Lees er hier meer over: [Designinstellingen](/nl/aftersell/cart/design-settings).