Galeria Produktu PrestaShop: kompletny przewodnik

Prezentacja

Galeria Produktu PrestaShop (folder modułu dfgallerypro) zastępuje natywną galerię obrazów karty produktu nowoczesną galerią: wewnętrzny zoom wysokiej rozdzielczości po najechaniu, pionowe lub poziome miniatury, pełnoekranowa przeglądarka z gestem szczypania na mobile, filtrowanie obrazów według wybranego wariantu oraz strategia ładowania zoptymalizowana pod Largest Contentful Paint.

Moduł nie podmienia żadnego szablonu: galeria jest montowana w JavaScripcie w miejscu natywnego bloku obrazów, który jest ukrywany. Nie używa żadnej tabeli SQL, żadnego override, a jego JavaScript jest natywny, bez jQuery.

Instalacja

Wymagania

• PrestaShop 8.0 do 9.x
• PHP 7.4 lub nowszy
• Motyw oparty na motywie classic (lub eksponujący standardowe kontenery obrazów karty produktu)

Instalacja modułu

1. W zapleczu otwórz Moduły → Menedżer modułów.
2. Kliknij Zainstaluj moduł i wybierz archiwum dfgallerypro.zip.
3. Po zakończeniu instalacji kliknij Konfiguruj.

Konfiguracja

Wszystkie ustawienia znajdują się na ekranie konfiguracji modułu. Zmiany są uwzględniane natychmiast po stronie sklepu, bez czyszczenia cache.

Pozycja miniatur

• Lewo (pionowo): kolumna miniatur po lewej stronie obrazu głównego. Ustawienie domyślne.
• Prawo (pionowo): kolumna po prawej stronie obrazu głównego.
• Dół (poziomo): poziomy pasek pod obrazem głównym.

Tryb zoomu i poziom zoomu

• Najechanie (zoom wewnętrzny): zoom podąża za kursorem wewnątrz obrazu. Aktywny tylko na urządzeniach z precyzyjnym wskaźnikiem (komputery), wykrywanych automatycznie.
• Kliknięcie (otwiera pełny ekran): brak zoomu przy najechaniu; kliknięcie otwiera przeglądarkę pełnoekranową.
• Wyłączony: żadna interakcja zoomu na scenie.

Poziom zoomu definiuje współczynnik powiększenia przy najechaniu, od 1,5 do 4. Zalecana wartość mieści się między 2 a 3.

Przeglądarka pełnoekranowa i szczypanie

Gdy przeglądarka pełnoekranowa jest włączona, kliknięcie obrazu głównego (lub przycisku powiększenia w prawym dolnym rogu) otwiera immersyjną przeglądarkę na ciemnym tle: licznik obrazów, strzałki, zamykanie klawiszem Escape lub kliknięciem tła.

Opcja Zoom szczypaniem na mobile aktywuje w tej przeglądarce szczypanie dwoma palcami (do ×4), podwójne tapnięcie do powiększania i pomniejszania oraz przesuwanie powiększonego obrazu palcem. Na komputerze zoomować można kółkiem myszy.

Filtrowanie obrazów według wariantu

• Ścisły: wyświetlane są tylko obrazy powiązane z wybranym wariantem.
• Inteligentny (zalecany): obrazy wariantu wyświetlają się jako pierwsze, a po nich pozostałe obrazy produktu.
• Wyłączony: zawsze wyświetlane są wszystkie obrazy.

Lazy loading i preload LCP

• Lazy loading: tylko pierwszy obraz jest ładowany natychmiast; miniatury powyżej czwartej i kolejne obrazy ładują się z opóźnieniem. Sąsiednie obrazy są preloadowane przy każdej nawigacji dla natychmiastowych przejść.
• Preloaduj obraz główny (LCP): dodaje w nagłówku strony znacznik preloadu z wysokim priorytetem dla obrazu głównego, co poprawia Largest Contentful Paint karty produktu.
• Pokaż strzałki nawigacji: wyświetla strzałki poprzedni / następny na obrazie głównym (widoczne po najechaniu na komputerze, zawsze widoczne na mobile).

Powiązanie obrazów z wariantami

Filtrowanie według wariantu opiera się na natywnych powiązaniach PrestaShop, bez dodatkowej konfiguracji w module:

1. Otwórz kartę produktu w zapleczu, zakładka Warianty.
2. Otwórz każdy wariant i zaznacz odpowiadające mu obrazy w sekcji Obrazy.
3. Zapisz: galeria natychmiast użyje tych powiązań po stronie sklepu.

Działanie po stronie sklepu

Na komputerze

• Najechanie na obraz: zoom wewnętrzny podążający za kursorem (jeśli tryb najechania jest aktywny).
• Kliknięcie obrazu lub przycisku powiększenia: otwarcie przeglądarki pełnoekranowej.
• Strzałki klawiatury do nawigacji, Escape do zamknięcia, kółko do zoomu w przeglądarce.

Na mobile

• Poziomy swipe na obrazie głównym, aby przejść z obrazu na obraz.
• Tapnięcie obrazu: otwarcie pełnego ekranu.
• W pełnym ekranie: szczypanie dwoma palcami, podwójne tapnięcie, swipe do nawigacji, licznik pozycji.

Wydajność i LCP

Moduł jest zaprojektowany, aby poprawiać Core Web Vitals karty produktu, a nie je pogarszać:

• Obraz główny jest zapowiadany preloadem z wysokim priorytetem już w nagłówku strony (opcja do włączenia).
• Pierwszy obraz sceny ładuje się z atrybutem wysokiego priorytetu i asynchronicznym dekodowaniem.
• Miniatury używają natywnego lazy loadingu przeglądarki; oryginalny obraz do zoomu ładuje się dopiero przy pierwszym najechaniu.
• JavaScript ładuje się na dole strony, bez zewnętrznych zależności.

Zgodność z motywami i rozwiązywanie problemów

Moduł celuje w standardowe kontenery obrazów motywów opartych na classic. Jeśli Twój motyw używa zupełnie innej struktury, natywna galeria pozostaje wyświetlana bez zmian, bez błędu.

• Galeria się nie wyświetla: sprawdź, czy Twój motyw eksponuje standardowy kontener obrazów na karcie produktu. Skontaktuj się z naszym wsparciem z adresem URL karty produktu: adaptacja do konkretnego motywu jest zwykle szybka.
• Zoom wygląda na rozmyty: ostrość zoomu zależy od rozdzielczości wgranych obrazów źródłowych. Wgrywaj obrazy o szerokości co najmniej 1500 px dla optymalnego rezultatu.
• Filtrowanie nie reaguje na zmianę wariantu: sprawdź, czy obrazy są powiązane z wariantami w zakładce Warianty karty produktu i czy tryb filtrowania nie jest na Wyłączony.
• Szybki podgląd: okno szybkiego podglądu celowo zachowuje natywną galerię, aby uniknąć interferencji z JavaScriptem rdzenia.

Deinstalacja

Deinstalacja z menedżera modułów usuwa wszystkie klucze konfiguracji modułu. Żadne dane nie pozostają: moduł nie utworzył ani tabeli, ani override, ani pliku poza własnym folderem.

Changelog

• 1.0.0 (16.07.2026): Wersja początkowa: zoom HD po najechaniu oparty na obrazie oryginalnym, przeglądarka pełnoekranowa ze szczypaniem, filtrowanie obrazów według wariantu (ścisłe / inteligentne), preload LCP, lazy loading, miniatury pionowe lub poziome, tłumaczenia FR, EN, ES, DE, IT.