O frontend de uma loja online, também conhecido como frente de loja, é a interface visual e interativa da loja através da qual os clientes da loja interagem com produtos e executam ações, como navegar por categorias, pesquisar, e adicionar produtos ao carrinho.
Este artigo tem como objetivo auxiliar na escolha de qual tecnologia usar para construir a frente de loja e quais configurações são necessárias para cada uma, considerando os seguintes pontos:
- Tecnologias de desenvolvimento de frente de loja da VTEX.
- Principais funcionalidades de cada tecnologia.
- Etapas de desenvolvimento.
O foco da implementação de frontend é uma etapa com foco em definir as tecnologias a serem implementadas, de acordo com as necessidades do negócio relacionadas à frente de loja.
O frontend pode ser implementado pelo time de desenvolvimento interno da empresa ou pelos nossos parceiros de implementação. Usuários com acesso ao Admin VTEX podem consultar a lista dos nossos parceiros pelo Partner Portal.
Antes de começar
Antes de começar a implementação do frontend, é recomendado que a loja tenha as seguintes etapas configuradas:
| Etapa | Descrição |
|---|---|
| Definição da arquitetura da loja e sua estratégia de vendas | O time definiu a arquitetura da sua loja VTEX de acordo com as estratégias e necessidades do seu modelo de negócio. Mais informações no artigo Contas e arquitetura. |
| Configuração dos perfis de acesso | O time configurou os acessos necessários para usar a plataforma VTEX para cada usuário. Mais informações no artigo Perfis de acesso. |
| Configuração do catálogo | O time configurou o catálogo com os produtos, a árvore de categoria e informações relacionadas, como descrições, imagens e preços, a fim de preencher e testar a loja, incluindo recursos como páginas de listagem de produtos (PLP), funcionalidade de pesquisa, páginas de detalhes de produtos (PDP) e checkout. A ausência de um catálogo pode resultar em testes incompletos e problemas de integração de dados, atrasando a implementação. Mais informações no artigo Módulos da VTEX I. |
| Definição dos aplicativos necessários à operação da loja | O time definiu os aplicativos, nativos ou de terceiros, necessários para a operação da loja. Para lojas que serão construídas usando Store Framework, existe uma lista de apps nativos e de terceiros. Mais informações no artigo VTEX IO apps. |
A etapa de desenvolvimento pode acontecer em paralelo com outras etapas da Integrações de backend e configuração de módulos, como por exemplo as configurações de meios de pagamentos e logística. Isso vai depender do tipo de arquitetura e planejamento escolhidos para a loja VTEX e deve ser acompanhado pela agência implementadora ou Suporte VTEX.
Tecnologias de desenvolvimento de frontend na VTEX
A VTEX possui três tecnologias distintas para o desenvolvimento de frente de loja: a FastStore, o Store Framework e o CMS Portal Legado. O CMS Portal Legado foi a primeira tecnologia da VTEX para construção de frente de loja, baseada em HTML, CSS e JavaScript, e todo o desenvolvimento e a edição do código dessa tecnologia são feitos via Admin VTEX.
Apesar de ainda ser usado por algumas lojas, o CMS Portal Legado é uma tecnologia legada e não está mais disponível para lojas que estão iniciando com a VTEX.
As próximas seções são sobre as principais características e funcionalidades da FastStore e do Store Framework.
FastStore
FastStore é uma inovação em tecnologia de frente de loja para times de desenvolvimento criarem lojas com foco em performance e estabilidade, além de ser uma tecnologia de fácil manutenção, inclusive na edição de páginas do site da loja.
Esta tecnologia é um toolkit open-source baseado em React e na arquitetura Jamstack. Para obter mais informações, basta consultar o portal de documentação da FastStore.
Principais funcionalidades da FastStore
A tabela a seguir apresenta algumas das principais funcionalidades da FastStore:
| Funcionalidade | Descrição |
|---|---|
| Starter | Template funcional projetado para o desenvolvimento rápido da loja, e que já integra os componentes da FastStore UI. Inclui páginas como Home, páginas de lista de produtos (PLPs), páginas de detalhes do produto (PDPs) e também a funcionalidade minicart. |
| FastStore UI | Biblioteca de componentes para ecommerce que fornece recursos e estilo básico, tornando mais rápida a implementação e personalização de frentes de loja. |
| Tecnologia headless | Processo de customização que separa o código da loja desenvolvido pelo time de desenvolvimento do código base fornecido pela VTEX. Isso simplifica as atualizações do frontend da loja, permitindo atualizações sem impactar o código customizado. |
| Integração com o GitHub | Os times de desenvolvimento podem gerenciar todo o código da frente de loja utilizando o GitHub. |
| Headless CMS | Sistema de gerenciamento de conteúdo (CMS) que permite a edição e criação de novas páginas e a pré-visualização de mudanças no conteúdo. |
| Verificações automatizadas | Testes funcionais e a avaliação da performance da loja e da qualidade do código são executados continuamente de forma automatizada para detectar lentidão e bugs durante todo o estágio de desenvolvimento da frente de loja. |
| Integração com Intelligent Search | Funcionalidade de preenchimento automático na barra de pesquisa, juntamente com sugestões de pesquisa e produtos com base em preferências configuráveis. |
| Integrações com Checkout, Minha Conta e Login | Integração com outras etapas da jornada de compra dos clientes. Lojas VTEX previamente desenvolvidas com o Store Framework podem manter configurações relacionadas ao Checkout, Minha Conta e Login quando migradas para a FastStore, pois ambas se beneficiam da mesma infraestrutura. |
Store Framework
Store Framework é uma solução já estabelecida de tecnologia framework de implementação de frentes de loja low-code com foco no modelo composable commerce, ou seja, o framework possibilita a combinação de diferentes apps do VTEX IO para formar a frente de loja.
Nesta tecnologia, a implementação e o lançamento da loja são focados em componentes pré-construídos, também conhecidos como blocos, e na possibilidade de customização desses componentes, conforme a necessidade do modelo de negócio. Este framework é baseado em:
- React
- TypeScript
- Node.js
- GraphQL
Para obter mais informações, basta acessar o artigo What is VTEX Store Framework.
Ambiente de desenvolvimento
Ao falar de implementação de frontend, é preciso lembrar que o VTEX IO não é uma tecnologia de construção de frente de loja, mas sim uma plataforma de desenvolvimento. O Store Framework é uma tecnologia de construção de frente de loja que é executada pelo VTEX IO, que por sua vez é uma solução de desenvolvimento e execução em nuvem de aplicativos personalizados e frentes de loja.
Isso significa que ao trabalhar com VTEX IO, a pessoa desenvolve seu código localmente. Porém, quando se trata de implantar e executar a loja, o VTEX IO gerencia a infraestrutura, CI/CD e segurança, além de cuidar do processo de implantação. A imagem abaixo apresenta como estes conceitos se relacionam entre si:
Principais funcionalidades do Store Framework
A tabela a seguir apresenta algumas das principais funcionalidades do Store Framework:
| Funcionalidade | Descrição |
|---|---|
| Starter | Template funcional projetado para o desenvolvimento rápido da loja, e que já integra os componentes pré-construídos. |
| Componentes pré-construídos | Componentes nativos baseados em React. |
| Arquitetura modular | Personalização e reutilização do código de elementos da interface para lançar e replicar lojas rapidamente. |
| Workspaces e ambientes de testes | Permite criar diferentes versões da loja e testá-las previamente para realizar alterações com segurança. |
| Site Editor | Sistema de gerenciamento de conteúdo (CMS) para edição de templates e construção de novas páginas no site da loja. |
| Testes A/B nativos | Permite testar e validar qual a versão da loja com as maiores taxas de conversão. |
| Integração com Intelligent Search | Funcionalidade de preenchimento automático na barra de pesquisa, juntamente com sugestões de pesquisa e produtos com base em suas preferências. |
| Progressive Web App (PWA) | Permite experiências nativas semelhantes a aplicativos em qualquer dispositivo com tecnologia pronta para PWA. |
| Cross-border | Permite que uma loja multiloja VTEX opere em diferentes países com uma abordagem própria para cada um deles. |
| Integração com Checkout, Minha Conta e Login | Integração com outras etapas da jornada de compra do cliente. |
Escolhendo a tecnologia de frontend
Ao escolher entre Store Framework e FastStore, o time deve avaliar as necessidades específicas do projeto e considerar a experiência da equipe com ambas as tecnologias.
O Store Framework é uma opção mais madura, oferecendo uma estrutura flexível adequada para casos de uso complexos, bem como suporte para lojas que operam internacionalmente e com vários idiomas. Para lojas B2B, o Store Framework é uma ótima opção, uma vez que disponibiliza o B2B Suite, um aplicativo que permite o gerenciamento de organizações, permissões de frente de loja, e configurações de checkout para relacionamentos comerciais B2B.
A FastStore é uma alternativa em evolução mais recente focada na performance da loja. Esta solução oferece uma experiência de carregamento rápido, o que é essencial para manter os visitantes da loja engajados e reduzir as taxas de abandono de carrinho. Para casos de uso mais simples e com foco em performance, a FastStore pode ser a tecnologia mais recomendada.
A equipe de suporte da VTEX pode auxiliar no momento de escolher entre uma das tecnologias de storefront disponíveis.
A tabela abaixo compara as duas tecnologias de acordo com suas principais funcionalidades:
| Funcionalidade | Store Framework | FastStore |
| Starter (template inicial) | O Store Theme é o template inicial no qual o time pode usar de base para iniciar o projeto da loja ou iniciar do zero. | O Starter FastStore já é disponibilizado ao finalizar o Onboarding da FastStore. Isso permite que o time comece o projeto com um template base focado em performance. |
| Desempenho | Os recursos de SSR (Server Side Rendering) geram todo o HTML de uma página no servidor em resposta a uma solicitação de página, enquanto o SPA (Single Page Application) carrega elementos como o cabeçalho apenas uma vez que a página é carregada. | Possibilidade de máxima performance, já que utiliza a arquitetura Jamstack para criar as páginas do site da loja com antecedência, tornando a entrega do site mais rápida e eficiente em termos de recursos. |
| Tech Stack |
|
|
| Customizações de componentes | Flexível e de fácil personalização. | Permite a customização de componentes nativos e garante a performance da loja a partir de boas práticas. |
| Gerenciamento do código | Utiliza Workspaces e a arquitetura do VTEX IO para o versionamento, atualização e rollback dos componentes e aplicativos. | Utiliza o GitHub e o conceito de branches para a colaboração. Os usuários autorizados no repositório da frente de loja no GitHub podem visualizar e colaborar com o código. |
| Community and Support | ||
| Performance Monitoring and Analytics |
|
|
| Sistema de Gerenciamento de Conteúdo (CMS) | Compatível com o Site Editor. | Compatível com o Headless CMS. |
Etapas de desenvolvimento
Antes de lançar a loja em produção e do go-live, é importante listar as configurações e funcionalidades essenciais a serem incluídas na frente de loja. Essas definições auxiliam na definição do Mínimo Produto Viável (MVP) para a frente de loja. Por isso, os próximos tópicos indicam:
As recomendações a seguir são para configurações básicas de frente de loja. Dependendo da arquitetura escolhida para a operação da loja, outras configurações podem ser necessárias.
Desenvolvendo com a FastStore
O time de desenvolvimento deve iniciar um novo projeto com a FastStore através do processo de Onboarding. Ao final desse processo, o time estará com uma loja básica e funcional baseada no Starter da FastStore. Feito isso, os requisitos básicos da página já estarão implementados, são eles:
- Home
- Product Listing Page (PLP)
- Product Details Page (PDP)
- Minicart
Requisitos para um MVP da FastStore
São apresentados a seguir os requisitos para cada tema:
- Catálogo
- VTEX Intelligent Search
- Integração com Headless CMS
- Configurar o Headless CMS na conta
- Definir content types e seções que estarão disponíveis
- Criar e editar páginas usando o Headless CMS no Admin VTEX
- Página Home
- Editar os componentes e estilos já apresentados no Starter
- Página de Login
- Integrar com o VTEX Login
- Editar os componentes e estilos já apresentados no Starter
- Product Listing Page (PLP)
- Editar os componentes e estilos já apresentados no Starter
- Product Details Page (PDP)
- Editar os componentes e estilos já apresentados no Starter
- Minicart configuration
- Editar os componentes e estilos já apresentados no Starter
- Checkout
- Integrar com o VTEX Checkout
- Integrar com VTEX Order Placed e My Account
- Logística
- Payments
- Performance e SEO
- Aumentar o desempenho do site da loja usando ferramentas indicadas para tecnologia
- Métricas
- Configurar o módulo de Analytics
Desenvolvendo com o Store Framework
O time de desenvolvimento deve iniciar um novo projeto com o Store Framework clonando e linkando o Store Theme em um workspace de desenvolvimento. O Store Theme é um template funcional básico para iniciar a loja com componentes e páginas essenciais, tais como:
- Home
- Product Listing Page (PLP)
- Product Details Page (PDP)
Requisitos para um MVP do Store Framework
São apresentados a seguir os requisitos para cada tema:
- Catálogo
- VTEX Inteligent Search
- Página Home
- Editar os componentes e estilos já apresentados no Starter
- Página de Login
- Integrar com o VTEX Login
- Editar os componentes e estilos já apresentados no Starter
- Product Listing Page (PLP)
- Editar os componentes e estilos já apresentados no Starter
- Product Details Page (PDP)
- Editar os componentes e estilos já apresentados no Starter
- Minicart configuration
- Editar os componentes e estilos já apresentados no Starter
- Logística
- Pagamentos
- Performance
- Aumentar o desempenho do site da loja usando ferramentas de otimização de desempenho
- Métricas
- Configurar o Google Tag Manager