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

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

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 https://deco.cx/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 aqui.
Defina a URL Pública da Loja.
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.

Acesse o painel administrativo do seu site em https://deco.cx/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. imagem

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

VTEX