Kowal PageBuilder Slider Fix – responsiver Slider ohne Kompromisse

MAGENTO 2 · PAGEBUILDER · SLIDER · LUMA UND HYVÄ

Kowal PageBuilder Slider Fix

Behalten Sie den nativen PageBuilder-Slider bei und optimieren Sie seine Proportionen sowie die Auswahl von Desktop- und Mobile-Grafiken. Nutzen Sie die Standardversion für Luma oder den im Paket enthaltenen Hyvä-Adapter.

Bildproportionen · Desktop-/Mobile-Grafiken · Konfigurierbarer Breakpoint

SO FUNKTIONIERT ES IN DER PRAXIS

Magento PageBuilder bietet einen nativen Slider, der grundsätzlich eine hervorragende Lösung ist:

• er benötigt keine externen Bibliotheken,

• er ist vollständig in den Content-Editor integriert,

• er unterstützt separate Bilder für Desktop und Mobile,

• er funktioniert korrekt mit Cache, Varnish und PageBuilder Preview.

Und genau deshalb lohnt es sich, ihn zu nutzen.

In der Praxis stoßen jedoch viele Magento-Shops auf dieselben Probleme, insbesondere bei modernen, responsiven Layouts.

In der Standardkonfiguration von PageBuilder:

• wird die Slider-Höhe starr erzwungen (min-height),

• ergeben sich die Bildproportionen nicht aus den tatsächlichen Abmessungen der Grafik,

• auf Mobile erscheinen leere Abstände über und unter dem Slider,

• der Slider reagiert nicht immer korrekt auf geänderte Breakpoints,

• CSS und JS von PageBuilder erzwingen Verhaltensweisen, die sich ohne Eingriff in den Core nur schwer überschreiben lassen.

Das Ergebnis?

Der Slider sieht oft nur auf einem Bildschirm gut aus –
bei anderen Auflösungen verliert er Proportionen oder Ästhetik.

Kowal PageBuilder Slider Fix löst diese Probleme ohne PageBuilder zu deaktivieren und ohne Eingriff in den Magento-Core.

Das Modul:

• entfernt die starre Erzwingung der Höhe (min-height) durch PageBuilder,

• ermöglicht dem Slider, die Höhe dynamisch an das Bild anzupassen,

• unterstützt die Darstellung über die volle Breite (100% viewport width),

• verarbeitet separate Desktop- und Mobile-Bilder korrekt,

• arbeitet nur dort, wo tatsächlich ein Slider vorhanden ist.

• nutzt text/x-magento-init – den nativen Magento-Mechanismus,

• initialisiert das Verhalten über den Slider-Selektor,

• arbeitet pro Slider und nicht global,

• arbeitet mit dem PageBuilder-Mechanismus data-background-images zusammen,

• ist mit PageBuilder Preview und dem CMS-Editor kompatibel.

Das bedeutet:

✔ geringerer Bedarf an zusätzlichen Bibliotheken; Kompatibilität muss geprüft werden
✔ Zusammenarbeit mit Cache ist im Shop zu prüfen
✔ Arbeitsumfang beschränkt sich auf die Darstellung von Slidern

Dieses Modul ist ideal, wenn:

• Sie den PageBuilder Slider oder Banner Slider verwenden,

• Ihnen perfekte Responsivität wichtig ist,

• Sie native Magento-Lösungen beibehalten möchten,

• Sie keine schweren externen Slider installieren möchten,

• Ihnen eine ansprechende Darstellung auf Mobile wichtig ist, ohne leere Abstände.

Externe Slider:

• laden häufig große JS-Bibliotheken,

• arbeiten nicht optimal mit PageBuilder zusammen,

• können bei Cache / Varnish problematisch sein,

• erschweren nichttechnischen Personen die Bearbeitung von Inhalten.

Unser Modul behebt genau das, was nötig ist – und nichts darüber hinaus.

Kowal PageBuilder Slider Fix:

• bewahrt die Vorteile des nativen Magento-Sliders,

• beseitigt seine größten Schwächen,

• verbessert die Darstellung auf Desktop und Mobile,

• ist leichtgewichtig, schnell und sicher,

• ist für die Implementierung nach Prüfung des Themes und der Konfiguration vorgesehen.

Wenn Sie PageBuilder verwenden – sollte dieses Modul seine natürliche Ergänzung sein.

Stores → Configuration → Kowal → PageBuilder Slider Fix stellt Desktop Width / Height, Mobile Width / Height sowie Mobile Breakpoint bereit. Die Standardwerte sind 1920 × 800, 768 × 976 und 768 px. Der mobile Schwellenwert umfasst auch einen Bildschirm mit exakt 768 px Breite.

In Luma nutzt das Höhenskript die natürlichen Abmessungen der Hintergrundgrafik; der Hyvä-Adapter verwendet die konfigurierten Proportionen für die Geometrie des Slides. Der Bildwechsel reagiert auf resize und orientationchange. Fehlt die Mobile-Grafik, wird Desktop verwendet.

Für Hyvä aktivieren Sie zusätzlich Kowal_PageBuilderSliderFixHyva und setzen in der jeweiligen Store View Hyva Compatibility → Enable Hyva Slider Fix auf Yes. Der Adapter-Schalter ist standardmäßig deaktiviert. Installieren Sie ihn nicht separat neben dem Hauptpaket.

Der Adapter unterstützt Hyvä-Felder für WebP-Bilder und das Flag für Lazy Loading des Hintergrunds. Das native Theme ist für Navigation und Wiedergabe des Karussells zuständig. Eigenes Slider-Markup muss die erforderlichen Elemente und Attribute von PageBuilder beibehalten.

In Luma nutzt die Initialisierung text/x-magento-init und den Selektor .pagebuilder-slider, ohne zusätzliche Karussell-Bibliothek. Das Initialisierungstemplate wird im Standardlayout hinzugefügt; die Arbeit mit Grafiken betrifft die auf der Seite vorhandenen Slider-Elemente.

Prüfen Sie Proportionen, Theme-CSS, Breakpoints, PageBuilder-Vorschau sowie das Zusammenspiel mit Cache und Varnish in Ihrem Shop. Die Effekte betreffen die Art der Banner-Darstellung; Konfliktfreiheit und ein Einfluss von null auf die Performance sind keine universelle Garantie.

Paket kowal/module-pagebuildersliderfix, Modul Kowal_PageBuilderSliderFix. Nachdem Sie den Zugriff auf das Kowal-Repository konfiguriert haben, installieren Sie das Paket, aktivieren Sie das Modul, aktualisieren Sie Magento und leeren Sie den Cache. Berücksichtigen Sie in der Produktion die Kompilierung und Bereitstellung statischer Inhalte gemäß dem Prozess Ihres Shops.

1. Sie bereiten Grafiken vor
Sie fügen Desktop- und Mobile-Bilder in PageBuilder hinzu.

2. Sie wählen die Einstellungen
Sie konfigurieren die Proportionen und den Schwellenwert für die mobile Version.

3. Der Slider passt die Darstellung an
Der Mechanismus ändert Bild und Geometrie passend zum Bildschirm.

Für Desktop bereiten Sie eine breite Grafik vor, für Mobile eine separate vertikale Variante. Wenn sich die Bildschirmbreite ändert, wählt das Modul das passende Bild aus.

Fehlt die mobile Version, wird die Desktop-Grafik verwendet. Scrollen und Wiedergabe der Slides bleiben Aufgabe des nativen Sliders.