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: Assista ao conteúdo deste artigo 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 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:

Criando um website no deco.cx

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

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:

  1. Acesse o painel administrativo do seu site em Deco Admin.

  2. Na barra superior, selecione blocos.

  3. Escolha a guia Apps.

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

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

  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 Deco Admin.

  2. Na barra superior, selecione blocos.

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

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

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

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

    imagem
  8. No canto superior direito, clique em Publicar.

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

  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 o site do JWT 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

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

    Exemplo na loja www.mash.com.br

Was this page helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum
Continue reading