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?
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?
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!