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

# Intercepción de agregar al carrito

> Por qué Aftersell toma el control del agregar al carrito, cómo saber si un formulario está siendo interceptado y todas las formas de excluir un formulario.

Cuando un comprador hace clic en **Add to cart**, Aftersell normalmente maneja el agregado por sí mismo en lugar de dejar que lo haga el tema. Esta página explica por qué, qué significa eso para los scripts que has añadido y cómo desactivarlo para un formulario o para todos ellos.

La mayoría de las tiendas nunca necesitan cambiar nada de esto. Sigue leyendo si un script tuyo dejó de dispararse al agregar al carrito, o si un botón de agregar al carrito se comporta de forma extraña.

## Qué hace la intercepción

Aftersell escucha el envío del formulario de agregar al carrito antes de que lo haga el tema. Cuando reconoce uno:

1. Detiene el evento, para que nada más en la página maneje ese clic.
2. Envía el agregado a Shopify por sí mismo.
3. Abre el drawer del Aftersell Cart.

El paso 1 es el importante, y es la razón por la que existe esta página.

## Por qué existe

Sin ella, ambos carritos responden al mismo clic. El tema agrega el artículo y abre su propio drawer, Aftersell lo agrega y abre el nuestro, y el comprador ve dos carritos, a menudo con el artículo agregado dos veces.

Detener el evento es la forma más simple de garantizar un solo agregado y un solo carrito.

## Qué cuesta

Detener el evento lo detiene para **todos**, no solo para el tema. Cualquier otro código que escuche ese mismo agregar al carrito deja de ejecutarse: tus analíticas, un pixel de tracking, una app de suscripciones o bundles, un script que agregaste tú mismo.

Falla silenciosamente. Nada aparece en la consola del navegador, y el agregado en sí sigue funcionando, así que el síntoma habitual es un número equivocado en lugar de algo visiblemente roto:

* Eventos `add_to_cart` que faltan en GA4, Meta o TikTok
* Una app de suscripciones o bundles que funciona en la página del producto pero no a través del carrito
* Tu propio `addEventListener` en el formulario que nunca se dispara

Si algo de eso te suena familiar, esta página es la causa y la solución está más abajo.

## Cuándo Aftersell no intercepta

La intercepción no siempre está activa. Aftersell deja en paz al agregar al carrito cuando:

