Dúvidas Frequentes: Tenho um front headless – Como faço para integrar e usar o Checkout e o My Account nativos da VTEX corretamente?

Esse tópico tem como objeto auxiliar os clientes que optarem por implementar um front headless em sua operação, mas que ainda querem utilizar as funcionalidades de Minha Conta (My Account) e Checkout nativos da plataforma.

Mas, antes de tudo, que é um Front Headless? :thinking:

Por definição, headless em ecommerce é um tipo de solução de comércio omnichannel (multicanal) na qual o back-end e o front-end são separados, embora integrados através de APIs.

A VTEX, como uma plataforma MACH ( Microservices-based, API-first, Cloud-native, and Headless), está 100% pronta para suportar cases de clientes que optem por utilizar um front-end externo, que não seja CMS Legacy, Store Framework ou Faststore (fronts nativos da VTEX). Qualquer front que não seja feito com essas tecnologias é considerado, por definição, headless.

Ok, quero implementar um front headless, mas como permanecer utilizando o Minha Conta e Checkout nativos? :desktop_computer:

Tendo em vista que o seu front vai estar hospedado em uma plataforma externa, o apontamento de DNS do domínio final da loja vai estar apontado para um endereço não VTEX.

Exemplo: Vamos utilizar um exemplo hipotético, a loja de calcados do João.

Supondo que o domínio final da loja do João vai ser www.sapatosjoao.com.br, esse domínio vai estar apontado, em termos de DNS, para essa infraestrutura externa a VTEX.

Nesse sentido, para que o checkout e o minha conta reflita no root domain sapatosjoao.com.br precisamos de um subdomínio.

Um subdomínio é um endereço que faz parte do domínio, ou seja, é uma ramificação do domínio. Geralmente é possível criar quantos subdomínios necessários a partir de um domínio.

O subdomínio usa o domínio principal e se diferencia pela adição de um outro nome, além do nome do domínio. Por exemplo: o subdomínio mais comum é o ‘www’, mas algumas lojas usam o subdomínio ‘loja’ ou ‘store’.

Nesse caso do exemplo da loja de calçados do João o subdomínio principal dele é www, mas ele pode usar um outro subdomínio, como por exemplo ‘secure’, para que esse subdomínio esteja apontado para a VTEX.

Na prática a URL secure.sapatosjoao.com.br estará apontada para a VTEX através de um apontamento CNAME para o endereço secure.sapatosjoao.com.br.cdn.vtex.com.

Nesse sentido, teremos dois apontamentos:

www.sapatosjoao.com.br → apontado para a infraestrutura externa responsável pelo front

secure.sapatosjoao.com.br → apontado para a VTEX

Com essa estrutura de apontamento, o cliente conseguirá acessar o checkout e a minha conta nativos através dos seguintes links, mesmo com um front headless:

secure.sapatosjoao.com.br/checkout

secure.sapatosjoao.com.br/account

Ademais, para que o cliente permaneça logado depois de se autenticar através do VTEX ID nativo da VTEX, após entrar na página de account é necessário abrir um ticket para o suporte da VTEX, solicitando a configuração do authCookieRootDomain para o domínio principal da loja.

Por fim, é necessário que o cliente, ao se autenticar, seja redirecionado para o front externo. Isso deve ser feito através de um redirecionamento. Para mais informações recomendo consultar a seguinte documentação: https://www.faststore.dev/docs/go-live/5-integrating-the-vtex-order-placed-and-my-account

Caso ainda tenha alguma dúvida sobre o assunto, sinta-se à vontade para perguntar por aqui! Será um prazer respondê-lo e ajudá-lo!

1 Like