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

# Blocco Banner

> Il blocco Banner di Aftersell Cart: un banner con un messaggio mostrato dentro il drawer, con un timer per il conto alla rovescia opzionale.

> Il blocco **Banner** è una striscia con un messaggio mostrata dentro il carrello, utile per promozioni, messaggi sulla spedizione o inviti all'urgenza come un avviso di spedizione gratuita, l'annuncio di un saldo o un messaggio "carrello riservato". Può includere un conto alla rovescia in tempo reale.

<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="Blocco Banner nel cart drawer di Aftersell che mostra un messaggio di prenotazione con conto alla rovescia" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

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

* **Il conto alla rovescia parte solo quando tutte e tre le condizioni sono soddisfatte:** il timer è abilitato, il testo contiene il token `{{timer}}` e la durata è maggiore di zero. Altrimenti il banner viene mostrato come testo statico.
* Il timer scorre in formato `MM:SS` e viene memorizzato per la scheda dell'acquirente (sopravvive alla navigazione all'interno del tuo negozio durante la sessione), quindi non riparte a ogni pagina.
* **Quando il timer raggiunge `00:00`, l'intero banner scompare**, così gli acquirenti non vedono mai un orologio azzerato.
* Nell'anteprima dell'editor il timer va in loop e il banner non si nasconde mai, così puoi continuare a personalizzarne lo stile.

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

| Impostazione              | Cosa controlla                                                                                                                                            | Predefinito                                    |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Text**                  | Il messaggio in formato rich text. Includi il token `{{timer}}` per mostrare un conto alla rovescia.                                                      | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | Attiva o disattiva il conto alla rovescia.                                                                                                                | Attivo                                         |
| **Minutes** / **Seconds** | Quanto dura il conto alla rovescia. Due campi numerici, mostrati quando **Countdown timer** è attivo e visualizzati come `MM:SS` dove appare `{{timer}}`. | 10 minuti                                      |

Il testo è traducibile.

<div id="placement-and-limits">
  ## Posizionamento e limiti
</div>

* **Regione:** qualsiasi (superiore, corpo o inferiore).
* **Massimo:** 3 per stato del carrello — il carrello pieno e il carrello vuoto hanno ciascuno il proprio limite.
* **Stato:** sia carrello pieno sia carrello vuoto.
* Aggiunto ai nuovi carrelli per impostazione predefinita. Non è bloccato, quindi puoi rimuoverlo o nasconderlo.

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

Supporta un [template personalizzato](/it/aftersell/cart/custom-templates) dalla sua scheda Code, che sostituisce il markup integrato di questo blocco con il tuo JSX. Queste sono le prop che riceve.

| Prop                          | Tipo      | A cosa serve                                                                                                                                         |
| ----------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text`                        | `string`  | Il messaggio del banner come HTML sanificato, con il token `{{timer}}` **già sostituito** dal conto alla rovescia in tempo reale.                    |
| `shouldUseTimer`              | `boolean` | `true` quando il conto alla rovescia è in esecuzione per questo banner.                                                                              |
| `isTimerExpiredAndShouldHide` | `boolean` | `true` una volta che il conto alla rovescia ha raggiunto lo zero.                                                                                    |
| `isLoading`                   | `boolean` | Sempre `false` qui: il blocco mostra il proprio skeleton integrato durante il caricamento e chiama il tuo template solo quando il carrello è pronto. |

Non esiste una prop `timer` separata. Il conto alla rovescia viene interpolato in `text` al posto tuo, quindi renderizzare `text` è sufficiente.

```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>
  Quel return anticipato è importante. Senza di esso il banner continua a essere renderizzato dopo la scadenza del timer e, poiché il token è già stato sostituito, gli acquirenti vedono un `00:00` congelato.
</Warning>

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

Personalizza lo stile di questo blocco con la sua sezione **Design** nel pannello delle impostazioni. Si tratta di override per singolo blocco che si sovrappongono al tuo design globale e vi ricadono quando sono vuoti.

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

La sezione **Text** in Design ti consente di controllare la tipografia del messaggio del banner. Il grassetto e il colore del testo si impostano nel Rich Text Editor sopra (nella scheda Settings), non qui.

| Impostazione       | Cosa controlla                            | Predefinito        |
| ------------------ | ----------------------------------------- | ------------------ |
| **Font**           | Famiglia di font per il testo del banner. | Ereditato dal tema |
| **Size**           | Dimensione del font.                      | `14px`             |
| **Line height**    | Moltiplicatore dell'altezza della riga.   | `1.4`              |
| **Letter spacing** | Spaziatura tra i caratteri.               | Normal             |

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

| Impostazione         | Cosa controlla                                                    | Predefinito |
| -------------------- | ----------------------------------------------------------------- | ----------- |
| **Background color** | Il riempimento di sfondo del banner.                              | `#000000`   |
| **Text color**       | Colore di fallback del testo (sovrascritto dal Rich Text Editor). | `#ffffff`   |
| **Border**           | Se il banner ha un bordo — **None** (0px) o **Show** (1px).       | None        |
| **Border color**     | Colore del bordo quando è selezionato **Show**.                   | Transparent |

Cosa sono le impostazioni di design? Scopri di più qui: [Impostazioni di design](/it/aftersell/cart/design-settings).