* **Reconoce el carrito de tu tema.** En los temas con los que Aftersell sabe trabajar, hace que el propio carrito del tema quede inerte en lugar de bloquear el evento, y luego deja que el tema realice el agregado normalmente. Tus scripts se ejecutan como siempre. Consulta [Qué temas](#which-themes-aftersell-recognizes) más abajo.
* **El formulario no agrega una línea de artículo.** Un formulario sin `id` de variante y sin `items[]` se deja en paz.
* **Has optado por salir** usando uno de los métodos que se indican a continuación.

Cuando Aftersell no realiza el agregado, aún vigila la petición al carrito y abre el drawer cuando la ve. Consulta [Antes de elegir: qué cambia](#before-you-choose-what-changes).

## Qué temas reconoce Aftersell

| Tema                                                  |                                                                                             |
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| **Dawn** y el resto de la familia gratuita de Shopify | Craft, Colorblock, Crave, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste |
| **Horizon**                                           | El tema predeterminado actual de Shopify                                                    |
| **Impulse**                                           |                                                                                             |

Aftersell hace la coincidencia según **cómo está construido un tema**, no según su nombre, así que un tema personalizado bifurcado de cualquiera de estos normalmente también se reconoce, incluyendo builds privados que Aftersell nunca ha visto.

<Note>
  Lo contrario también ocurre: un build muy personalizado puede alejarse tanto de su padre que Aftersell ya no lo reconozca, aunque el tema todavía se llame "Dawn". Estar en esta lista hace que el reconocimiento sea probable, no seguro.
</Note>

## Tus opciones

Elige la más estrecha que resuelva tu problema. Cada fila renuncia a más que la anterior.

| Opción                                                               | Alcance                                 | Aftersell aún abre el drawer           |
| -------------------------------------------------------------------- | --------------------------------------- | -------------------------------------- |
| [`registerSkipAddToCartRule`](#per-form-a-rule-in-code)              | Los formularios que tu regla seleccione | Sí, a partir de la petición al carrito |
| [`aftersell-cart-skip-atc`](#per-form-a-class-in-your-theme)         | Un formulario o botón                   | Sí, a partir de la petición al carrito |
| [`skip_add_to_cart_interceptor`](#whole-store-turn-interception-off) | Cada formulario de la tienda            | Sí, a partir de la petición al carrito |

### Antes de elegir: qué cambia

Optar por salir devuelve el agregado a tu tema, lo que plantea dos preguntas que vale la pena responder antes de elegir una fila: si tu carrito sigue abriéndose, y si el carrito del tema aparece junto a él.

#### ¿Se seguirá abriendo tu carrito?

Normalmente sí, sin trabajo de tu parte. Sea quien sea que realice el agregado, Aftersell vigila la petición que va a Shopify y abre el drawer cuando la ve, siguiendo tu configuración normal de **Open cart when an item is added**. No tienes que llamar a nada por tu cuenta.

Tres situaciones rompen eso, y las tres tienen solución:

**El agregado va a un lugar distinto de los endpoints de carrito de Shopify.** Aftersell vigila `/cart/add`, `/cart/change`, `/cart/update` y `/cart/clear` en tu propio dominio. Una app que agrega a través de su propio endpoint y luego sincroniza el carrito no es visible para esto. Abre el carrito por tu cuenta una vez que el agregado de esa app termine:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});
```

**Pasan más de unos tres segundos entre el clic y la petición.** Aftersell trata un agregado que sigue de cerca a un clic o pulsación de tecla real como impulsado por el comprador. Más allá de esa ventana se considera un agregado en segundo plano, que no abre el drawer a menos que optes por ello:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```

**Tu configuración del carrito dice que no.** Si **Open cart when an item is added** está desactivado, o has establecido `open_on_add_to_cart: 'never'`, nada abre el drawer. Eso está funcionando como se configuró.

#### ¿Se abrirá también el carrito del tema?

Este es el riesgo que conllevan las exclusiones, y la respuesta depende de tu tema.

Hacer inerte el carrito del tema está **separado de la intercepción** y ocurre al cargar la página de todas formas, así que ninguna de las exclusiones que aparecen aquí lo vuelve a activar. En un tema de la [lista de reconocidos](#which-themes-aftersell-recognizes), el propio carrito del tema permanece en silencio y el comprador ve un solo carrito, el tuyo.

En un tema que Aftersell no reconoce, no hay nada que contenga al carrito del tema. Optar por salir significa que el tema maneja el agregado exactamente como siempre lo hizo, incluyendo abrir su propio drawer o redirigir a `/cart`, mientras que Aftersell abre su drawer a partir de la petición que vio. Eso son dos carritos, y es la razón por la que existe la intercepción en primer lugar.

Si eso sucede, tienes tres opciones: dejar la intercepción activada para ese formulario, usar una exclusión más estrecha que no cubra los formularios que lo están causando, o detener el propio carrito del tema por tu cuenta en el código de tu tema.

<Tip>
  Activa una exclusión primero en un tema de prueba o sin publicar. Si el propio carrito del tema aparece donde antes no lo hacía, tu tema no es uno que Aftersell reconozca, y querrás mantener la intercepción activada para esos formularios.
</Tip>

<Note>
  Esto solo se aplica al agregar al carrito. Hacer que el **icono del carrito** omita Aftersell con la clase `aftersell-cart-wont-open-cart` es diferente: un clic en el icono del carrito no envía ninguna petición, así que no hay nada para que Aftersell vigile, y el drawer no se abrirá. Consulta más abajo.
</Note>

### Por formulario: una regla en código

La opción preferida. Registra una regla que devuelva `true` para los formularios que quieres dejar en paz:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
  form.hasAttribute('data-skip-aftersell')
);
```

Ponla en **Cart settings → Custom script → Initialization**. Las reglas son aditivas: la tuya se ejecuta junto a cualquier otra, y cualquier regla que devuelva `true` omite ese formulario. Todos los detalles en [Hooks](/es/aftersell/cart/sdk-hooks#registerskipaddtocartrule).

### Por formulario: una clase en tu tema

Si prefieres no escribir una regla, agrega la clase `aftersell-cart-skip-atc` en tu tema:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<form action="/cart/add" method="post" class="aftersell-cart-skip-atc">
```

<Note>
  Para el envío de un formulario, la clase debe estar en el **propio elemento form**. Un `div` padre no funcionará. Para un botón que agrega al carrito sin un envío de formulario, la clase puede estar en el botón o en cualquier elemento a su alrededor.
</Note>

### Toda la tienda: desactivar la intercepción

La opción contundente. Agregar al carrito se comporta exactamente como lo hacía originalmente tu tema, en cada formulario:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ skip_add_to_cart_interceptor: true });
```

<Warning>
  Esta se lee **una vez, cuando el carrito se carga**. Solo funciona desde el script de **Initialization** de tu carrito. Establecerla después, dentro de `ready()` o desde un handler de eventos, no hace nada y falla silenciosamente.
</Warning>

Recurre a esto solo cuando las opciones por formulario no encajen, por ejemplo cuando los formularios que necesitas eximir los crea otra app y no puedes identificarlos de forma confiable.

## El icono del carrito es aparte

El icono del carrito en tu encabezado lo maneja su propio interceptor, con su propia exclusión. Desactivar la intercepción de agregar al carrito no cambia lo que hace el icono del carrito, y lo contrario también es cierto.

Al hacer clic en el icono del carrito se abre el drawer de Aftersell en lugar de ir a `/cart`. Para dejar un icono o botón en paz, agrégale la clase `aftersell-cart-wont-open-cart`, o cualquier elemento a su alrededor:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<a href="/cart" class="aftersell-cart-wont-open-cart">Cart</a>
```

Ese control entonces hace lo que sea que tu tema le haga hacer, normalmente ir a la página del carrito. Aftersell queda fuera del panorama por completo, así que **el drawer no se abrirá**. A diferencia del agregar al carrito, no hay ninguna petición que vigilar, así que si quieres que tu carrito se abra desde ese control tienes que decirlo:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});
```

El mismo problema de silenciamiento se aplica aquí: como Aftersell detiene el clic, tus analíticas y pixeles tampoco ven los clics en el icono del carrito. Si eso es todo lo que necesitas arreglar, conserva el drawer y detén el silenciamiento:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ skip_open_cart_interceptor: true });
```

Tus listeners se ejecutan, el drawer sigue abriéndose, y el clic sigue sin navegar a `/cart`. Todos los detalles en [Configure](/es/aftersell/cart/sdk-configure#skip_open_cart_interceptor).

<Note>
  Para cambiar *qué* elementos abren el carrito en lugar de desactivarlos, usa **Cart settings → Advanced → Cart icon selector** en lugar de editar tu tema.
</Note>

## Adónde ir después

* **[Configure](/es/aftersell/cart/sdk-configure)**: cada opción del SDK, incluyendo las que se mencionan aquí.
* **[Hooks](/es/aftersell/cart/sdk-hooks)**: control por formulario y por línea.
* **[Abrir el drawer desde un constructor de páginas](/es/aftersell/cart/sdk-use-case-page-builder)**: para Replo, PageFly, GemPages y botones personalizados que agregan al carrito a su manera.