Automatización de componente dinámico mediante JavaScript
Desarrollé una solución en JavaScript para automatizar la carga de SKUs en un componente AEM, mejorando eficiencia y mantenibilidad.
El componente de tarjetas de productos requería asociar manualmente una lista de SKUs para mostrar el contenido correcto. Este proceso era repetitivo, propenso a errores y dificultaba el mantenimiento cuando era necesario actualizar o reemplazar productos.
Automatizar la asignación de SKUs al componente de productos mediante JavaScript, simplificando la configuración, reduciendo errores manuales y facilitando futuras actualizaciones.
Analicé el funcionamiento del componente, identifiqué el punto adecuado para intervenir mediante JavaScript y desarrollé una solución que permitiera inyectar dinámicamente la lista de SKUs respetando la estructura existente de Adobe Experience Manager.
Revisar la estructura HTML generada por el componente, identifiqué el contenedor donde era posible incorporar la información requerida sin modificar el código fuente del componente.
Implementar un script que espera la carga del documento, localiza el panel correspondiente y asigna automáticamente la lista de SKUs utilizando atributos data-*, manteniendo la solución desacoplada y fácil de mantener.
Se optó por una solución basada en JavaScript Vanilla para evitar dependencias externas y minimizar el impacto sobre la arquitectura existente. La utilización del atributo data-skulist permitió integrar la información de forma limpia y reutilizable, sin alterar el comportamiento interno del componente ni requerir cambios en AEM.
Este proyecto reforzó la importancia de desarrollar soluciones desacopladas que aprovechen las capacidades del DOM y de JavaScript para extender componentes existentes sin intervenir su código base. También demostró cómo pequeñas automatizaciones pueden mejorar significativamente la eficiencia operativa y el mantenimiento de un proyecto.