Este artigo orienta você na criação e configuração de um website no deco.cx para uma loja virtual utilizando dados da plataforma de comércio eletrônico VTEX.
TL;DR: Para se conectar à VTEX, você precisa alterar a configuração do app
vtex
emhttps://deco.cx/admin/sites/{site}/library?type=apps
Sumário
- Pré-requisitos
- Criando o website
- Configurando a
URL Pública da Loja
- Conectando à VTEX
- Adicionando suas coleções ao seu website.
- Solução de problemas
Pré-requisitos
- Um website no Deco. Crie um gratuitamente em Deco Admin.
- Uma conta na VTEX (ajuda).
Criando o website
Caso você já tenha um website no deco.cx, avance para a próxima seção. Caso contrário, siga as etapas deste guia para criar um.
Certifique-se de que seu site foi criado com base no modelo Storefront-Vtex abaixo:
URL Pública da Loja
Configurando a O modelo Deco Commerce atualmente faz o proxy dos serviços checkout e
my-account da própria VTEX. Isso significa que seu usuário final NÃO será
redirecionado para nenhum outro domínio ao fazer o checkout. Por exemplo, vamos
supor que, antes de migrar para o Deco, sua loja esteja hospedada em
www.minhaloja.com
e a URL de checkout seja
https://www.minhaloja.com/checkout
.
Após migrar para o Deco, sua loja continuará sendo servida em
www.minhaloja.com
e a URL de checkout ainda será
https://www.minhaloja.com/checkout
.
Atualmente, a VTEX não expõe seus serviços de interface de usuário por meio de
uma URL pública na internet. Por esse motivo, precisamos de uma URL secundária
para habilitar o proxy dos serviços de checkout e my-account. Seguindo nosso
exemplo acima, crie um subdomínio novo, por exemplo proxy.minhaloja.com
, e
aponte-o para a VTEX seguindo este
guia.
Depois disso, o proxy.minhaloja.com
será a URL Pública da Loja
necessária na
próxima etapa.
A arquitetura final da configuração é:
Importante: Ao criar a URL secundária, você deve adicionar um
<meta name="robots" content="noindex">
no <head>
após o Go Live para evitar
indexação indesejada.
Conectando à VTEX
Para se conectar à sua conta na VTEX:
Acesse o painel administrativo do seu site em Deco Admin.
Na barra superior, selecione blocos.
Escolha a guia Apps.
Selecione o app vtex.ts Você verá algo como:
Altere a configuração da conta de
bravtexfashionstore
para o nome da sua conta VTEX.Defina a
URL Pública da Loja
.Clique em
Salvar
e depois emPublicar
.
🎉 Parabéns, você configurou a integração com a VTEX. Para garantir que a integração esteja funcionando corretamente, continue lendo e crie um bloco de coleção reutilizável.
Adicionando suas coleções ao seu website.
Após a configuração da VTEX ser concluída, tente adicionar uma prateleira ao seu website.
Acesse o painel administrativo do seu site em Deco Admin.
Na barra superior, selecione blocos.
Selecione o bloco
/Products/ProductShelf.tsx
e clique no botão+
.No campo
products
, selecione qualquer integração VTEX (legacy ou Intelligent Search).Preencha o campo
Collection ID
com uma coleção válida, por exemplo, 139.Preencha o atributo
count
com o número de produtos a serem exibidos, digamos 6.Agora, no canto superior direito, clique em
Criar
e dê um nome, por exemplo,Coleção 139
.No canto superior direito, clique em
Publicar
.Agora você pode arrastar e soltar
o bloco Coleção 139
em qualquer página.
Solução de problemas
Problemas comuns ao conectar-se à VTEX surgem de:
VTEX Intelligent Search (IS) não está instalada na conta Se você não tem certeza se a IS está instalada em sua conta, use os carregadores tradicionais (VTEX Catalog). Cuidado, algumas funcionalidades do Fashion starter, como o autocomplete, dependem da VTEX Intelligent Search.
salesChannel/defaultLocale errado. Um salesChannel/defaultLocale mal configurado pode levar a produtos e preços errados serem renderizados. Para descobrir o valor correto:
- Abra o Dev Tools, e va para Application ou Storage.
- No lado esquerdo, selecione Cookies e a url do site.
- Procure pelo Cookie
vtex_segment
e copie o valor. - Em outra aba, abra o site do JWT e cole o valor do cookie copiado no paço anterior.
- No JSON retornado: A propriedade
channel
traz o valor dosalesChannel
. A propriedadecultureInfo
traz o valor dedefaultLocale
.
Na maioria dos casos
salesChannel
is 1Configuração de accountName incorreta. Para descobrir o accountName correto:
- Acesse a URL da sua loja atual, por exemplo:
https://www.minhaloja.com.br
. - Clique com o botão direito e selecione Inspecionar.
- Com as Ferramentas de Desenvolvedor abertas, pressione Ctrl + F para abrir a busca dentro do código HTML.
- Procure por
vtexassets
ouvteximg
(dependendo do CMS atual da loja). - O
accountName
estará nas URLs com o formato:{accountName}.vtexassets.com
ou{accountName}.vteximg.com.br
.
- Acesse a URL da sua loja atual, por exemplo: