Kowal PageBuilder Slider Fix – responsieve slider zonder compromissen

MAGENTO 2 · PAGEBUILDER · SLIDER · LUMA EN HYVÄ

Kowal PageBuilder Slider Fix

Behoud de native slider van PageBuilder en verbeter de verhoudingen en de selectie van desktop- en mobiele afbeeldingen. Gebruik de standaardversie voor Luma of de Hyvä-adapter die in het pakket is inbegrepen.

Beeldverhoudingen · Desktop-/mobiele afbeeldingen · Configureerbare breakpoint

HOE HET IN DE PRAKTIJK WERKT

Magento PageBuilder biedt een native slider die in de basis een uitstekende oplossing is:

• vereist geen externe bibliotheken,

• is volledig geïntegreerd met de contenteditor,

• ondersteunt aparte afbeeldingen voor desktop en mobiel,

• werkt correct met cache, Varnish en PageBuilder Preview.

Juist daarom is het de moeite waard om deze te gebruiken.

In de praktijk lopen veel Magento-winkels helaas tegen dezelfde problemen aan, vooral bij moderne, responsieve layouts.

In de standaardconfiguratie van PageBuilder:

• wordt de hoogte van de slider strikt afgedwongen (min-height),

• zijn de beeldverhoudingen niet gebaseerd op de werkelijke afmetingen van de afbeelding,

• verschijnen er op mobiel lege marges boven en onder de slider,

• reageert de slider niet altijd correct op gewijzigde breakpoints,

• dwingen de CSS en JS van PageBuilder gedrag af dat lastig te overschrijven is zonder ingreep in de core.

Het resultaat?

De slider ziet er vaak slechts op één scherm goed uit –
op andere resoluties verliest hij zijn verhoudingen of uitstraling.

Kowal PageBuilder Slider Fix lost deze problemen op zonder PageBuilder uit te schakelen en zonder ingreep in de Magento-core.

De module:

• verwijdert het strikt afdwingen van hoogte (min-height) door PageBuilder,

• laat de slider de hoogte dynamisch aanpassen aan de afbeelding,

• ondersteunt weergave over de volledige breedte (100% viewport width),

• verwerkt aparte desktop- en mobiele afbeeldingen correct,

• werkt alleen daar waar de slider daadwerkelijk bestaat.

• maakt gebruik van text/x-magento-init – het native mechanisme van Magento,

• initialiseert het gedrag via de slider-selector,

• werkt per slider en niet globaal,

• werkt samen met het data-background-images-mechanisme van PageBuilder,

• is compatibel met PageBuilder Preview en de CMS-editor.

Dat betekent:

✔ minder behoefte aan aanvullende bibliotheken; compatibiliteit moet worden gecontroleerd
✔ samenwerking met cache moet in de winkel worden gecontroleerd
✔ de scope is beperkt tot de verwerking van de sliderweergave

Deze module is ideaal als u:

• PageBuilder Slider of Banner Slider gebruikt,

• perfecte responsiviteit belangrijk vindt,

• native Magento-oplossingen wilt behouden,

• geen zware, externe sliders wilt installeren,

• waarde hecht aan een mooie mobiele weergave zonder lege marges.

Externe sliders:

• laden vaak grote JS-bibliotheken,

• werken niet perfect samen met PageBuilder,

• kunnen problematisch zijn bij cache / Varnish,

• maken het bewerken van content lastiger voor niet-technische gebruikers.

Onze module repareert precies wat nodig is – en niets meer.

Kowal PageBuilder Slider Fix:

• behoudt de voordelen van de native Magento-slider,

• elimineert de grootste nadelen ervan,

• verbetert de weergave op desktop en mobiel,

• is licht, snel en veilig,

• is bedoeld voor implementatie na controle van het thema en de configuratie.

Als u PageBuilder gebruikt – dan hoort deze module een natuurlijke aanvulling te zijn.

Stores → Configuration → Kowal → PageBuilder Slider Fix biedt Desktop Width / Height, Mobile Width / Height en Mobile Breakpoint. De standaardwaarden zijn 1920 × 800, 768 × 976 en 768 px. De mobiele drempel omvat ook een scherm met exact 768 px breedte.

In Luma gebruikt het hoogtescript de natuurlijke afmetingen van de achtergrondafbeelding; de Hyvä-adapter gebruikt de geconfigureerde verhoudingen voor de geometrie van de slide. De afbeeldingswissel reageert op resize en orientationchange. Als een mobiele afbeelding ontbreekt, wordt desktop gebruikt.

Schakel voor Hyvä ook Kowal_PageBuilderSliderFixHyva in en stel in de betreffende store view Hyva Compatibility → Enable Hyva Slider Fix in op Yes. De adapter-schakelaar is standaard uitgeschakeld. Installeer deze niet apart naast het hoofdpakket.

De adapter ondersteunt de WebP-afbeeldingsvelden van Hyvä en de flag voor lazy loading van de achtergrond. Het native thema is verantwoordelijk voor navigatie en het afspelen van de carrousel. Eigen slider-markup moet de vereiste PageBuilder-elementen en attributen behouden.

In Luma gebruikt de initialisatie text/x-magento-init en de selector .pagebuilder-slider, zonder extra carrouselbibliotheek. De initialisatietemplate wordt toegevoegd in de standaardlayout; het werken met afbeeldingen betreft de slider-elementen die op de pagina aanwezig zijn.

Controleer de verhoudingen, de CSS van het thema, breakpoints, de PageBuilder-preview en de werking met cache en Varnish in uw winkel. De effecten hebben betrekking op de manier waarop banners worden weergegeven; geen conflicten en geen invloed op prestaties zijn geen universele garantie.

Pakket kowal/module-pagebuildersliderfix, module Kowal_PageBuilderSliderFix. Configureer toegang tot de Kowal-repository, installeer het pakket, schakel de module in, update Magento en leeg de cache. Neem in productie compilatie en implementatie van statische content mee volgens het proces van de winkel.

1. U bereidt de afbeeldingen voor
U voegt desktop- en mobiele afbeeldingen toe in PageBuilder.

2. U kiest de instellingen
U configureert de verhoudingen en de drempel voor de mobiele versie.

3. De slider past de weergave aan
Het mechanisme wijzigt de afbeelding en de geometrie voor het scherm.

Voor desktop bereidt u een brede afbeelding voor en voor mobiel een aparte verticale variant. Wanneer de schermbreedte verandert, kiest de module de juiste afbeelding.

Als de mobiele versie ontbreekt, wordt de desktopafbeelding gebruikt. Scrollen en het afspelen van slides blijven de taak van de native slider.