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

> Der Banner-Block des Aftersell Cart: ein Nachrichtenbanner im Drawer, mit optionalem Countdown-Timer.

> Der **Banner**-Block ist ein Nachrichtenstreifen im Cart, nützlich für Aktionen, Versandhinweise oder Dringlichkeitsbotschaften wie einen Hinweis auf kostenlosen Versand, eine Sale-Ankündigung oder eine "Warenkorb reserviert"-Meldung. Er kann einen Live-Countdown-Timer enthalten.

<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-Block im Aftersell Cart-Drawer mit einer Reservierungs-Countdown-Nachricht" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

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

* **Der Countdown läuft nur, wenn alle drei Bedingungen erfüllt sind:** Der Timer ist aktiviert, der Text enthält das Token `{{timer}}` und die Dauer ist größer als null. Andernfalls wird das Banner als statischer Text angezeigt.
* Der Timer zählt im Format `MM:SS` herunter und wird für den Tab des Kunden gespeichert (er übersteht die Navigation innerhalb deines Stores während der Sitzung), sodass er nicht auf jeder Seite neu startet.
* **Wenn der Timer `00:00` erreicht, verschwindet das gesamte Banner**, sodass Kunden nie eine abgelaufene Uhr sehen.
* In der Editor-Vorschau läuft der Timer in einer Schleife und das Banner wird nie ausgeblendet, damit du es weiter gestalten kannst.

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

| Einstellung               | Was sie steuert                                                                                                                                                                      | Standard                                       |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- |
| **Text**                  | Die Rich-Text-Nachricht. Füge das Token `{{timer}}` ein, um einen Countdown anzuzeigen.                                                                                              | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | Schaltet den Countdown ein oder aus.                                                                                                                                                 | An                                             |
| **Minutes** / **Seconds** | Wie lange der Countdown läuft. Zwei Zahlenfelder, die angezeigt werden, sobald **Countdown timer** aktiviert ist, und als `MM:SS` dort dargestellt werden, wo `{{timer}}` erscheint. | 10 Minuten                                     |

Der Text ist übersetzbar.

<div id="placement-and-limits">
  ## Platzierung und Grenzen
</div>

* **Bereich:** beliebig (oben, Hauptteil oder unten).
* **Maximum:** 3 pro Cart-Zustand — der gefüllte Cart und der leere Cart haben jeweils ihr eigenes Kontingent.
* **Zustand:** sowohl gefüllter als auch leerer Cart.
* Wird neuen Carts standardmäßig hinzugefügt. Nicht gesperrt, du kannst ihn also entfernen oder ausblenden.

<div id="custom-template">
  ## Benutzerdefiniertes Template
</div>

Unterstützt ein [benutzerdefiniertes Template](/de/aftersell/cart/custom-templates) über seinen Code-Tab, das das integrierte Markup dieses Blocks durch dein JSX ersetzt. Dies sind die Props, die es erhält.

| Prop                          | Typ       | Wofür sie dient                                                                                                                                |
| ----------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `text`                        | `string`  | Die Banner-Nachricht als bereinigtes HTML, wobei das Token `{{timer}}` **bereits** durch den Live-Countdown ersetzt wurde.                     |
| `shouldUseTimer`              | `boolean` | `true`, wenn der Countdown für dieses Banner läuft.                                                                                            |
| `isTimerExpiredAndShouldHide` | `boolean` | `true`, sobald der Countdown null erreicht hat.                                                                                                |
| `isLoading`                   | `boolean` | Hier immer `false`: Der Block rendert während des Ladens sein integriertes Skeleton und ruft dein Template erst auf, wenn der Cart bereit ist. |

Es gibt kein separates `timer`-Prop. Der Countdown wird für dich in `text` interpoliert — es reicht also, `text` zu rendern.

```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>
  Dieses frühe Return ist wichtig. Ohne es rendert dein Banner nach Ablauf des Timers weiter, und da das Token bereits ersetzt ist, sehen Kunden ein eingefrorenes `00:00`.
</Warning>

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

Gestalte diesen Block über seinen Abschnitt **Design** im Einstellungspanel. Dies sind Überschreibungen pro Block, die auf deinem globalen Design aufsetzen und darauf zurückfallen, wenn sie leer sind.

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

Der Abschnitt **Text** in Design lässt dich die Typografie der Banner-Nachricht steuern. Fett und Textfarbe werden im Rich-Text-Editor darüber (im Settings-Tab) festgelegt, nicht hier.

| Einstellung        | Was sie steuert                     | Standard       |
| ------------------ | ----------------------------------- | -------------- |
| **Font**           | Schriftfamilie für den Banner-Text. | Erbt vom Theme |
| **Size**           | Schriftgröße.                       | `14px`         |
| **Line height**    | Multiplikator für die Zeilenhöhe.   | `1.4`          |
| **Letter spacing** | Zeichenabstand.                     | Normal         |

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

| Einstellung          | Was sie steuert                                                      | Standard    |
| -------------------- | -------------------------------------------------------------------- | ----------- |
| **Background color** | Die Hintergrundfüllung des Banners.                                  | `#000000`   |
| **Text color**       | Fallback-Textfarbe (wird vom Rich-Text-Editor überschrieben).        | `#ffffff`   |
| **Border**           | Ob das Banner einen Rahmen hat — **None** (0px) oder **Show** (1px). | None        |
| **Border color**     | Farbe des Rahmens, wenn **Show** ausgewählt ist.                     | Transparent |

Was sind Design-Einstellungen? Mehr erfährst du hier: [Design-Einstellungen](/de/aftersell/cart/design-settings).