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

# Interceptação do adicionar ao carrinho

> Por que o Aftersell assume o adicionar ao carrinho, como saber se um formulário está sendo interceptado e todas as maneiras de isentar um formulário.

Quando um comprador clica em **Adicionar ao carrinho**, normalmente é o Aftersell que executa a adição, em vez de deixar o tema fazer. Esta página explica por quê, o que isso significa para os scripts que você adicionou e como desativar isso para um formulário ou para todos eles.

A maioria das lojas nunca precisa mudar nada disso. Continue lendo se um script seu parou de disparar no adicionar ao carrinho, ou se um botão de adicionar ao carrinho estiver se comportando de forma estranha.

## O que a interceptação faz

O Aftersell escuta o submit do adicionar ao carrinho antes do tema. Quando reconhece um, ele:

1. Interrompe o evento, para que nada mais na página trate aquele clique.
2. Envia a adição ao Shopify por conta própria.
3. Abre o drawer do Aftersell Cart.

O passo 1 é o importante, e é a razão de existir desta página.

## Por que ela existe

Sem isso, os dois carrinhos respondem ao mesmo clique. O tema adiciona o item e abre o próprio drawer, o Aftersell adiciona e abre o nosso, e o comprador vê dois carrinhos, muitas vezes com o item adicionado duas vezes.

Interromper o evento é a forma mais simples de garantir uma adição e um carrinho.

## O que isso custa

Interromper o evento o interrompe para **todos**, não apenas para o tema. Qualquer outro código escutando esse mesmo adicionar ao carrinho para de rodar: as suas analytics, um pixel de rastreamento, um app de assinatura ou de bundle, um script que você mesmo adicionou.

Ele falha silenciosamente. Nada aparece no console do navegador, e a adição em si continua funcionando, então o sintoma habitual é um número errado em vez de algo visivelmente quebrado:

* Eventos `add_to_cart` faltando no GA4, Meta ou TikTok
* Um app de assinatura ou de bundle que funciona na página do produto, mas não pelo carrinho
* Seu próprio `addEventListener` no formulário nunca disparando

Se algo disso soa familiar, esta página é a causa e a correção está abaixo.

## Quando o Aftersell não intercepta

A interceptação nem sempre está ligada. O Aftersell deixa o adicionar ao carrinho em paz quando:

