AO·dev

Daniela Tombini

E-commerce de moda íntima e fitness em VTEX Legacy, de uma fabricante catarinense com mais de 30 anos — hero em vídeo, página de produto redesenhada e tracking via GTM.

Empresa

Avanti

Período

2022 – 2023

Papel

Frontend Developer, VTEX Specialist

A Daniela Tombini nasceu em Caçador, Santa Catarina, em dezembro de 1993 — a fundadora ganhou um chinelo de presente e começou a fabricar chinelos artesanais em casa. Em 1996 a empresa virou a primeira do Brasil a fabricar chinelo lavável com sola antiderrapante, o que abriu caminho pra robes, depois pijamas, depois toda a linha de moda íntima, praia e fitness que a marca tem hoje. Hoje são seis lojas físicas entre Santa Catarina e Paraná e 153 colaboradores (RAIS 2024) — uma fábrica de verdade por trás da loja, não um revendedor.

Home da Daniela Tombini, com hero em vídeo e categorias em destaque
Home da Daniela Tombini, com hero em vídeo e categorias em destaque

Na Avanti, essa foi uma das lojas VTEX que passaram pela minha mão — mexi em banner de home, listagem de categoria, página de produto e no checkout customizado via GTM.

Por baixo do capô

CamadaTecnologia
E-commerceVTEX (Legacy), sem Store Framework
TemplatesDust.js, renderizado no servidor
JavaScriptjQuery, JavaScript Vanilla
Galeria/lightboxprettyPhoto
Analytics/TagsGoogle Tag Manager

Nada de React ou Store Framework — o Portal legado do VTEX renderiza tudo no servidor via template Dust.js, e o resto é jQuery e JavaScript puro em cima. Ajustar o checkout dessa geração de VTEX não tem edição direta: era entrar no Gerenciador de Tags, colar CSS customizado e testar em produção com cuidado redobrado — não tinha ambiente de staging fiel, e checkout é a última coisa que se quer quebrar numa loja com tráfego real.

Duas marcas, um catálogo só

Debaixo do mesmo domínio convivem duas marcas: "Daniela Tombini" pra lingerie, pijama e moda praia, e "VIVAME" pra fitness — legging, top, short, conjunto térmico. Hoje a loja tem mais de 1400 produtos ativos, com faceta por categoria, cor e tamanho.

Categoria feminina com filtros de cor, tamanho e categoria
Categoria feminina com filtros de cor, tamanho e categoria

A ideia do vídeo na LP

Toda referência de marca de moda que eu olhava na época tinha a mesma coisa: vídeo na hero, não banner estático. Propus isso pro time e aprovaram. O <video> precisava de muted e playsinline pra rodar sozinho no iOS, carregar assíncrono pra não travar o LCP, e ter fallback pra conexão ruim — tudo isso sem bundler, só HTML/CSS/JS direto no template.

A página de produto

Meu PO na época queria mudar a página de produto e passou uma loja de referência pra dar ideia de direção — não tinha design pronto. O layout que ficou foi um grid de duas colunas com as imagens do produto inteiras, sem o padrão de thumbnail pequena + imagem grande. Clique abria a galeria com zoom. Também montei uma regra pra quando o produto tivesse vídeo: ele entrava na segunda posição do grid e tocava sozinho, sem controles visíveis. Tudo em document.createElement e getElementById, buscando os dados via VTEX.

Tentei achar hoje um produto com vídeo pra confirmar que o comportamento ainda existe, mas não encontrei nenhum entre os mais de mil produtos do catálogo atual — pode ter saído do catálogo, ou eu só não tive sorte procurando. O grid de duas colunas, esse eu ainda vejo.

Página de produto com o grid de imagens em duas colunas
Página de produto com o grid de imagens em duas colunas

Institucional

Página Quem Somos, contando a origem da marca em Caçador
Página Quem Somos, contando a origem da marca em Caçador

A história da marca contada em detalhe, junto com as lojas físicas, vaga de trabalhe conosco e — desde 2023, por exigência legal — um relatório público de equidade salarial entre homens e mulheres.

Foi um dos projetos da Avanti que mais me ensinou a resolver problema de interface sem depender de framework nenhum — só JavaScript puro, atenção a detalhe e vontade de fazer bonito.