> ## 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 o drawer a partir de um page builder
> Um caso de uso do Cart SDK para fazer botões de adicionar ao carrinho do Replo, PageFly, GemPages e personalizados abrirem o drawer do Aftersell Cart.
A Aftersell intercepta o adicionar ao carrinho em formulários de produto padrão da Shopify. Construtores de landing page frequentemente adicionam ao carrinho do jeito deles, usando uma chamada JavaScript em vez de um envio de formulário, então o item entra no carrinho mas o drawer fica fechado, ou o comprador é redirecionado para `/cart`.
## A correção, em uma linha
Depois que o adicionar ao carrinho do builder termina, diga ao carrinho para rebuscar e abrir:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
Adicione isso como uma **segunda ação** no botão, depois do "add to cart" do próprio builder, e desligue a opção "go to cart" ou "redirect after add" do builder.
Experimente [`open_on_background_add`](#the-no-code-option-first) primeiro, pois muitas vezes ele resolve isso sem tocar no botão.
## A opção sem código primeiro
A Aftersell detecta adições que ela mesma não processou de duas formas. Ambas funcionam o tempo todo — elas são anexadas juntas no boot e nenhuma suprime a outra, então uma adição pode ser anunciada pelas duas — e cada anúncio aplica a regra de abertura de forma independente:
* **Na rede.** A Aftersell observa requisições aos endpoints de carrinho da Shopify. Se a adição veio depois de um clique ou tecla reais dentro de cerca de três segundos, ela conta como iniciada pelo comprador, e o drawer abre de acordo com sua configuração normal de **Open cart when an item is added**. Qualquer builder que adiciona pela Ajax cart API da Shopify (`/cart/add.js`) cai aqui, que é o caso comum — então experimente seu botão primeiro, ele pode já funcionar sem nenhuma alteração.
* **[Eventos de carrinho padrão da Shopify](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events).** Uma adição anunciada dessa forma é sempre tratada como uma adição *em segundo plano*, com ou sem clique do comprador. Adições em segundo plano não abrem o drawer a menos que você opte por isso:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```
Cole isso em **Cart settings → Custom script → Initialization**. Se o drawer agora abre após o botão de adicionar do seu builder, você terminou, sem trabalho por botão, e cobre todas as páginas.
`open_on_background_add` também cobre adições sem nenhum gesto do comprador — outro app ou script escrevendo no carrinho. Ative-o apenas se você quiser que essas também abram o drawer.
Se nenhum dos caminhos abrir o drawer, recorra à chamada explícita abaixo.
## Configuração por builder
### Replo
1. Abra sua página no editor do Replo e selecione o botão **Add to Cart**.
2. Na barra lateral direita, abra a aba **Interactions**.
3. Em **On Click**, clique em `+` e escolha **Run JavaScript**.
4. Cole:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
5. Selecione a interação **Add Product to Cart** de novo e desligue **Go to cart after?**.
6. Pré-visualize, confirme que o drawer abre e então publique.
Repita em cada página que tem um botão de adicionar ao carrinho.
### PageFly e GemPages
Ambos permitem anexar JavaScript personalizado ao clique de um botão ou adicionar um elemento de código personalizado à página. Use o mesmo snippet, configurado para executar depois da ação de adicionar ao carrinho do builder, e desative qualquer configuração de "redirect to cart" no botão.
### Seu próprio botão
Se você mesmo está adicionando ao carrinho, pule a ida e volta e use a ação do próprio SDK, que atualiza o carrinho e pode abrir o drawer em um único passo:
```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();
});
});
```
Use `refresh()` apenas quando algo *diferente* alterou o carrinho e você precisa que a Aftersell se atualize:
```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(); });
```
## Quando o botão do builder deve ignorar a Aftersell por completo
Às vezes o oposto é verdade: um formulário precisa do seu próprio fluxo, e a interceptação da Aftersell atrapalha. Isente apenas aquele formulário:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
form.hasAttribute('data-skip-aftersell')
);
```
Então adicione `data-skip-aftersell` ao formulário. Isso é melhor que [`skip_add_to_cart_interceptor`](/pt/aftersell/cart/sdk-configure#skip_add_to_cart_interceptor), que desativa a interceptação para todo formulário na página.
Mais simples ainda, se você pode editar o markup do formulário: adicione a classe **`aftersell-cart-skip-atc`** ao `