Kowal PageBuilder Slider Fix – slider responsive sin compromisos

MAGENTO 2 · PAGEBUILDER · SLIDER · LUMA Y HYVÄ

Kowal PageBuilder Slider Fix

Mantén el slider nativo de PageBuilder y mejora sus proporciones y la selección de imágenes para escritorio y móvil. Utiliza la versión estándar para Luma o el adaptador Hyvä incluido en el paquete.

Proporciones de imagen · Imágenes para escritorio/móvil · Breakpoint configurable

CÓMO FUNCIONA EN LA PRÁCTICA

Magento PageBuilder ofrece un slider nativoque, en principio, es una solución excelente:

• no requiere bibliotecas externas,

• está totalmente integrado con el editor de contenidos,

• admite imágenes separadas para desktop y mobile,

• funciona correctamente con cache, Varnish y PageBuilder Preview.

Y precisamente por eso merece la pena utilizarlo.

Por desgracia, en la práctica muchas tiendas Magento se encuentran con los mismos problemas, especialmente en layouts modernos y responsive.

En la configuración estándar de PageBuilder:

• la altura del slider se fuerza de forma rígida (min-height),

• las proporciones de la imagen no se basan en las dimensiones reales del gráfico,

• en mobile aparecen márgenes vacíos por encima y por debajo del slider,

• el slider no siempre reacciona correctamente al cambio de breakpoints,

• el CSS y el JS de PageBuilder imponen comportamientos difíciles de sobrescribir sin intervenir en el core.

¿El resultado?

El slider a menudo solo se ve bien en una pantalla –
y en otras resoluciones pierde sus proporciones o su estética.

Kowal PageBuilder Slider Fix resuelve estos problemas sin desactivar PageBuilder y sin intervenir en el core de Magento.

El módulo:

• elimina el forzado rígido de la altura (min-height) por parte de PageBuilder,

• permite que el slider ajuste dinámicamente su altura a la imagen,

• mantiene el ancho completo (100% viewport width),

• gestiona correctamente imágenes separadas para desktop y mobile,

• funciona solo donde el slider realmente existe.

• utiliza text/x-magento-init – el mecanismo nativo de Magento,

• no carga JS global en cada página,

• funciona por cada slider, no de forma global,

• trabaja con el mecanismo data-background-images de PageBuilder,

• es compatible con PageBuilder Preview y con el editor CMS.

Esto significa:

✔ sin conflictos
✔ sin problemas de cache
✔ sin impacto en el rendimiento de la tienda

Este módulo es ideal si:

• utiliza PageBuilder Slider o Banner Slider,

• le importa una responsividad perfecta,

• quiere conservar las soluciones nativas de Magento,

• no quiere instalar sliders externos pesados,

• le importa la estética en mobile, sin márgenes vacíos.

Los sliders externos:

• a menudo cargan grandes bibliotecas JS,

• no trabajan de forma ideal con PageBuilder,

• pueden resultar problemáticos con cache / Varnish,

• dificultan la edición de contenidos a usuarios no técnicos.

Nuestro módulo corrige exactamente lo necesario, y nada más.

Kowal PageBuilder Slider Fix:

• conserva las ventajas del slider nativo de Magento,

• elimina sus principales inconvenientes,

• funciona de forma estable en desktop y mobile,

• es ligero, rápido y seguro,

• está listo para usarse en tiendas en producción.

Si utiliza PageBuilder, este módulo debería ser su complemento natural.

Stores → Configuration → Kowal → PageBuilder Slider Fix ofrece Desktop Width / Height, Mobile Width / Height y Mobile Breakpoint. Los valores predeterminados son 1920 × 800, 768 × 976 y 768 px. El umbral móvil también incluye una pantalla de exactamente 768 px de ancho.

En Luma, el script de altura utiliza las dimensiones naturales de la imagen de fondo; el adaptador Hyvä utiliza las proporciones configuradas para la geometría de la diapositiva. El cambio de imagen responde a resize y orientationchange. Si falta una imagen móvil, se utiliza la de escritorio.

Para Hyvä, activa también Kowal_PageBuilderSliderFixHyva y en la vista de tienda correspondiente establece Hyva Compatibility → Enable Hyva Slider Fix en Yes. El adaptador está desactivado por defecto. No lo instales por separado junto al paquete principal.

El adaptador admite los campos de imágenes WebP de Hyvä y la opción de carga diferida del fondo. El tema nativo se encarga de la navegación y reproducción del carrusel. El markup personalizado del slider debe mantener los elementos y atributos de PageBuilder necesarios.

En Luma, la inicialización utiliza text/x-magento-init y el selector .pagebuilder-slider, sin una biblioteca adicional de carrusel. La plantilla de inicialización se añade al layout predeterminado; la gestión de imágenes afecta a los elementos del slider presentes en la página.

Comprueba las proporciones, el CSS del tema, los breakpoints, la vista previa de PageBuilder y el funcionamiento con caché y Varnish en tu tienda. Los resultados afectan a la presentación de banners; la ausencia de conflictos y el impacto nulo en el rendimiento no son una garantía universal.

Paquete kowal/module-pagebuildersliderfix, módulo Kowal_PageBuilderSliderFix. Tras configurar el acceso al repositorio de Kowal, instala el paquete, activa el módulo, actualiza Magento y limpia la caché. En producción, ten en cuenta la compilación y el despliegue de contenido estático de acuerdo con el proceso de la tienda.

1. Preparas las imágenes
Añades las imágenes de escritorio y móvil en PageBuilder.

2. Seleccionas los ajustes
Configuras las proporciones y el umbral de la versión móvil.

3. El slider adapta la presentación
El mecanismo cambia la imagen y la geometría según la pantalla.

Preparas una imagen ancha para escritorio y una variante vertical independiente para móvil. Al cambiar el ancho de la pantalla, el módulo selecciona la imagen correspondiente.

Si falta la versión móvil, se utiliza la imagen de escritorio. El desplazamiento y la reproducción de diapositivas siguen siendo responsabilidad del slider nativo.