> ## 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.
# Abrir el drawer desde un page builder
> Un caso de uso del Cart SDK para hacer que los botones de agregar al carrito de Replo, PageFly, GemPages y personalizados abran el drawer de Aftersell Cart.
Aftersell intercepta la acción de agregar al carrito en los formularios de producto estándar de Shopify. Los constructores de páginas de destino suelen agregar al carrito a su manera, usando una llamada de JavaScript en lugar de un envío de formulario, de modo que el artículo llega al carrito pero el drawer permanece cerrado, o el comprador es redirigido a `/cart`.
## La solución, en una línea
Después de que termina el agregar al carrito del builder, dile al carrito que vuelva a obtener los datos y se abra:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
Agrega esto como una **segunda acción** en el botón, después del "add to cart" propio del builder, y desactiva la opción "go to cart" o "redirect after add" del builder.
Prueba primero [`open_on_background_add`](#the-no-code-option-first), ya que a menudo resuelve esto sin tocar el botón en absoluto.
## Primero la opción sin código
Aftersell detecta los agregados que no manejó por sí mismo de dos maneras. Ambas están activas en todo momento (se conectan juntas al arrancar y ninguna suprime a la otra, así que un mismo agregado puede ser anunciado por ambas) y cada anuncio aplica la regla de apertura de forma independiente:
* **En la red.** Aftersell vigila las peticiones a los endpoints de carrito de Shopify. Si el agregado siguió a un clic o pulsación de tecla real dentro de unos tres segundos, cuenta como impulsado por el comprador, y el drawer se abre según tu configuración normal de **Open cart when an item is added**. Cualquier builder que agrega a través de la Ajax cart API de Shopify (`/cart/add.js`) cae aquí, que es el caso común. Así que prueba primero tu botón: puede que ya funcione sin ningún cambio.
* **[Eventos de carrito estándar de Shopify](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events).** Un agregado anunciado de esta manera siempre se trata como un agregado *en segundo plano*, haya hecho clic un comprador o no. Los agregados en segundo plano no abren el drawer a menos que lo actives:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```
Pega eso en **Cart settings → Custom script → Initialization**. Si el drawer ahora se abre después del botón de agregar de tu builder, ya terminaste, sin trabajo por botón, y cubre todas las páginas.
`open_on_background_add` también cubre agregados sin ningún gesto del comprador, como otra app o script escribiendo en el carrito. Actívalo solo si quieres que esos también abran el drawer.
Si ninguna de las dos rutas abre el drawer, recurre a la llamada explícita de abajo.
## Configuración por builder
### Replo
1. Abre tu página en el editor de Replo y selecciona el botón **Add to Cart**.
2. En la barra lateral derecha, abre la pestaña **Interactions**.
3. Bajo **On Click**, haz clic en `+` y elige **Run JavaScript**.
4. Pega:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
5. Selecciona de nuevo la interacción **Add Product to Cart** y desactiva **Go to cart after?**.
6. Previsualiza, confirma que el drawer se abre y luego publica.
Repite en cada página que tenga un botón de agregar al carrito.
### PageFly y GemPages
Ambos permiten adjuntar JavaScript personalizado al clic de un botón o agregar un elemento de código personalizado a la página. Usa el mismo fragmento, configurado para ejecutarse después de la acción de agregar al carrito del builder, y desactiva cualquier ajuste de "redirect to cart" en el botón.
### Tu propio botón
Si tú mismo estás agregando al carrito, omite la ida y vuelta y usa la acción propia del SDK, que actualiza el carrito y puede abrir el drawer en un solo paso:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-add-button').addEventListener('click', () => {
window.aftersell.cart.actions.addItem(VARIANT_ID, 1).then(() => {
window.aftersell.cart.actions.open();
});
});
```
Usa `refresh()` solo cuando *otra cosa* cambió el carrito y necesitas que Aftersell se ponga al día:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
fetch('/cart/add.js', { method: 'POST', /* … */ })
.then(() => window.aftersell.cart.actions.refresh())
.then(() => { window.aftersell.cart.actions.open(); });
```
## Cuando el botón del builder debe omitir Aftersell por completo
A veces ocurre lo contrario: un formulario necesita su propio flujo y la interceptación de Aftersell estorba. Exime solo ese formulario:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
form.hasAttribute('data-skip-aftersell')
);
```
Luego agrega `data-skip-aftersell` al formulario. Esto es mejor que [`skip_add_to_cart_interceptor`](/es/aftersell/cart/sdk-configure#skip_add_to_cart_interceptor), que desactiva la interceptación para todos los formularios de la página.
Más simple aún, si puedes editar el marcado del formulario: agrega la clase **`aftersell-cart-skip-atc`** al `