Kowal PageBuilder Slider Fix – slider responsive sans compromis

MAGENTO 2 · PAGEBUILDER · SLIDER · LUMA ET HYVÄ

Kowal PageBuilder Slider Fix

Conservez le slider natif de PageBuilder et améliorez ses proportions ainsi que le choix des visuels desktop/mobile. Utilisez la version standard pour Luma ou l’adaptateur Hyvä inclus dans le package.

Proportions de l’image · Visuels desktop/mobile · Breakpoint configurable

FONCTIONNEMENT EN PRATIQUE

Magento PageBuilder propose un slider natif qui, par conception, constitue une excellente solution :

• il ne nécessite pas de bibliothèques externes,

• il est entièrement intégré à l’éditeur de contenu,

• il prend en charge des images distinctes pour desktop et mobile,

• il fonctionne correctement avec le cache, Varnish et PageBuilder Preview.

C’est précisément pourquoi il vaut la peine de l’utiliser.

Malheureusement, en pratique, de nombreuses boutiques Magento rencontrent les mêmes problèmes, en particulier avec les layouts modernes et responsives.

Dans la configuration standard de PageBuilder :

• la hauteur du slider est imposée de manière rigide (min-height),

• les proportions de l’image ne découlent pas des dimensions réelles du visuel,

• sur mobile, des marges vides apparaissent au-dessus et au-dessous du slider,

• le slider ne réagit pas toujours correctement aux changements de breakpoints,

• le CSS et le JS de PageBuilder imposent des comportements difficiles à surcharger sans intervenir dans le core.

Le résultat ?

Le slider paraît souvent correct sur un seul écran –
mais sur d’autres résolutions, il perd ses proportions ou son esthétique.

Kowal PageBuilder Slider Fix résout ces problèmes sans désactiver PageBuilder et sans intervenir dans le core Magento.

Le module :

• supprime l’imposition rigide de la hauteur (min-height) par PageBuilder,

• permet au slider d’adapter dynamiquement sa hauteur à l’image,

• prend en charge l’affichage en pleine largeur (100% viewport width),

• gère correctement les images distinctes pour desktop et mobile,

• fonctionne uniquement là où le slider existe réellement.

• il utilise text/x-magento-init – le mécanisme natif de Magento,

• il initialise le comportement via le sélecteur du slider,

• il fonctionne par slider, et non globalement,

• il coopère avec le mécanisme data-background-images de PageBuilder,

• il est compatible avec PageBuilder Preview et l’éditeur CMS.

Cela signifie :

✔ limitation du besoin de bibliothèques supplémentaires ; compatibilité à vérifier
✔ fonctionnement avec le cache à vérifier dans la boutique
✔ périmètre limité à la gestion de l’affichage des sliders

Ce module est idéal si :

• vous utilisez PageBuilder Slider ou Banner Slider,

• vous recherchez une responsivité parfaite,

• vous souhaitez conserver les solutions natives de Magento,

• vous ne voulez pas installer de sliders externes lourds,

• vous tenez à l’esthétique sur mobile, sans marges vides.

Les sliders externes :

• chargent souvent de grosses bibliothèques JS,

• ne coopèrent pas parfaitement avec PageBuilder,

• peuvent poser problème avec le cache / Varnish,

• compliquent l’édition de contenu pour les personnes non techniques.

Notre module corrige ce qui doit l’être – et rien de plus.

Kowal PageBuilder Slider Fix :

• conserve les avantages du slider natif Magento,

• élimine ses principales faiblesses,

• améliore l’affichage sur desktop et mobile,

• est léger, rapide et sûr,

• est destiné à être déployé après vérification du thème et de la configuration.

Si vous utilisez PageBuilder – ce module devrait en être le complément naturel.

Stores → Configuration → Kowal → PageBuilder Slider Fix met à disposition Desktop Width / Height, Mobile Width / Height ainsi que Mobile Breakpoint. Les valeurs par défaut sont 1920 × 800, 768 × 976 et 768 px. Le seuil mobile inclut également un écran d’une largeur exacte de 768 px.

Dans Luma, le script de hauteur utilise les dimensions naturelles de l’image d’arrière-plan ; l’adaptateur Hyvä utilise les proportions configurées pour la géométrie de la slide. Le changement d’image réagit à resize et orientationchange. En l’absence de visuel mobile, le visuel desktop est utilisé.

Pour Hyvä, activez également Kowal_PageBuilderSliderFixHyva et, dans la store view concernée, réglez Hyva Compatibility → Enable Hyva Slider Fix sur Yes. Le commutateur de l’adaptateur est désactivé par défaut. Ne l’installez pas séparément à côté du package principal.

L’adaptateur prend en charge les champs d’images WebP Hyvä et le flag lazy loading de l’arrière-plan. Le thème natif est responsable de la navigation et de la lecture du carrousel. Le markup personnalisé du slider doit conserver les éléments et attributs PageBuilder requis.

Dans Luma, l’initialisation utilise text/x-magento-init et le sélecteur .pagebuilder-slider, sans bibliothèque de carrousel supplémentaire. Le template d’initialisation est ajouté dans le layout par défaut ; le travail avec les visuels concerne les éléments de slider présents sur la page.

Vérifiez les proportions, le CSS du thème, les breakpoints, l’aperçu PageBuilder ainsi que le fonctionnement avec le cache et Varnish dans votre boutique. Les effets concernent la manière d’afficher les bannières ; l’absence de conflits et un impact nul sur les performances ne constituent pas une garantie universelle.

Package kowal/module-pagebuildersliderfix, module Kowal_PageBuilderSliderFix. Après avoir configuré l’accès au dépôt Kowal, installez le package, activez le module, mettez Magento à jour et videz le cache. En production, incluez la compilation et le déploiement du contenu statique conformément au processus de la boutique.

1. Vous préparez les visuels
Vous ajoutez les images desktop et mobile dans PageBuilder.

2. Vous choisissez les paramètres
Vous configurez les proportions et le seuil de la version mobile.

3. Le slider adapte l’affichage
Le mécanisme change l’image et la géométrie en fonction de l’écran.

Pour desktop, vous préparez un visuel large, et pour mobile une variante verticale distincte. Lorsque la largeur de l’écran change, le module sélectionne l’image appropriée.

Lorsque la version mobile est absente, le visuel desktop est utilisé. Le défilement et la lecture des slides restent assurés par le slider natif.