Kowal_ProductGalleryHover – interaktywna galeria zdjęć produktów w Magento 2

Kowal_ProductGalleryHover to moduł, który dodaje do list produktów (widok kategorii) w Magento 2 nowoczesną funkcję „hover gallery” — czyli podgląd dodatkowych zdjęć produktu już na poziomie kategorii. Użytkownik może zobaczyć kolejne zdjęcia po najechaniu kursorem lub przesunięciu palcem (na urządzeniach mobilnych), bez konieczności przechodzenia na stronę produktu.

Zalety modułu

• Lepsze doświadczenie użytkownika (UX) – szybki podgląd produktu z różnych ujęć zwiększa zaangażowanie i konwersję.
• Nowoczesna interaktywność – obsługa przewijania zdjęć przyciskiem, gestem lub ruchem myszy.
• Pełna kompatybilność z mobile – przesuwanie zdjęć na ekranach dotykowych.
• Brak wpływu na wydajność – zdjęcia są ładowane asynchronicznie w tle (AJAX + IntersectionObserver), dzięki czemu nie obciążają strony.
• Optymalizacja SEO i Core Web Vitals – główne obrazy kategorii są renderowane przez Magento, a dodatkowe galerie doczytywane dopiero po załadowaniu strony, co utrzymuje wysoki wynik PageSpeed Insights.
• Wbudowany tryb lazy-load – galeria ładuje się tylko dla widocznych produktów na ekranie użytkownika.
• Możliwość włączenia/wyłączenia modułu z poziomu panelu administracyjnego (Stores → Configuration → Kowal → Product Gallery Hover).
• Automatyczne skalowanie obrazów – zdjęcia są proporcjonalnie przeskalowywane (zgodnie z rozmiarami zdefiniowanymi w view.xml) w celu minimalizacji transferu.

Jak działa moduł

Moduł został zaprojektowany z myślą o maksymalnej wydajności. Nie modyfikuje layoutu Magento ani struktury DOM – działa jako lekki skrypt JS, który:

1. Nasłuchuje zdarzeń mouseenter / touchstart dla elementów produktów.
2. W momencie interakcji pobiera galerię zdjęć danego produktu poprzez lekki request AJAX (JSON).
3. Wyświetla dodatkowe zdjęcia w osobnej warstwie hover, bez przeładowywania strony.
4. Obrazy są skalowane i cache’owane po stronie serwera, by ograniczyć wagę danych.

Dodatkowo, moduł wykorzystuje IntersectionObserver – czyli mechanizm natywnego lazy loadingu, który automatycznie wczytuje galerie dla produktów widocznych w viewport. Dzięki temu użytkownik widzi natychmiast gotowe galerie, a strona nie traci na wydajności.

Korzyści SEO

Moduł został zoptymalizowany tak, aby nie wpływać negatywnie na crawl budget, LCP, CLS ani TBT. Wszystkie dynamiczne obrazy ładowane są po załadowaniu głównej treści strony (inicjalizacja w before.body.end), co sprawia, że moduł jest w pełni bezpieczny pod kątem SEO i wydajności.

• Brak wpływu na HTML source – roboty wyszukiwarek widzą oryginalny kod strony.
• Nie generuje dodatkowych requestów przy pierwszym ładowaniu – wszystkie obrazy pobierane są tylko, gdy użytkownik faktycznie je widzi.
• Zachowuje pełną zgodność z cache’owaniem Magento (Full Page Cache, Varnish, Redis).

Dlaczego warto

Nowoczesne sklepy e-commerce powinny oferować szybki i intuicyjny dostęp do informacji o produkcie. Moduł Kowal_ProductGalleryHover zapewnia właśnie to — interaktywny podgląd bez opóźnień, bez ryzyka spadku wydajności, w pełni zgodny z Magento 2 i zasadami SEO.