Quebrando barreiras do checkout VTEX com ReactJS

A VTEX é uma plataforma de e-commerce SaaS (Software as a Service) que oferece diversos benefícios para lojistas que buscam expandir seu negócio para o universo virtual.

Com a alta busca por soluções diferenciadas para cada cliente, tornou-se imprescindível a implementação de customizações de front-end complexas dentro dos e-commerce.

Nos últimos anos, a VTEX cresceu consideravelmente e implementou diversos recursos novos, possibilitando atender às expectativas do mercado. Para customizações dentro do checkout, a VTEX disponibiliza o Checkout UI Custom que pode ser facilmente habilitado na loja e posteriormente implementado e complementado por desenvolvedores front-end.  No entanto, essa ferramenta ainda possui dificuldades para acompanhar algumas exigências mais específicas dos consumidores.

Durante a consultoria para um cliente do segmento de Grocery, três desenvolvedores full stack do time da Corebiz (Enzo Spagnolli, Gabriel Nobrega e Gustavo Amemiya) criaram um recurso muito interessante dentro do checkout VTEX, chamado de Super Checkout, para facilitar o dia a dia de quem atua com a plataforma.

Neste artigo, vamos falar sobre essa solução, apresentar seus benefícios, obstáculos e o que ainda está no horizonte dessa nova tecnologia. Continue a leitura para saber mais sobre.

O maior problema do atual checkout VTEX

Do ponto de vista de ambos, lojistas e desenvolvedores front-end, o maior problema é a dificuldade em progredir com customizações mais profundas. O que pode impactar as taxas de conversão da loja e eficiência no trabalho dos colaboradores, respectivamente.

O Checkout UI Custom é composto por apenas um arquivo JS e um CSS, ou seja, o desenvolvedor fica limitado a utilizar apenas javascript puro e JQuery para buscar satisfazer as carências dos clientes, ao invés de poder desenvolver com tecnologias mais populares e ricas como react, angular, vue, dentre outras.

Além disso, com o tempo esses dois arquivos JS e CSS começam a crescer, dessa forma em algum momento vão acabar se tornando algo pouco organizado e de difícil manutenção.

Super Checkout e seus benefícios

É neste momento que entra o Super Checkout, uma aplicação que oferece diversos benefícios, tais como:

• Suporte a ReactJS e suas tecnologias (componentes, hooks, context api, etc);
• Suporte a Typescript;
• Suporte a SCSS;
• Suporte para código legado (customizações já implementadas continuarão funcionando sem problemas);
• Implementação facilitada de imagens SVG;
• Hash de integridade de arquivos (para comparação de versões do checkout);
• Melhor organização de arquivos.

O Super Checkout utiliza webpack para compilar todas as customizações nos arquivos do Checkout UI Custom da VTEX (originalmente um arquivo JS e um CSS).

Em poucas palavras, desenvolvedores que já tiveram contato com stacks que incluem ReactJS vão “se sentir em casa”. Todo componente é separado do arquivo original e cada um deles possui seu arquivo TSX e SCSS, proporcionando um nível organizacional de arquivos superior.

Fora todos esses recursos, também é possível instalar e usar qualquer biblioteca de terceiros como Swiper e React Bootstrap.

Soluções criadas com Super Checkout

Em nosso cliente do segmento de Grocery, foi possível criar customizações complexas com muita eficiência (em apenas alguns dias e ocupando um só desenvolvedor) graças ao Super Checkout. Como por exemplo, a vitrine de cross-selling abaixo:

É uma vitrine de níveis de interação complexos e com diversas regras de negócio por trás das câmeras que aumentou consideravelmente a taxa de conversão da loja ao abrir um leque de discovery de novos produtos aos clientes.

Outra customização de grande impacto implementada para o mesmo cliente foi o novo layout dos slots de entrega.

À esquerda está o componente nativo da VTEX e à direita o novo. O nativo exige dois cliques para selecionar a data de entrega ou retirada de produtos, enquanto o segundo, além de exigir apenas um clique, também é mais claro na disposição de informações, como preço do frete e horários de entrega. Essa última customização é ainda mais complexa, pois alterou o comportamento de um recurso já existente no checkout.

Quais obstáculos ainda existem

Mesmo com toda essa transformação, ainda estamos dentro do escopo da VTEX. Em outras palavras, alguns problemas ainda vão existir porque tudo é feito a partir da manipulação da interface já existente do checkout da plataforma.

Como Super Checkout ainda não é uma tecnologia Headless, não seria possível, por exemplo, desativar recursos que já estão implementados. Caso a customização seja alterar o comportamento de algo já existente será necessário fazer um workaround, exigindo uma curva de aprendizado maior do que esperado.

Por fim, o Super Checkout inclui diversas tecnologias em um só pacote. Dessa forma, um fator que vai precisar de mais atenção é o bundle size quando compilado.

O futuro do Super Checkout

O céu é o limite! O Super Checkout é um projeto de código aberto, documentado e pode ser utilizado e aprimorado por todos os desenvolvedores no mundo. Qualquer um pode contribuir!

Além disso, o Super Checkout do cliente que utilizamos como referência nesse artigo, possui recursos adicionais como testes automatizados, chamadas de renderização facilitadas, uma biblioteca de utilidades e funções helpers, dentre outros que ainda não estão presentes na versão publicada, mas que posteriormente poderão ser adicionadas.

Convidamos todos os desenvolvedores VTEX a visitarem a página no github e a experimentarem esse novo recurso, se possível reportando eventuais problemas e sugerindo novas features. Assim, esperamos que o projeto siga sendo atualizado e melhorado com o tempo. 

Guilherme Arantes, Desenvolvedor Front-end aqui do time Corebiz, utilizou o repositório recentemente no projeto em que atua, e contou um pouco sobre a sua experiência. Confira!

“Bom, quem está acostumado com o checkout do Legado sabe a dificuldade que é fazer alterações e implementações dentro desse ambiente, principalmente por questões de segurança. Esse boilerplate de vtex-react-checkout nos dá a possibilidade de fazer implementações via React sem prejudicar os scripts do Legado e mantendo o nível de segurança. Além disso, por ser possível utilizar hooks e context do React facilitou na hora de compartilhar informações entre loja-checkout e alterar estados que compunham o checkout, sem contar que conseguimos fazer implementações que agregam mais valor ao ambiente. Então, no geral, eu acho que esse boilerplate ajudou bastante em questão de flexibilidade e vai ajudar ainda mais principalmente na questão regra de negócios de clientes”.

Guilherme Arantes Canella – Desenvolvedor Front-end na Corebiz

Espero que este conteúdo tenha sido útil para o seu dia a dia como desenvolvedor VTEX. Caso queira acompanhar os novos conteúdos técnicos que surgirão por aqui, não deixe de assinar a nossa newsletter.