* **Ele reconhece o carrinho do seu tema.** Em temas com os quais o Aftersell sabe trabalhar, ele deixa o próprio carrinho do tema inerte em vez de bloquear o evento, e então deixa o tema realizar a adição normalmente. Seus scripts rodam como sempre rodaram. Veja [Quais temas](#which-themes-aftersell-recognizes) abaixo.
* **O formulário não adiciona um line item.** Um formulário sem `id` de variante e sem `items[]` é deixado em paz.
* **Você optou por sair** usando um dos métodos abaixo.

Quando o Aftersell não realiza a adição, ele ainda observa a requisição de carrinho e abre o drawer quando a vê. Veja [Antes de escolher: o que muda](#before-you-choose-what-changes).

## Quais temas o Aftersell reconhece

| Tema                                              |                                                                                             |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| **Dawn** e o resto da família gratuita do Shopify | Craft, Colorblock, Crave, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste |
| **Horizon**                                       | Tema padrão atual do Shopify                                                                |
| **Impulse**                                       |                                                                                             |

O Aftersell reconhece pelo **modo como um tema é construído**, não pelo nome, então um tema personalizado forkado de qualquer um destes normalmente também é reconhecido, incluindo builds privados que o Aftersell nunca viu.

<Note>
  O contrário também acontece: um build fortemente customizado pode se afastar do seu pai a ponto de o Aftersell não o reconhecer mais, mesmo que o tema ainda se chame "Dawn". Estar nesta lista torna o reconhecimento provável, não certo.
</Note>

## Suas opções

Escolha a mais restrita que resolva seu problema. Cada linha abre mão de mais do que a anterior.

| Opção                                                                | Escopo                                  | O Aftersell ainda abre o drawer         |
| -------------------------------------------------------------------- | --------------------------------------- | --------------------------------------- |
| [`registerSkipAddToCartRule`](#per-form-a-rule-in-code)              | Os formulários que a sua regra escolher | Sim, a partir da requisição de carrinho |
| [`aftersell-cart-skip-atc`](#per-form-a-class-in-your-theme)         | Um formulário ou botão                  | Sim, a partir da requisição de carrinho |
| [`skip_add_to_cart_interceptor`](#whole-store-turn-interception-off) | Todo formulário da loja                 | Sim, a partir da requisição de carrinho |

### Antes de escolher: o que muda

Optar por sair devolve a adição ao seu tema, o que levanta duas perguntas que vale responder antes de escolher uma linha: se o seu carrinho ainda abre e se o carrinho do tema aparece ao lado dele.

#### Seu carrinho ainda vai abrir?

Normalmente sim, sem trabalho da sua parte. Seja quem for que realiza a adição, o Aftersell observa a requisição indo para o Shopify e abre o drawer quando a vê, seguindo a sua configuração normal de **Open cart when an item is added**. Você não precisa chamar nada por conta própria.

Três situações quebram isso, e todas as três têm uma solução:

**A adição vai para outro lugar que não os endpoints de carrinho do Shopify.** O Aftersell observa `/cart/add`, `/cart/change`, `/cart/update` e `/cart/clear` no seu próprio domínio. Um app que adiciona pelo próprio endpoint e sincroniza o carrinho depois não é visível para isso. Abra o carrinho você mesmo quando a adição desse app terminar:

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

**Passam mais de cerca de três segundos entre o clique e a requisição.** O Aftersell trata uma adição que segue de perto um clique ou tecla real como sendo dirigida pelo comprador. Além dessa janela, ela é considerada uma adição em segundo plano, que não abre o drawer a não ser que você opte por isso:

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

**A sua configuração de carrinho diz que não.** Se **Open cart when an item is added** está desativado, ou se você definiu `open_on_add_to_cart: 'never'`, nada abre o drawer. Isso é o comportamento configurado.

#### O carrinho do tema também vai abrir?

Esse é o risco que as opções de opt-out carregam, e a resposta depende do seu tema.

Deixar o carrinho do tema inerte é **separado da interceptação** e acontece no carregamento da página em ambos os casos, então nenhuma das opções de opt-out aqui religa isso. Em um tema da [lista reconhecida](#which-themes-aftersell-recognizes), o próprio carrinho do tema fica quieto e o comprador vê um carrinho, o seu.

Em um tema que o Aftersell não reconhece, não há nada segurando o carrinho do tema. Optar por sair significa que o tema trata a adição exatamente como sempre tratou, incluindo abrir o próprio drawer ou redirecionar para `/cart`, enquanto o Aftersell abre o drawer a partir da requisição que ele viu. Isso são dois carrinhos, e é o motivo pelo qual a interceptação existe.

Se isso acontecer, você tem três escolhas: deixar a interceptação ligada para aquele formulário, usar um opt-out mais restrito que não cubra os formulários que estão causando o problema, ou parar o próprio carrinho do tema você mesmo no código do tema.

<Tip>
  Ative um opt-out primeiro em um tema de teste ou não publicado. Se o próprio carrinho do tema aparecer onde não aparecia antes, seu tema não é um dos que o Aftersell reconhece, e você vai querer manter a interceptação ligada para esses formulários.
</Tip>

<Note>
  Isto se aplica apenas ao adicionar ao carrinho. Fazer o **ícone do carrinho** ignorar o Aftersell com a classe `aftersell-cart-wont-open-cart` é diferente: um clique no ícone do carrinho não envia requisição, então não há nada para o Aftersell observar, e o drawer não vai abrir. Veja abaixo.
</Note>

### Por formulário: uma regra em código

A opção preferida. Registre uma regra que retorne `true` para os formulários que você quer deixar em paz:

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

Coloque isso em **Cart settings → Custom script → Initialization**. As regras são aditivas: a sua roda junto com quaisquer outras, e qualquer regra que retorne `true` pula aquele formulário. Detalhes completos em [Hooks](/pt/aftersell/cart/sdk-hooks#registerskipaddtocartrule).

### Por formulário: uma classe no seu tema

Se você prefere não escrever uma regra, adicione a classe `aftersell-cart-skip-atc` no seu tema:

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

<Note>
  Para um submit de formulário, a classe precisa estar no **próprio elemento de formulário**. Um `div` pai não funciona. Para um botão que adiciona ao carrinho sem um submit de formulário, a classe pode estar no botão ou em qualquer elemento ao redor dele.
</Note>

### Loja inteira: desligar a interceptação

A opção bruta. O adicionar ao carrinho passa a se comportar exatamente como o seu tema originalmente se comportava, em cada formulário:

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

<Warning>
  Esta é lida **uma vez, quando o carrinho carrega**. Só funciona a partir do script de **Initialization** do seu carrinho. Defini-la depois, dentro de `ready()` ou em um handler de evento, não faz nada e falha silenciosamente.
</Warning>

Recorra a isto apenas quando as opções por formulário não servirem, por exemplo quando os formulários que você precisa isentar são criados por outro app e você não consegue identificá-los de forma confiável.

## O ícone do carrinho é separado

O ícone do carrinho no seu cabeçalho é tratado pelo próprio interceptor, com o próprio opt-out. Desligar a interceptação do adicionar ao carrinho não muda o que o ícone do carrinho faz, e o inverso também é verdadeiro.

Clicar no ícone do carrinho abre o drawer do Aftersell em vez de ir para `/cart`. Para deixar um ícone ou botão em paz, adicione a classe `aftersell-cart-wont-open-cart` a ele, ou a qualquer elemento ao redor:

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

Esse controle então faz o que quer que o seu tema o faça fazer, normalmente ir para a página do carrinho. O Aftersell sai completamente de cena, então **o drawer não vai abrir**. Ao contrário do adicionar ao carrinho, não há requisição para observar, então, se você quer que seu carrinho abra a partir daquele controle, precisa dizer isso:

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

O mesmo problema de silenciamento se aplica aqui: como o Aftersell interrompe o clique, suas analytics e pixels também não veem os cliques no ícone do carrinho. Se é só isso que você precisa corrigir, mantenha o drawer e pare o silenciamento:

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

Seus listeners rodam, o drawer continua abrindo, e o clique continua sem navegar para `/cart`. Detalhes completos em [Configure](/pt/aftersell/cart/sdk-configure#skip_open_cart_interceptor).

<Note>
  Para mudar *quais* elementos abrem o carrinho em vez de desligá-los, use **Cart settings → Advanced → Cart icon selector** em vez de editar o seu tema.
</Note>

## Para onde ir a seguir

* **[Configure](/pt/aftersell/cart/sdk-configure)**: cada opção do SDK, incluindo as referenciadas aqui.
* **[Hooks](/pt/aftersell/cart/sdk-hooks)**: controle por formulário e por linha.
* **[Abrir o drawer a partir de um page builder](/pt/aftersell/cart/sdk-use-case-page-builder)**: para Replo, PageFly, GemPages e botões personalizados que adicionam ao carrinho à sua maneira.