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

# ¿Cómo funcionan los bloques?

> Comprende los bloques de Aftersell Cart: secciones y sub-bloques, carrito lleno vs. vacío, límites, bloques bloqueados, condiciones y configuraciones por bloque.

La disposición de tu carrito es una pila de **bloques**: piezas configurables que agregas, reordenas, estilizas y personalizas en el editor de carrito. Los bloques que incluyas, y en qué orden, conforman el carrito que ven los compradores.

Para saber cómo se ubican los bloques dentro de los **estados** y las **secciones**, consulta [¿Cómo funcionan los carritos?](/es/aftersell/cart/how-carts-work).

<div id="blocks-and-sub-blocks">
  ## Bloques y sub-bloques
</div>

Hay dos tipos de bloque:

* **Los bloques** se ubican directamente en el carrito, en una de tres secciones: **Header**, **Body** o **Footer**. Cada sección ofrece un conjunto diferente de bloques.
* **Los sub-bloques** se anidan dentro de otro bloque. Hoy solo [**Cart items**](/es/aftersell/cart/cart-items-block) aloja sub-bloques: la fila **Product** (la fila del artículo en sí), [**Subscription upgrade**](/es/aftersell/cart/subscription-upgrade-block) y [**Custom code**](/es/aftersell/cart/custom-code-blocks).

<div id="adding-reordering-and-removing-blocks">
  ## Agregar, reordenar y eliminar bloques
</div>

* **Agrega** un bloque con el selector **Add block**. Un bloque aparece atenuado si no puede ir donde lo estás agregando, o si has alcanzado su límite (el selector muestra una insignia `count/max`).
* **Reordena** arrastrando un bloque dentro de su sección.
* **Elimina** con el ícono de papelera, excepto los bloques bloqueados (más abajo).
* **Muestra/oculta** la mayoría de los bloques con el conmutador del ojo, que oculta un bloque a los compradores sin eliminarlo. Algunos bloques estructurales no pueden ocultarse: **Cart items**, **Checkout button** y la fila **Product**.

<div id="locked-blocks">
  ## Bloques bloqueados
</div>

Algunos bloques pueden reordenarse pero no eliminarse, para que el comportamiento central del carrito (por ejemplo, pagar) no pueda eliminarse por accidente:

* **Cart items**
* **Checkout button**

<div id="default-blocks">
  ## Bloques predeterminados
</div>

Los carritos nuevos comienzan con una disposición predeterminada funcional:

* **Carrito lleno:** Header, Banner, Cart items, Summary, Checkout button
* **Carrito vacío:** Header, bloque Empty cart

<Info>
  El **estado de carrito vacío** es toda la disposición vacía. El **bloque Empty cart** es un bloque dentro de ella. Consulta [¿Cómo funcionan los carritos?](/es/aftersell/cart/how-carts-work) para conocer la diferencia.
</Info>

<div id="how-many-of-each-block-you-can-add">
  ## Cuántos bloques de cada tipo puedes agregar
</div>

Los límites se cuentan **por estado del carrito**, no por carrito. El carrito con artículos y el carrito vacío tienen cada uno su propio cupo, así que un carrito puede tener tres Banners en su disposición llena y tres más en su disposición vacía.

La mayoría de los bloques están limitados a uno por estado. Las excepciones:

| Bloque         | Máximo por estado del carrito |
| -------------- | ----------------------------- |
| Banner         | 3                             |
| Image          | 3                             |
| Product add-on | 3                             |
| Summary        | 2                             |
| Custom code    | Ilimitado                     |

<div id="content-design-and-code">
  ## Content, Design y Code
</div>

Cada bloque se configura a través de hasta tres superficies en el editor:

* **Content**: las configuraciones del bloque (texto, elecciones de productos, umbrales, etcétera). El bloque **Custom code** es la única excepción: no tiene panel Content porque el bloque *es* el código.
* **Design**: estilo por bloque que se superpone a tus [**configuraciones de diseño**](/es/aftersell/cart/design-settings) globales. Todos los bloques lo tienen excepto **Custom code**, que no tiene panel de configuración en absoluto.
* **Code**: anula el renderizado integrado del bloque con una [**plantilla personalizada**](/es/aftersell/cart/custom-templates). La mayoría de los bloques lo admiten; un par no.

<div id="show-or-hide-by-market-country-or-currency">
  ## Mostrar u ocultar por mercado, país o moneda
</div>

Algunos bloques pueden mostrar configuraciones diferentes, u ocultarse por completo, según quién sea el comprador. Eso es distinto del **conmutador del ojo** de la barra lateral, que activa o desactiva un bloque para todos.

|               | **Conmutador del ojo**                                        | **Condiciones**                                               |
| ------------- | ------------------------------------------------------------- | ------------------------------------------------------------- |
| **Qué hace**  | Oculta o muestra todo el bloque para todos los compradores    | Elige qué variante de configuración ve un comprador (o nada)  |
| **Basado en** | Tu elección en el editor                                      | Mercado de Shopify, país del cliente o moneda del cliente     |
| **Dónde**     | Ícono de ojo de la barra lateral en la mayoría de los bloques | Panel de configuración de los bloques que admiten condiciones |

