Quando Fin for Ecommerce adiciona ou altera um item, ele atualiza o carrinho na sua loja. Isso funciona por padrão na maioria dos temas. Se seu carrinho não atualizar, a solução está abaixo.
Temas suportados
Seu carrinho permanece sincronizado automaticamente nos temas Dawn, Horizon, Brooklyn, Flex, Flow, Venue, Sense, Craft, Refresh e nos temas baseados neles. Muitos outros, incluindo Focal, Prestige e Warehouse, também são suportados.
Nota: O suporte depende de como seu tema foi construído, não do nome, então um tema muito personalizado pode ainda precisar do passo abaixo.
Se o carrinho da sua vitrine não atualizar
Se as alterações do Fin nunca chegam ao seu carrinho, ou só aparecem quando o comprador recarrega a página, seu tema atualiza o carrinho de uma forma que o Intercom não consegue detectar. Isso é mais comum em temas personalizados.
Nota: Adicionar este trecho requer acesso ao admin do Shopify e familiaridade básica com edição de código do tema. Se não se sentir confortável editando arquivos do tema, compartilhe este artigo com seu desenvolvedor.
Para corrigir, adicione o trecho abaixo ao seu tema. Ele escuta um evento personalizado do navegador (intercom:cartUpdated) que o Fin dispara sempre que altera o carrinho, então busca novamente o carrinho no Shopify e dispara os eventos que seu tema usa para renderizá-lo novamente.
No admin do Shopify, abra o editor de código do seu tema ativo.
Abra o arquivo principal de layout, geralmente layout/theme.liquid.
Cole o trecho logo antes da tag de fechamento
</body>e salve.Teste pedindo para o Fin adicionar um produto. O carrinho da sua vitrine deve atualizar imediatamente, sem recarregar a página.
document.addEventListener('intercom:cartUpdated', async () => {
try {
const res = await fetch(`${window.Shopify.routes.root}cart.js`, {
headers: { Accept: 'application/json' },
cache: 'no-store',
});
if (!res.ok) return;
const cart = await res.json();
// Replace these with whatever your theme uses to re-render the cart.
document.dispatchEvent(
new CustomEvent('cart:live', { detail: cart, bubbles: true })
);
document.dispatchEvent(
new CustomEvent('cart:reload', { bubbles: true })
);
document.documentElement.dispatchEvent(
new CustomEvent('cart:refresh', { bubbles: true })
);
} catch {
// Cart fetch failed. Leave the storefront cart as it is.
}
});
Altere os três últimos disparos para chamar o que seu tema usa para renderizar o carrinho novamente.
Se o carrinho ainda não atualizar após adicionar o trecho, verifique se os nomes dos eventos personalizados nos três últimos disparos correspondem aos que seu tema escuta. Os arquivos JavaScript ou a documentação do seu tema mostrarão quais eventos ele usa para renderizar o carrinho. Se estiver em dúvida, compartilhe este artigo com seu desenvolvedor.