Case técnico – Vitrines flexíveis: Moldura Minuto

Sobre o cliente

A Moldura Minuto é a maior rede de franquia de emolduramento de luxo do país e líder no segmento, além de ser uma galeria com foco na valorização da arte brasileira. Com mais de 20 anos de história, a empresa está presente em praticamente todo o território nacional, com mais de 50 lojas pelo Brasil. Os serviços da Moldura Minuto abrangem todas as etapas, incluindo moldura, impressão, acervo exclusivo de arte e fotografia, consultoria especializada e serviço de instalação profissional. 

Objetivo

1 – Criar uma vitrine dinâmica e adaptável para que as artes se encaixassem de acordo com o carregamento de forma dinâmica
2 – Criar uma vitrine horizontal simulando os ambientes para aplicar cada produto apenas no scroll do mouse

Desafio técnico

Apenas com os componentes da VTEX não era possível fazer realizar esse objetivo. Com isso, foi necessária a criação de um novo formato de componente customizado para adequar estas funcionalidades.

A solução e resultado final

O projeto foi iniciado em 03 de março de 2021. A partir daí, nossa equipe criou vitrines flexíveis que se encaixam a um grid dinamicamente, tanto na home como nas categorias. Para que essa funcionalidade fosse possível, tivemos que criar de forma customizada interagindo com os contextos disponibilizadas pela VTEX e, assim, foi possível criar esse grid diferenciado de produtos.

Além dessa customização que diferencia totalmente as vitrines padrões da VTEX, criamos uma visualização horizontal que possibilita que o usuário navegue usando o scroll horizontal, simulando o produto em ambientes que podem ser alterados, como ambiente da sala, quarto, entre outros. Dessa forma, foi possível entregar a solução dentro do prazo, finalizando o projeto completo em 01 de junho de 2021.

Para solucionar os desafios visuais, uma linha mais clean e que destaca as artes foi utilizada. A equipe sugeriu o desenvolvimento de uma vitrine diferenciada para destacar as possibilidades de visualização.

Na categoria do produto, o usuário pode escolher o modo gride padrão, listados em forma de mosaico ou horizontal. Na segunda opção, os produtos são paginados e aplicados em um cenário de parede, facilitando a visualização da arte aplicada em um ambiente real.

Para isso, foi necessário estudar uma forma de como customizar a listagem dos produtos. A partir disso, o desenvolvimento foi feito de forma completamente dinâmica, calculando o tamanho, largura x altura para dimensionar o tamanho do mosaico e a quantidade de colunas necessária para a visualização mosaico.

A ideia para solucionar as questões de visualização foi inspirada no formato utilizado pelo Pinterest. Já na opção de visualização na horizontal, a saída foi possibilitar que o usuário visualizasse a aplicação em diferentes ambientes e cenários.

A organização dos dados gerados também foi muito bem pensada pela equipe. Pois, com todas essas possibilidade de customização, foi necessário entender como armazenar as seleções feitas pelo cliente para finalizar a compra e cruzar com as regras de negócio da empresa e, assim, enviar as informações corretas para a equipe da Moldura Minuto preparar o produto exatamente como foi selecionado no site e enviar para o cliente.

Para a construção dos cenários para a aplicação das obras, foi necessário desconstruir tudo o que a VTEX IO tem disponível como padrão e, só assim, construir os novos cenários utilizados. 

Resultado: remodulamos toda a forma de capturar dados e levar para o front end para simular o quadro automaticamente em alguns ambientes.

[cta text=”Clique aqui e fale com a nossa equipe especializada em tecnologia!” link=”https://admin.wedigi.com.br/#wdt-contact” target=”_self” background=”#3498db” color=”#ffffff”]