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 em https://deco.cx/admin/sites/{site}/library?type=apps

Vídeo: Para assistir ao conteúdo deste artigo, clique aqui

Sumário

1. Pré-requisitos
2. Criando o website
3. Configurando a URL Pública da Loja
4. Conectando à VTEX
5. Adicionando suas coleções ao seu website.
6. Solução de problemas

Pré-requisitos

• Um website no Deco. Crie um gratuitamente em https://deco.cx/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:

Configurando a URL Pública da Loja

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 é:

Conectando à VTEX

Para se conectar à sua conta na VTEX:

1. Acesse o painel administrativo do seu site em https://deco.cx/admin.

2. Na barra superior, selecione blocos.

3. Escolha a guia Apps.

4. Selecione o app vtex.ts Você verá algo como:

   

5. Altere a configuração da conta de bravtexfashionstore para o nome da sua conta VTEX aqui.

6. Defina a URL Pública da Loja.

7. Clique em Salvar e depois em Publicar.

🎉 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.

1. Acesse o painel administrativo do seu site em https://deco.cx/admin.

2. Na barra superior, selecione blocos.

3. Selecione o bloco /Products/ProductShelf.tsx e clique no botão +.

   

4. No campo products, selecione qualquer integração VTEX (legacy ou Intelligent Search).

   

5. Preencha o campo Collection ID com uma coleção válida, por exemplo, 139.

6. Preencha o atributo count com o número de produtos a serem exibidos, digamos 6.

   

7. Agora, no canto superior direito, clique em Criar e dê um nome, por exemplo, Coleção 139.

   

8. No canto superior direito, clique em Publicar.

9. 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:

1. 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.

2. salesChannel/defaultLocale errado. Um salesChannel/defaultLocale mal configurado pode levar a produtos e preços errados serem renderizados. Para descobrir o valor correto:

   1. Abra o Dev Tools, e va para Application ou Storage.
   2. No lado esquerdo, selecione Cookies e a url do site.
   3. Procure pelo Cookie vtex_segment e copie o valor.
   4. Em outra aba, abra https://jwt.io e cole o valor do cookie copiado no paço anterior.
   5. No JSON retornado: A propriedade channel traz o valor do salesChannel. A propriedade cultureInfo traz o valor de defaultLocale.

   Na maioria dos casos salesChannel is 1

   

3. Configuração de accountName incorreta. Para descobrir o accountName correto:

   1. Acesse a URL da sua loja atual, por exemplo: https://www.minhaloja.com.br.
   2. Clique com o botão direito e selecione Inspecionar.
   3. Com as Ferramentas de Desenvolvedor abertas, pressione Ctrl + F para abrir a busca dentro do código HTML.
   4. Procure por vtexassets ou vteximg (dependendo do CMS atual da loja).
   5. O accountName estará nas URLs com o formato: {accountName}.vtexassets.com ou {accountName}.vteximg.com.br.