Estudo de caso de arquitetura
Substituindo um visualizador de imagens de US$ 75 mil por recursos nativos da plataforma
Pesquisa e prova de uma arquitetura sustentável para mídia na PDP, preservando miniaturas, vídeo, mídia animada, visualização 360 graus e entrega responsiva sem adicionar outra biblioteca cliente.
Fluxo de mídia proposto
O problema
A galeria da PDP delegava todo o DOM, transformações, conjuntos 360 graus, injeção de vídeo e comportamento responsivo a um SDK de terceiros. Como o pacote era uma caixa-preta, alterações comuns já exigiam monkey-patching e sobrescritas de configuração.
Além do custo de manutenção, a integração representava aproximadamente US$ 75 mil por ano. A questão era comprovar se recursos nativos do Salesforce B2C Commerce poderiam substituí-la sem regressão na experiência.
Pesquisa e restrições
Decompus o visualizador em capacidades explícitas: múltiplas miniaturas, imagens grandes sincronizadas, GIFs animados, slides de vídeo, frames 360 graus e transformação responsiva. Cada item foi avaliado contra modelos SFRA, view types do Business Manager, WebDAV e Dynamic Imaging Service.
O escopo era SFRA, mas os dados não poderiam depender de um DOM específico. Arrays e metadados precisavam continuar consumíveis por uma futura PWA. A migração em massa de ativos foi separada da decisão arquitetural.
Decisão de arquitetura
Imagens padrão vêm do modelo de produto SFCC e de view types configurados. Um utilitário gera srcset por breakpoint usando parâmetros de largura e negociação automática de formato. GIFs ignoram transformações para preservar a animação.
A galeria reutiliza Slick, já presente no projeto, com sliders principal e de miniaturas sincronizados. Vídeo se torna um tipo de mídia de primeira classe, configurado por atributos e carregado sob demanda.
Para 360 graus, o servidor monta um array ordenado por atributos de produto ou um view type dedicado. Um módulo cliente usa pointer events nativos para drag-to-spin e lazy loading. O mesmo array pode ser consumido por SFRA ou PWA.
Rollout seguro
As galerias antiga e nova coexistem por meio de uma flag de produto. Assim, migração de conteúdo e validação acontecem gradualmente, sem unir remoção de cartridge, migração de ativos e release em uma única mudança de alto risco.
Somente após atingir paridade seriam removidos o cartridge externo, preferências e atributos obsoletos. Isso preserva rollback e separa o cronograma técnico do trabalho do time de conteúdo.
Trade-offs e casos extremos
A pesquisa revelou detalhes que desaparecem em uma simples troca de carousel: formatos animados não podem passar por conversão automática, frames precisam de ordenação, vídeo exige ownership de conteúdo e view types possuem limites práticos.
Dynamic Imaging cobriu responsividade e formatos modernos. Focal-point cropping permaneceu como capacidade a validar com parâmetros explícitos. O styling ficou fora da POC porque o template nativo oferece controle total depois da aprovação da arquitetura.
Impacto de engenharia
A prova de conceito demonstrou a saída de uma caixa-preta cara e frágil para código que a equipe pode inspecionar, testar, estilizar e evoluir. A solução reutiliza plataforma e biblioteca existentes, não adiciona dependência, preserva o caminho para PWA e torna o comportamento de mídia explícito no modelo de produto.