Kowal PageBuilder Slider Fix – responsywny slider bez kompromisów

MAGENTO 2 · PAGEBUILDER · SLIDER · LUMA I HYVÄ

Kowal PageBuilder Slider Fix

Zachowaj natywny slider PageBuildera i popraw jego proporcje oraz wybór grafik desktop/mobile. Skorzystaj ze standardowej wersji dla Luma lub adaptera Hyvä dołączonego do pakietu.

Proporcje obrazu · Grafiki desktop/mobile · Konfigurowalny breakpoint

JAK TO DZIAŁA W PRAKTYCE

Magento PageBuilder oferuje natywny slider, który z założenia jest świetnym rozwiązaniem:

• nie wymaga zewnętrznych bibliotek,

• jest w pełni zintegrowany z edytorem treści,

• obsługuje osobne obrazy dla desktop i mobile,

• działa poprawnie z cache, Varnish oraz PageBuilder Preview.

I właśnie dlatego warto z niego korzystać.

Niestety, w praktyce wiele sklepów Magento napotyka te same problemy, szczególnie przy nowoczesnych, responsywnych layoutach.

W standardowej konfiguracji PageBuilder:

• wysokość slidera jest sztywno wymuszona (min-height),

• proporcje obrazu nie wynikają z realnych wymiarów grafiki,

• na mobile pojawiają się puste marginesy nad i pod sliderem,

• slider nie zawsze poprawnie reaguje na zmianę breakpointów,

• CSS i JS PageBuildera wymuszają zachowania trudne do nadpisania bez ingerencji w core.

Efekt?

Slider często wygląda dobrze tylko na jednym ekranie –
a na innych rozdzielczościach traci proporcje lub estetykę.

Kowal PageBuilder Slider Fix rozwiązuje te problemy bez wyłączania PageBuildera i bez ingerencji w core Magento.

Moduł:

• usuwa sztywne wymuszanie wysokości (min-height) przez PageBuilder,

• pozwala sliderowi dynamicznie dopasować wysokość do obrazu,

• wspiera prezentację na pełnej szerokości (100% viewport width),

• poprawnie obsługuje oddzielne obrazy desktop i mobile,

• działa tylko tam, gdzie slider faktycznie istnieje.

• wykorzystuje text/x-magento-init – natywny mechanizm Magento,

• inicjalizuje zachowanie przez selektor slidera,

• działa per slider, a nie globalnie,

• współpracuje z mechanizmem data-background-images PageBuildera,

• jest kompatybilny z PageBuilder Preview oraz edytorem CMS.

To oznacza:

✔ ograniczenie potrzeby dodatkowych bibliotek; zgodność wymaga sprawdzenia
✔ współpraca z cache do sprawdzenia w sklepie
✔ zakres pracy ograniczony do obsługi prezentacji sliderów

Ten moduł jest idealny, jeśli:

• używasz PageBuilder Slidera lub Banner Slidera,

• zależy Ci na idealnej responsywności,

• chcesz zachować natywne rozwiązania Magento,

• nie chcesz instalować ciężkich, zewnętrznych sliderów,

• zależy Ci na estetyce na mobile (bez pustych marginesów).

Zewnętrzne slidery:

• często ładują duże biblioteki JS,

• nie współpracują idealnie z PageBuilderem,

• bywają problematyczne przy cache / Varnish,

• utrudniają edycję treści osobom nietechnicznym.

Nasz moduł naprawia to, co trzeba – i nic więcej.

Kowal PageBuilder Slider Fix:

• zachowuje zalety natywnego slidera Magento,

• eliminuje jego największe wady,

• poprawia prezentację na desktop i mobile,

• jest lekki, szybki i bezpieczny,

• przeznaczony do wdrożenia po sprawdzeniu motywu i konfiguracji.

Jeśli korzystasz z PageBuildera – ten moduł powinien być jego naturalnym uzupełnieniem.

Stores → Configuration → Kowal → PageBuilder Slider Fix udostępnia Desktop Width / Height, Mobile Width / Height oraz Mobile Breakpoint. Domyślne wartości to 1920 × 800, 768 × 976 i 768 px. Próg mobilny obejmuje także ekran o szerokości dokładnie 768 px.

W Luma skrypt wysokości korzysta z naturalnych wymiarów grafiki tła; adapter Hyvä używa skonfigurowanych proporcji do geometrii slajdu. Zmiana obrazu reaguje na resize i orientationchange. Brak grafiki mobile powoduje użycie desktop.

Dla Hyvä włącz także Kowal_PageBuilderSliderFixHyva i w danym store view ustaw Hyva Compatibility → Enable Hyva Slider Fix na Yes. Przełącznik adaptera jest domyślnie wyłączony. Nie instaluj go osobno obok pakietu głównego.

Adapter obsługuje pola obrazów WebP Hyvä i flagę lazy loading tła. Natywny motyw odpowiada za nawigację i odtwarzanie karuzeli. Własny markup slidera musi zachować wymagane elementy i atrybuty PageBuildera.

W Luma inicjalizacja używa text/x-magento-init i selektora .pagebuilder-slider, bez dodatkowej biblioteki karuzeli. Szablon inicjalizacji jest dodawany w layoucie domyślnym; praca z grafikami dotyczy elementów slidera obecnych na stronie.

Sprawdź proporcje, CSS motywu, breakpointy, podgląd PageBuildera oraz działanie z cache i Varnish w swoim sklepie. Efekty dotyczą sposobu prezentacji banerów; brak konfliktów i zerowy wpływ na wydajność nie są uniwersalną gwarancją.

Pakiet kowal/module-pagebuildersliderfix, moduł Kowal_PageBuilderSliderFix. Po skonfigurowaniu dostępu do repozytorium Kowal zainstaluj pakiet, włącz moduł, zaktualizuj Magento i wyczyść cache. W produkcji uwzględnij kompilację i wdrożenie treści statycznych zgodnie z procesem sklepu.

1. Przygotowujesz grafiki
Dodajesz obrazy desktop i mobile w PageBuilderze.

2. Dobierasz ustawienia
Konfigurujesz proporcje i próg wersji mobilnej.

3. Slider dopasowuje prezentację
Mechanizm zmienia obraz i geometrię dla ekranu.

Dla desktop przygotowujesz szeroką grafikę, a dla mobile osobny pionowy wariant. Po zmianie szerokości ekranu moduł dobiera odpowiedni obraz.

Gdy wersji mobilnej brakuje, wykorzystywana jest grafika desktop. Przewijanie i odtwarzanie slajdów pozostają zadaniem natywnego slidera.