> ## 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 Checkout button

> El bloque Checkout button de Aftersell Cart: la CTA obligatoria del pie de página que envía a los compradores al checkout.

> El bloque **Checkout button** es la llamada a la acción principal en el pie del carrito que lleva a los compradores al checkout, dándoles una ruta clara y prominente del carrito al checkout. Es un bloque obligatorio.

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

* El botón resuelve una **URL de checkout localizada y correcta para el mercado**, para que los compradores lleguen al checkout del mercado correcto. Si eso no puede resolverse, recurre al enlace estándar `/checkout`.
* Con **Go to cart page instead of checkout** habilitado, el botón enlaza a `/cart` en su lugar.
* Al hacer clic se navega mediante JavaScript para que la propia gestión del carrito de un tema no pueda interceptarlo, mientras se respetan las intenciones de nueva pestaña (Cmd/Ctrl-clic, clic central).
* El clic emite el [evento `checkout`](/es/aftersell/cart/sdk-events) del SDK, al que puedes suscribirte.

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

| Configuración                           | Qué controla                                                                          | Predeterminado               |
| --------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------- |
| **Button label**                        | Etiqueta de texto plano que se ingresa en un área de texto. Admite `{{total_price}}`. | `Checkout • {{total_price}}` |
| **Go to cart page instead of checkout** | Envía a los compradores a tu página `/cart` en lugar de directamente al checkout.     | Desactivado                  |

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

* **Región:** inferior.
* **Máximo:** 1 por estado del carrito.
* **Estado:** solo carrito con artículos.
* **Bloqueado y agregado de forma predeterminada.** El botón Checkout no puede eliminarse ni ocultarse, solo reposicionarse dentro del pie de página.

<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                                                                                                                                 |
| ----------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`     | `string`              | La etiqueta del botón como HTML sanitizado, con `{{total_price}}` resuelto.                                                                    |
| `href`      | `string \| undefined` | La URL del checkout. `undefined` en la vista previa del editor, donde no hay nada a lo que navegar.                                            |
| `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. |

<Warning>
  **Un botón de checkout personalizado pierde el seguimiento del checkout.** El botón integrado adjunta un manejador de clic que emite el [evento `checkout`](/es/aftersell/cart/sdk-events#checkout) del SDK y registra la conversión para las [analíticas del carrito](/es/aftersell/cart/analytics). Ese manejador no se pasa a las plantillas personalizadas, por lo que navegar solo mediante `href` omite ambos.

  Si necesitas el evento, emítelo tú mismo desde un `onClick` antes de la navegación. Los informes de atribución aún no pueden recuperarse de esta manera, así que prefiere reestilizar el botón integrado con las [configuraciones de diseño](/es/aftersell/cart/design-settings) o [CSS personalizado](/es/aftersell/cart/custom-css) a menos que realmente necesites un marcado diferente.
</Warning>

Renderiza `href` tal cual en lugar de asignarle un valor predeterminado. Un `<a>` sin `href` es inerte, que es el comportamiento correcto en el editor.

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

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