Caso de arquitectura
Reemplazando un visor de imágenes de US$ 75 mil con capacidades nativas
Investigación y prueba de una arquitectura mantenible para medios en PDP, conservando miniaturas, video, medios animados, vistas 360 y entrega responsiva sin añadir otra biblioteca cliente.
Flujo de medios propuesto
El problema
La galería PDP delegaba todo su DOM, transformaciones, conjuntos 360, inyección de video y comportamiento responsivo a un SDK de terceros. Al ser una caja negra, cambios comunes ya requerían monkey-patching y sobrescrituras.
Además del coste de mantenimiento, la integración representaba aproximadamente US$ 75 mil al año. La pregunta era si las capacidades nativas de Salesforce B2C Commerce podían reemplazarla sin regresiones.
Investigación y restricciones
Descompuse el visor en capacidades explícitas: múltiples miniaturas, imágenes sincronizadas, GIFs animados, video, frames 360 y transformación responsiva. Cada capacidad se evaluó contra modelos SFRA, view types, WebDAV y Dynamic Imaging Service.
El alcance era SFRA, pero los datos no podían depender de un DOM específico. Los arrays y metadatos debían seguir siendo consumibles por una futura PWA. La migración masiva de activos se separó de la decisión arquitectónica.
Decisión de arquitectura
Las imágenes estándar provienen del modelo de producto y view types de SFCC. Un utilitario genera srcset por breakpoint con parámetros de ancho y negociación de formato. Los GIFs omiten transformaciones para preservar la animación.
La galería reutiliza Slick, ya presente, con sliders principal y de miniaturas sincronizados. El video se modela como medio de primera clase y se carga bajo demanda.
Para vistas 360, el servidor crea un array ordenado desde atributos o un view type dedicado. Un módulo usa pointer events nativos para drag-to-spin y lazy loading. El mismo array sirve para SFRA o PWA.
Despliegue seguro
Las galerías antigua y nueva coexisten detrás de una flag de producto. Así, migración y validación ocurren gradualmente sin unir cartridge, activos y release en un solo cambio de alto riesgo.
Solo después de alcanzar paridad se retirarían el cartridge externo, preferencias y atributos obsoletos, preservando rollback y separando tiempos técnicos y de contenido.
Decisiones y casos límite
La investigación reveló detalles que una simple reescritura oculta: formatos animados no pueden pasar por conversión automática, los frames requieren orden, el video necesita ownership y los view types tienen límites prácticos.
Dynamic Imaging cubrió responsive y formatos modernos. El recorte por punto focal quedó como capacidad a validar con parámetros explícitos. El styling quedó fuera de la POC porque el template nativo permite control total después de aprobar la arquitectura.
Impacto de ingeniería
La prueba demostró un camino desde una caja negra costosa y frágil hacia código inspeccionable, testeable y evolutivo. Reutiliza plataforma y biblioteca existentes, no añade dependencias, conserva el camino PWA y hace explícito el comportamiento en el modelo de producto.