Provador em lojas SPA e headless
Em lojas que trocam de página sem recarregar o navegador (SPA, headless ou temas com navegação instantânea), os provadores de moda, óculos e ambientes acompanham a troca de endereço sozinhos. Cole o código uma única vez, no HTML base do site, como em qualquer loja.
O que o provador acompanha
Seção intitulada “O que o provador acompanha”O provador de moda, de óculos e de ambientes percebe quando o endereço da página muda por:
history.pushStateouhistory.replaceState, usados pela maioria dos roteadores;- o botão voltar ou avançar do navegador (
popstate); - mudança no trecho depois de
#(hashchange).
A cada troca, o provador:
- esconde o botão e os elementos com
data-reverbs-auto-show; - confere se o produto do novo endereço está no catálogo e ativo;
- se estiver, mostra de novo o botão e os elementos com
data-reverbs-auto-show.
Botões com data-reverbs-trigger que o seu site cria depois da troca também passam a abrir o provador. Veja Modos de instalação.
Endereço de cada produto
Seção intitulada “Endereço de cada produto”O provador reconhece o produto pelo endereço da página. Para funcionar numa loja SPA:
- cada produto precisa ter um endereço próprio, igual ao Link do produto na loja cadastrado no catálogo;
- o endereço precisa mudar quando o cliente abre outro produto.
Se a sua loja mostra produtos sem mudar o endereço, por exemplo numa janela rápida sobre a vitrine, o provador não sabe qual produto está na tela. Nesse caso, fale com o suporte.
Abrir pelo seu código
Seção intitulada “Abrir pelo seu código”Se o seu componente de produto controla o clique do botão, chame a API JavaScript. Enquanto o provador confere o produto da nova página, open() não faz nada. Para o cliente não clicar antes da hora, coloque data-reverbs-auto-show e style="display:none" no seu botão: ele só aparece quando o produto foi confirmado.
Provador dentro da página
Seção intitulada “Provador dentro da página”No formato Dentro da página, o espaço reservado precisa existir quando o provador carrega. Em lojas SPA, o espaço criado depois de uma troca de página não recebe o provador. Para esse formato numa loja SPA, fale com o suporte.
Provador de medidas
Seção intitulada “Provador de medidas”O provador de medidas confere o produto só quando a página carrega. Numa troca de produto sem recarregar, os links continuam os do primeiro produto. Se a sua loja funciona assim, fale com o suporte antes de instalar.
Video Commerce
Seção intitulada “Video Commerce”O Video Commerce acompanha mudanças no conteúdo e no endereço da página e mostra a vitrine prevista para cada endereço. Veja Código do Video Commerce.
Perguntas frequentes
Preciso recarregar o provador quando o cliente troca de produto sem recarregar a página?
Não nos provadores de moda, óculos e ambientes. Eles percebem a troca de endereço e conferem o produto da nova página sozinhos.
O provador de medidas funciona em loja SPA?
Ele confere o produto só quando a página carrega. Se a sua loja troca de produto sem recarregar, fale com o suporte antes de instalar.