Magento PageBuilder ofrece un slider nativo que, 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.
Recibirás los datos de acceso al repositorio de Composer (la dirección de correo electrónico del cliente y el token de licencia) por correo electrónico tras la compra. También están disponibles en el panel de cliente tras iniciar sesión en kowal.store. Sustituye TWOJ_EMAIL_KLIENTA por la dirección de correo electrónico de tu cuenta y TWOJ_TOKEN por el token recibido. Ejecuta los comandos en el directorio raíz de Magento.
composer config repositories.kowal composer https://repo.kowal.storecomposer config http-basic.repo.kowal.store 'TWOJ_EMAIL_KLIENTA' 'TWOJ_TOKEN'composer require kowal/module-pagebuildersliderfixDespués de instalar el paquete, actualiza Magento y limpia la caché:
php bin/magento setup:upgradephp bin/magento cache:flushEn el entorno de producción, ejecuta también la compilación de DI y el despliegue de archivos estáticos de acuerdo con el proceso de despliegue de la tienda.
Proyecto: toursport.pl
Tecnología: Magento 2 + PageBuilder
Problema: El slider de la página de inicio perdía sus proporciones en móvil: aparecían márgenes vacíos por encima y por debajo de la imagen, y la altura se forzaba artificialmente independientemente del tamaño de la pantalla.
El equipo de Toursport utilizaba el slider nativo de PageBuilder debido a:
la edición sencilla del contenido,
la posibilidad de configurar imágenes independientes para desktop / móvil,
la buena integración con la caché y el rendimiento.
Al mismo tiempo, el comportamiento estándar de PageBuilder provocaba:
un aspecto poco estético del slider en smartphones,
que no se mantuvieran las proporciones de la imagen,
problemas al cambiar de resolución.
Se aplicó Kowal PageBuilder Slider Fix, que:
eliminó el min-height fijo,
permitió que el slider ajustara su altura a las proporciones reales de la imagen,
mantuvo el ancho completo de la pantalla,
gestionó correctamente las imágenes móviles.
✔ adaptación responsive perfecta en todos los dispositivos,
✔ sin márgenes vacíos en móvil,
✔ PageBuilder nativo conservado sin sliders adicionales,
✔ mejor percepción visual de la página de inicio.
El módulo se implementó sin afectar al rendimiento y sin necesidad de modificar el contenido en PageBuilder.