**Tipos de condición admitidos hoy:** mercado de Shopify, país del cliente y moneda del cliente (cada uno con **In** o **Not in**). El total del carrito y el contenido del carrito **no** son tipos de condición. Usa los umbrales de niveles de [Rewards](/es/aftersell/cart/rewards-block) para el progreso por gasto/cantidad, o el [Cart SDK](/es/aftersell/cart/sdk-overview) cuando necesites una regla que el editor no pueda expresar.

Las condiciones son una lista ordenada: gana la **primera condición coincidente**. Coloca las reglas específicas por encima de una condición comodín **All buyers**. Si nada coincide, el bloque no renderiza nada para ese comprador.

**En el editor hoy**, la interfaz completa de Conditions se incluye en el bloque [**Rewards**](/es/aftersell/cart/rewards-block#per-market-rewards): diferentes conjuntos de niveles por mercado, país o moneda. Los otros bloques o usan una única configuración para "todos los compradores" o aún no participan en este sistema.

La vista previa del editor **no** evalúa al comprador en vivo. Selecciona una condición en el panel para previsualizar esa variante.

<div id="all-blocks">
  ## Todos los bloques
</div>

**Estructura**

* [Header](/es/aftersell/cart/header-block): título, recuento de artículos, logotipo y control de cierre, fijado en la parte superior.
* [Cart items](/es/aftersell/cart/cart-items-block): los artículos que los clientes agregan al carrito; se repite por línea.
* [Subscription upgrade](/es/aftersell/cart/subscription-upgrade-block): sub-bloque que ofrece convertir una línea en una suscripción.
* [Summary](/es/aftersell/cart/summary-block): totales, ahorros y descuentos aplicados.
* [Checkout button](/es/aftersell/cart/checkout-button-block): la llamada a la acción principal para pagar.
* [Empty cart](/es/aftersell/cart/empty-cart-block): el contenido que se muestra cuando el carrito está vacío.
* [Express payments](/es/aftersell/cart/express-payments-block): botones de checkout acelerado (Shop Pay, PayPal, etcétera) dentro del carrito.

**Merchandising**

* [Upsells](/es/aftersell/cart/upsells-block): recomendaciones de productos elegidas por estrategia.
* [Product add-on](/es/aftersell/cart/product-add-on-block): un único producto específico ofrecido como complemento.
* [Rewards](/es/aftersell/cart/rewards-block): recompensas escalonadas como envío gratis o regalos.
* [Shipping protection](/es/aftersell/cart/shipping-protection-block): un complemento opcional de protección de envío.

**Entrada del comprador**

* [Discount code](/es/aftersell/cart/discount-code-block): un campo para aplicar un código de descuento.
* [Notes](/es/aftersell/cart/notes-block): un campo de notas del pedido.

**Contenido**

* [Banner](/es/aftersell/cart/banner-block): un banner de mensaje, con un temporizador de cuenta regresiva opcional.
* [Image](/es/aftersell/cart/image-block): una sola imagen o un preajuste alojado, como los íconos de pago.
* [Custom code](/es/aftersell/cart/custom-code-blocks): HTML o React personalizado en cualquier parte del carrito.

**Extensión**

* [Custom templates](/es/aftersell/cart/custom-templates): anula cómo se renderiza cualquier bloque desde su pestaña Code.

<div id="blocks-available-in-each-section">
  ## Bloques disponibles en cada sección
</div>

Cada sección tiene un conjunto diferente de bloques disponibles. Eso mantiene la disposición enfocada y reduce el desorden.

| Sección    | Bloques disponibles                                                                                                                                 |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Header** | Header, Banner, Rewards, Image, Custom code                                                                                                         |
| **Body**   | Banner, Notes, Discount code, Cart items, Empty cart, Custom code, Rewards, Product add-on, Shipping protection, Image, Upsells                     |
| **Footer** | Banner, Notes, Discount code, Custom code, Rewards, Product add-on, Shipping protection, Express payments, Image, Upsells, Summary, Checkout button |

Algunos de esos bloques son específicos de un estado (por ejemplo, Empty cart solo en el estado vacío). Consulta [¿Cómo funcionan los carritos?](/es/aftersell/cart/how-carts-work).

<div id="block-validation-errors">
  ## Errores de validación de bloques
</div>

Si la configuración de un bloque contiene un valor no válido, aparece un pequeño punto rojo junto al nombre de ese bloque en la barra lateral. El punto permanece hasta que soluciones el problema. No es una notificación descartable.

Mientras algún bloque tenga un error, **el guardado está bloqueado**. El botón **Save** sigue siendo clicable, pero al seleccionarlo se muestra un toast de error (*"Fix the errors in your cart blocks before saving"*) y salta al primer bloque con un problema, abriendo su configuración para que puedas corregir el campo resaltado. **Publish** requiere además que no haya cambios sin guardar, por lo que permanece no disponible hasta que se complete un guardado limpio.

Una vez corregido el campo no válido, el punto desaparece por sí solo y el guardado continúa con normalidad.

<Note>
  Los bloques ocultos también se validan. Un bloque que has ocultado puede contener una configuración no válida, mostrar un punto de error y bloquear el guardado exactamente igual que uno visible, así que si el guardado está bloqueado y todos los bloques visibles se ven bien, revisa tus bloques ocultos.
</Note>