Abrir el drawer desde un page builder

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:

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

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

Abre tu página en el editor de Replo y selecciona el botón Add to Cart.
En la barra lateral derecha, abre la pestaña Interactions.
Bajo On Click, haz clic en + y elige Run JavaScript.

Pega:

window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});

Selecciona de nuevo la interacción Add Product to Cart y desactiva Go to cart after?.
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:

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:

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:

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, 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 <form> y Aftersell lo omite, sin necesidad de script.

<form action="/cart/add" method="post" class="aftersell-cart-skip-atc">

Solución de problemas

Síntoma	Causa probable
El artículo se agrega, el drawer sigue cerrado	El builder no está emitiendo los eventos de carrito estándar de Shopify. Usa la llamada explícita `refresh()` + `open()`.
El comprador es redirigido a `/cart`	La opción “go to cart after add” del builder sigue activada. Desactívala.
El drawer se abre pero muestra contenido desactualizado	`open()` se ejecutó antes de que `refresh()` se resolviera. Encadénalos con `.then()`, como arriba.
No pasa absolutamente nada	Las acciones llamadas antes de que el carrito cargue advierten en la consola y no hacen nada. Envuélvelas en `window.aftersell.cart.ready().then(…)` si el botón puede recibir clics tan temprano.
Funciona en una página, no en otra	La mayoría de los builders aplican interacciones por página. Repite la configuración en cada una.

Revisa window.aftersellCartDebugEvents si una llamada parece no hacer nada, ya que los fallos del SDK se silencian en lugar de lanzarse.

Adónde ir después

Configure: open_on_background_add y las demás opciones del drawer.
Actions: refresh, open y addItem.
Hooks: cómo eximir un solo formulario.

Primeros pasos

Página de inicio

Mejores prácticas

Ventas adicionales poscompra

Carrito

Ventas adicionales en el pago (Shopify Plus)

Página de agradecimiento

Ventas adicionales en la página de producto

Rokt Thanks

Estrategias

Analíticas y seguimiento

Integraciones

Aftersell MCP

Facturación y cuenta

Solución de problemas

La solución, en una línea

Primero la opción sin código

Configuración por builder

Replo

PageFly y GemPages

Tu propio botón

Cuando el botón del builder debe omitir Aftersell por completo

Solución de problemas

Adónde ir después

​La solución, en una línea

​Primero la opción sin código

​Configuración por builder

​Replo

​PageFly y GemPages

​Tu propio botón

​Cuando el botón del builder debe omitir Aftersell por completo

​Solución de problemas

​Adónde ir después

La solución, en una línea

Primero la opción sin código

Configuración por builder

Replo

PageFly y GemPages

Tu propio botón

Cuando el botón del builder debe omitir Aftersell por completo

Solución de problemas

Adónde ir después