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

# Bloque Banner

> El bloque Banner de Aftersell Cart: un banner de mensaje mostrado dentro del cajón, con un temporizador de cuenta regresiva opcional.

> El bloque **Banner** es una franja de mensaje que se muestra dentro del carrito, útil para promociones, mensajes de envío o avisos de urgencia, como un aviso de envío gratis, un anuncio de rebajas o un mensaje de "carrito reservado". Puede incluir un temporizador de cuenta regresiva en vivo.

<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="Bloque Banner en el cajón del carrito de Aftersell mostrando un mensaje de cuenta regresiva de reserva" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

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

* **La cuenta regresiva solo se ejecuta cuando se cumplen las tres condiciones:** el temporizador está habilitado, el texto contiene el token `{{timer}}` y la duración es mayor que cero. De lo contrario, el banner se muestra como texto estático.
* El temporizador cuenta hacia atrás en `MM:SS` y se recuerda para la pestaña del comprador (sobrevive a la navegación dentro de tu tienda durante la sesión), por lo que no se reinicia en cada página.
* **Cuando el temporizador llega a `00:00`, todo el banner desaparece**, por lo que los compradores nunca ven un reloj en cero.
* En la vista previa del editor, el temporizador se repite en bucle y el banner nunca se oculta, para que puedas seguir dándole estilo.

<div id="settings">
  ## Configuración
</div>

| Configuración             | Qué controla                                                                                                                                                            | Predeterminado                                 |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Text**                  | El mensaje de texto enriquecido. Incluye el token `{{timer}}` para mostrar una cuenta regresiva.                                                                        | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | Activa o desactiva la cuenta regresiva.                                                                                                                                 | Activado                                       |
| **Minutes** / **Seconds** | Cuánto dura la cuenta regresiva. Dos campos numéricos, que aparecen una vez que **Countdown timer** está activado y se muestran como `MM:SS` donde aparece `{{timer}}`. | 10 minutos                                     |

El texto es traducible.

<div id="placement-and-limits">
  ## Ubicación y límites
</div>

* **Región:** cualquiera (superior, cuerpo o inferior).
* **Máximo:** 3 por estado del carrito. El carrito con artículos y el carrito vacío tienen cada uno su propio cupo.
* **Estado:** tanto carrito con artículos como carrito vacío.
* Se agrega a los carritos nuevos de forma predeterminada. No está bloqueado, así que puedes eliminarlo u ocultarlo.

<div id="custom-template">
  ## Plantilla personalizada
</div>

Admite una [plantilla personalizada](/es/aftersell/cart/custom-templates) desde su pestaña Code, que reemplaza el marcado integrado de este bloque con tu JSX. Estas son las props que recibe.

| Prop                          | Tipo      | Para qué sirve                                                                                                                                 |
| ----------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `text`                        | `string`  | El mensaje del banner como HTML sanitizado, con el token `{{timer}}` **ya reemplazado** por la cuenta regresiva en vivo.                       |
| `shouldUseTimer`              | `boolean` | `true` cuando la cuenta regresiva está en ejecución para este banner.                                                                          |
| `isTimerExpiredAndShouldHide` | `boolean` | `true` una vez que la cuenta regresiva ha llegado a cero.                                                                                      |
| `isLoading`                   | `boolean` | Siempre `false` aquí: el bloque muestra su esqueleto integrado durante la carga y solo llama a tu plantilla una vez que el carrito está listo. |

No hay una prop `timer` separada. La cuenta regresiva se interpola en `text` por ti, así que renderizar `text` es suficiente.

```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>
  Ese retorno anticipado es importante. Sin él, tu banner sigue renderizándose después de que expira el temporizador y, como el token ya está sustituido, los compradores ven un `00:00` congelado.
</Warning>

<div id="design">
  ## Diseño
</div>

Dale estilo a este bloque con su sección **Design** en el panel de configuración. Estas son anulaciones por bloque que se superponen a tu diseño global y recurren a él cuando están en blanco.

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

La sección **Text** de Design te permite controlar la tipografía del mensaje del banner. La negrita y el color del texto se establecen en el Rich Text Editor de arriba (en la pestaña Settings), no aquí.

| Configuración      | Qué controla                              | Predeterminado  |
| ------------------ | ----------------------------------------- | --------------- |
| **Font**           | Familia tipográfica del texto del banner. | Hereda del tema |
| **Size**           | Tamaño de fuente.                         | `14px`          |
| **Line height**    | Multiplicador de altura de línea.         | `1.4`           |
| **Letter spacing** | Espaciado entre caracteres.               | Normal          |

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

| Configuración        | Qué controla                                                 | Predeterminado |
| -------------------- | ------------------------------------------------------------ | -------------- |
| **Background color** | El relleno de fondo del banner.                              | `#000000`      |
| **Text color**       | Color de texto de reserva (anulado por el Rich Text Editor). | `#ffffff`      |
| **Border**           | Si el banner tiene borde — **None** (0px) o **Show** (1px).  | None           |
| **Border color**     | Color del borde cuando está seleccionado **Show**.           | Transparente   |

¿Qué son las configuraciones de diseño? Obtén más información aquí: [Configuraciones de diseño](/es/aftersell/cart/design-settings).