Abrir o drawer a partir de um page builder

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:

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

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

Abra sua página no editor do Replo e selecione o botão Add to Cart.
Na barra lateral direita, abra a aba Interactions.
Em On Click, clique em + e escolha Run JavaScript.

Cole:

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

Selecione a interação Add Product to Cart de novo e desligue Go to cart after?.
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:

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:

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:

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, 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 <form> e a Aftersell o ignora, sem necessidade de script.

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

Solução de problemas

Sintoma	Causa provável
Item adicionado, drawer fica fechado	O builder não está emitindo os eventos de carrinho padrão da Shopify. Use a chamada explícita `refresh()` + `open()`.
O comprador é redirecionado para `/cart`	A opção “go to cart after add” do builder ainda está ligada. Desligue-a.
O drawer abre mas mostra conteúdo desatualizado	`open()` executou antes de `refresh()` resolver. Encadeie-os com `.then()`, como acima.
Nada acontece	Ações chamadas antes de o carrinho carregar avisam no console e não fazem nada. Envolva em `window.aftersell.cart.ready().then(…)` se o botão pode ser clicado tão cedo.
Funciona em uma página, não em outra	A maioria dos builders aplica interações por página. Repita a configuração em cada uma.

Verifique window.aftersellCartDebugEvents se uma chamada parece não fazer nada, já que as falhas do SDK são engolidas em vez de lançadas.

Para onde ir a seguir

Configure: open_on_background_add e as outras opções do drawer.
Actions: refresh, open e addItem.
Hooks: isentando um único formulário.

Primeiros passos

Página inicial

Melhores práticas

Upsells pós-compra

Carrinho

Upsells no checkout (Shopify Plus)

Página de agradecimento

Upsells na página de produto

Rokt Thanks

Estratégias

Análises e rastreamento

Integrações

Aftersell MCP

Faturamento e conta

Solução de problemas

Abrir o drawer a partir de um page builder

A correção, em uma linha

A opção sem código primeiro

Configuração por builder

Replo

PageFly e GemPages

Seu próprio botão

Quando o botão do builder deve ignorar a Aftersell por completo

Solução de problemas

Para onde ir a seguir

​A correção, em uma linha

​A opção sem código primeiro

​Configuração por builder

​Replo

​PageFly e GemPages

​Seu próprio botão

​Quando o botão do builder deve ignorar a Aftersell por completo

​Solução de problemas

​Para onde ir a seguir

A correção, em uma linha

A opção sem código primeiro

Configuração por builder

Replo

PageFly e GemPages

Seu próprio botão

Quando o botão do builder deve ignorar a Aftersell por completo

Solução de problemas

Para onde ir a seguir