Skip to main content
O Replo é um poderoso criador de páginas de destino, mas seu comportamento padrão de “Add to Cart” redireciona para a página de carrinho da Shopify. Isso interrompe a experiência pretendida do Upcart, que usa um drawer deslizante. Com um simples trecho de JavaScript, você pode fazer o Replo notificar o Upcart quando um produto é adicionado, mantendo o cliente na mesma página e abrindo o drawer imediatamente. Isso mostra como o JavaScript pode ser usado não apenas para a integração com o Upcart, mas também para personalizações mais amplas do carrinho na sua loja.

​
Por que essa integração é importante

Por padrão, o Replo suporta vários comportamentos após adicionar ao carrinho:
  • Redirecionar para a página de carrinho da Shopify
  • Redirecionar para o checkout
  • Permanecer na página (sem interação com o drawer)
O Upcart não abre automaticamente, a menos que você o acione explicitamente. Essa configuração garante que o drawer abra logo após o clique no botão “Add to Cart” do Replo.

​
Passo 1: abra a página do produto no Replo

  1. Abra sua página de produto ou de destino no editor do Replo
  2. Selecione o botão Add to Cart no layout da página
  3. Na barra lateral direita, clique na aba Interactions
Aba Interactions do editor do Replo adicionando uma interação On Click ao botão Add to Cart

​
Passo 2: adicione uma segunda interação

  1. Confirme que o botão já usa a interação Add Product to Cart
  2. Clique no ícone + abaixo de On Click
  3. Na lista de ações, selecione Run JavaScript
  4. No campo de código, cole o seguinte:
    Isso diz ao Upcart para abrir o drawer assim que o produto for adicionado ao carrinho.

​
Passo 3: desative o redirecionamento do Replo para a página do carrinho

  1. Selecione novamente a interação Add Product to Cart
  2. Desative a opção Go to cart after?
Isso impede que o Replo redirecione para a página de carrinho da Shopify, o que ignoraria completamente o drawer do Upcart.

​
Passo 4: visualize e publique

  1. Clique em Preview no Replo para testar a interação
  2. Adicione um produto ao carrinho e confirme que o drawer do Upcart abre automaticamente
  3. Depois de confirmar, clique em Publish Page para publicar as alterações

​
Observações

  • Essa configuração deve ser aplicada a cada página em que você usar Replo + Upcart juntos
  • A função window.upcartRegisterAddToCart(); vem da API pública do Upcart e funciona sem instalações de código adicionais
  • Isso funciona tanto na versão mobile quanto na versão desktop das páginas do Replo

​
Observações

O Replo agora deve parar de redirecionar para a página de carrinho da Shopify e, em vez disso, notificar o Upcart quando um item for adicionado ao carrinho. Atenção: você precisará concluir esse processo para cada página de produto que criar no Replo Landing Page Designer.