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

# Bloc Banner

> Le bloc Banner de l'Aftersell Cart : une bannière de message affichée dans le tiroir, avec un compte à rebours facultatif.

> Le bloc **Banner** est une bande de message affichée à l'intérieur du panier, utile pour les promotions, les messages de livraison ou les incitations à l'urgence comme une mention de livraison gratuite, une annonce de soldes ou un message « panier réservé ». Il peut inclure un compte à rebours en direct.

<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="Bloc Banner dans le tiroir de panier Aftersell affichant un message de compte à rebours de réservation" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

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

* **Le compte à rebours ne fonctionne que lorsque les trois conditions sont réunies :** le minuteur est activé, le texte contient le jeton `{{timer}}` et la durée est supérieure à zéro. Sinon, la bannière s'affiche comme texte statique.
* Le minuteur décompte au format `MM:SS` et est mémorisé pour l'onglet de l'acheteur (il survit à la navigation au sein de votre boutique pendant la session), il ne redémarre donc pas à chaque page.
* **Lorsque le minuteur atteint `00:00`, toute la bannière disparaît**, de sorte que les acheteurs ne voient jamais une horloge à zéro.
* Dans l'aperçu de l'éditeur, le minuteur tourne en boucle et la bannière ne se masque jamais, ce qui vous permet de continuer à la styliser.

<div id="settings">
  ## Paramètres
</div>

| Paramètre                 | Ce qu'il contrôle                                                                                                                                          | Par défaut                                     |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Text**                  | Le message en texte enrichi. Incluez le jeton `{{timer}}` pour afficher un compte à rebours.                                                               | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | Active ou désactive le compte à rebours.                                                                                                                   | Activé                                         |
| **Minutes** / **Seconds** | La durée du compte à rebours. Deux champs numériques, affichés une fois **Countdown timer** activé et rendus au format `MM:SS` là où `{{timer}}` apparaît. | 10 minutes                                     |

Le texte est traduisible.

<div id="placement-and-limits">
  ## Placement et limites
</div>

* **Région :** n'importe laquelle (haut, corps ou bas).
* **Maximum :** 3 par état de panier. Le panier rempli et le panier vide ont chacun leur propre quota.
* **État :** panier rempli et panier vide.
* Ajouté par défaut aux nouveaux paniers. Non verrouillé, vous pouvez donc le supprimer ou le masquer.

<div id="custom-template">
  ## Modèle personnalisé
</div>

Prend en charge un [modèle personnalisé](/fr/aftersell/cart/custom-templates) depuis son onglet Code, qui remplace le rendu intégré de ce bloc par votre JSX. Voici les props qu'il reçoit.

| Prop                          | Type      | À quoi elle sert                                                                                                                         |
| ----------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `text`                        | `string`  | Le message de la bannière en HTML assaini, avec le jeton `{{timer}}` **déjà remplacé** par le compte à rebours en direct.                |
| `shouldUseTimer`              | `boolean` | `true` lorsque le compte à rebours est en cours pour cette bannière.                                                                     |
| `isTimerExpiredAndShouldHide` | `boolean` | `true` une fois que le compte à rebours a atteint zéro.                                                                                  |
| `isLoading`                   | `boolean` | Toujours `false` ici : le bloc affiche son squelette intégré pendant le chargement et n'appelle votre modèle qu'une fois le panier prêt. |

Il n'existe pas de prop `timer` distincte. Le compte à rebours est interpolé dans `text` pour vous, il suffit donc d'afficher `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>
  Ce retour anticipé est important. Sans lui, votre bannière continue de s'afficher après l'expiration du minuteur, et comme le jeton est déjà substitué, les acheteurs voient un `00:00` figé.
</Warning>

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

Stylisez ce bloc avec sa section **Design** dans le panneau de paramètres. Il s'agit de remplacements par bloc qui se superposent à votre design global et y reviennent lorsqu'ils sont vides.

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

La section **Text** dans Design vous permet de contrôler la typographie du message de la bannière. Le gras et la couleur du texte se règlent dans l'éditeur de texte enrichi ci-dessus (dans l'onglet Settings), pas ici.

| Paramètre          | Ce qu'il contrôle                             | Par défaut       |
| ------------------ | --------------------------------------------- | ---------------- |
| **Font**           | La famille de police du texte de la bannière. | Héritée du thème |
| **Size**           | La taille de la police.                       | `14px`           |
| **Line height**    | Le multiplicateur de hauteur de ligne.        | `1.4`            |
| **Letter spacing** | L'espacement entre les caractères.            | Normal           |

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

| Paramètre            | Ce qu'il contrôle                                                     | Par défaut  |
| -------------------- | --------------------------------------------------------------------- | ----------- |
| **Background color** | Le remplissage d'arrière-plan de la bannière.                         | `#000000`   |
| **Text color**       | Couleur de texte de repli (remplacée par l'éditeur de texte enrichi). | `#ffffff`   |
| **Border**           | Si la bannière a une bordure — **None** (0px) ou **Show** (1px).      | None        |
| **Border color**     | Couleur de la bordure lorsque **Show** est sélectionné.               | Transparent |

Que sont les paramètres de design ? En savoir plus ici : [Paramètres de design](/fr/aftersell/cart/design-settings).