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

> El bloque Header del Aftersell Cart: el título, el conteo de artículos, el logo y el control de cierre fijados en la parte superior del drawer.

> El bloque **Header** es el área superior fijada del drawer del carrito, que le da al drawer un título claro y una forma obvia de cerrarlo. Controlas su layout asignando **Title**, **Logo** y **Close button** a las secciones izquierda y derecha. Como el Header está fijado en la parte superior, permanece visible mientras el resto del carrito se desplaza.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-header-block-title-item-count.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e60cc6dbfe8728eb818d20cf5aa8ae5c" alt="Bloque Header con título del carrito, conteo de artículos y control de cierre en la parte superior del drawer" width="689" height="91" data-path="images/aftersell/cart-header-block-title-item-count.png" />
</Frame>

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

* El Header está fijado en la parte superior del drawer y no se desplaza con el cuerpo del carrito.
* El control de cierre está siempre disponible y descarta el drawer.

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

| Configuración | Qué controla                                                                                                                                                                                                                                  | Predeterminado               |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| **Left**      | Qué elementos se renderizan en la sección izquierda (`Title`, `Logo`, `Close button`) y en qué orden.                                                                                                                                         | `Title`                      |
| **Right**     | Qué elementos se renderizan en la sección derecha (`Title`, `Logo`, `Close button`) y en qué orden.                                                                                                                                           | `Close button`               |
| **Title**     | Encabezado de texto enriquecido para el carrito. Admite los tokens `{{cart_item_count}}` y `{{total_price}}`.                                                                                                                                 | `Cart • {{cart_item_count}}` |
| **Image**     | Una imagen expuesta a una plantilla personalizada como `props.logoUrl`. Este campo solo aparece mientras hay una plantilla personalizada activa, y el encabezado integrado nunca la renderiza. Formatos admitidos: WebP, JPEG, PNG, GIF, SVG. | Ninguno                      |

El título es traducible. Si tu título se resuelve vacío (por ejemplo, una traducción sin establecer), el carrito recurre a mostrar **Cart** para que el encabezado nunca quede en blanco.

Los elementos aparecen en el orden en que los seleccionas, de izquierda a derecha, y cada elemento solo puede asignarse a una sección a la vez.

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

* **Región:** solo parte superior.
* **Máximo:** 1 por estado del carrito.
* **Estado:** carrito con artículos y vacío (cada estado tiene su propia instancia de Header).
* Se agrega a los carritos nuevos de forma predeterminada en ambos estados. No está bloqueado, así que puedes eliminarlo u ocultarlo con el interruptor del ojo.

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

<Note>
  `logoUrl` es la única prop que no tiene equivalente integrado: la imagen subida del Header **solo se renderiza mediante una plantilla personalizada**. Si un comerciante estableció un logo y no se muestra, esta es la razón.
</Note>

| Prop           | Tipo                                      | Para qué sirve                                                                                                                                  |
| -------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`        | `string`                                  | El título del encabezado como HTML sanitizado, con `{{cart_item_count}}` y `{{total_price}}` ya resueltos.                                      |
| `logoUrl`      | `string \| null`                          | La imagen de encabezado subida. `null` cuando el comerciante no ha establecido una.                                                             |
| `leftSection`  | `('title' \| 'logo' \| 'close_button')[]` | Elementos seleccionados para la sección izquierda, en el orden de renderizado.                                                                  |
| `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | Elementos seleccionados para la sección derecha, en el orden de renderizado.                                                                    |
| `itemCount`    | `number`                                  | Artículos en el carrito, como los ve el comprador.                                                                                              |
| `onClose`      | `() => void`                              | Cierra el drawer. Conéctalo a tu control de cierre.                                                                                             |
| `isLoading`    | `boolean`                                 | Siempre `false` aquí: el bloque renderiza su skeleton integrado durante la carga y solo llama a tu plantilla una vez que el carrito está listo. |

<Warning>
  Si no conectas `onClose` a algo, los compradores aún pueden cerrar el drawer haciendo clic en el overlay o presionando Escape, pero tu encabezado no tendrá botón de cierre. Incluye siempre uno.
</Warning>

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

Dale estilo a este bloque con su sección **Design** en el panel de configuración. Son anulaciones por bloque que se aplican encima de 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 título del carrito. 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 título.   | Hereda del tema |
| **Size**           | Tamaño de fuente.                 | `18px`          |
| **Line height**    | Multiplicador de altura de línea. | `1.3`           |
| **Letter spacing** | Espaciado entre caracteres.       | Normal          |

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