PrestaShop Design i nawigacja

Galeria Produktu PrestaShop: Zoom HD, Pełny Ekran i Filtr Wariantów

Galeria produktu nowej generacji: zoom HD, pionowe miniatury, pełny ekran mobile z gestem szczypania i filtrowanie zdjęć według wariantu.

Galeria produktu, którą PrestaShop powinien był dostarczyć: zoom wysokiej rozdzielczości, pełny ekran na mobile i zdjęcia filtrowane według wariantu.

W skrócie
  • Wewnętrzny zoom HD po najechaniu: automatyczne przełączenie na oryginalne, nieskalowane zdjęcie źródłowe
  • Przeglądarka pełnoekranowa na mobile: szczypanie dwoma palcami, podwójne tapnięcie, przesunięcie, licznik zdjęć
  • Filtrowanie zdjęć według wybranego wariantu, tryb ścisły lub inteligentny, resynchronizacja przy każdej zmianie
  • Ładowanie zoptymalizowane pod LCP: okładka wstępnie ładowana z wysokim priorytetem, miniatury i sąsiednie zdjęcia odroczone
  • PrestaShop 8 i 9, żaden override ani tabela SQL, vanilla JS bez jQuery
PrestaShop 8 i 9 Zoom HD Pinch na mobile Filtr wariantów Optymalizacja LCP
  • Zwrot w 30 dni
  • 12 miesięcy aktualizacji
  • Wsparcie 24 h
www.datafirefly.com/pl/
Galeria produktu PrestaShop z zoomem HD i widokiem pełnoekranowym
v1.0.0 · zaktualizowano 2026-07-16
Co robi

W skrócie.

01

Zoom wysokiej rozdzielczości, naprawdę

Zoom po najechaniu podąża za kursorem z konfigurowalnym współczynnikiem od 1,5 do 4. Przy pierwszym najechaniu galeria po cichu wstępnie ładuje oryginalne, nieskalowane zdjęcie źródłowe i przełącza się na nie: zoom pozostaje ostry nawet na bardzo szczegółowych zdjęciach, tam gdzie zoom natywny poprzestaje na formacie large.

02

Pełny ekran na mobile z gestem szczypania

Immersyjna przeglądarka zbudowana na Pointer Events: szczypanie dwoma palcami z automatycznym kadrowaniem, podwójne tapnięcie do zoomu, przesunięcie do nawigacji, licznik zdjęć i zamykanie klawiszem Escape lub kliknięciem w tło. Zoom kółkiem myszy na komputerze.

03

Zdjęcia filtrowane według wariantu

Galeria odczytuje natywne powiązania zdjęcia / kombinacje karty produktu i pokazuje tylko trafne zdjęcia: tryb ścisły (wyłącznie zdjęcia wariantu) lub inteligentny (zdjęcia wariantu na początku, potem pozostałe). Resynchronizuje się przy każdej zmianie wariantu, także po odświeżeniu AJAX przez rdzeń.

04

Zaprojektowany pod Largest Contentful Paint

Okładka jest zapowiadana do wstępnego ładowania z wysokim priorytetem już w sekcji head, pierwsze zdjęcie sceny ładuje się priorytetowo, a miniatury i kolejne zdjęcia są odroczone; sąsiednie zdjęcia są wstępnie ładowane przy każdej nawigacji. Twoja karta produktu zyskuje na szybkości odczuwanej i mierzonej.

Wersja pełna

Wszystko, co warto wiedzieć, zanim zainstalujesz.

Szczegółowe spojrzenie na to, jak działa Galeria Produktu PrestaShop: Zoom HD, Pełny Ekran i Filtr Wariantów, dlaczego zbudowaliśmy go w ten sposób i jaka myśl stoi za powyższymi funkcjami.

§ 01

Zastąpić natywną galerię bez dotykania motywu

Moduł nie podmienia żadnego szablonu: wstrzykuje dane karty produktu przy ładowaniu strony, a następnie montuje galerię w JavaScripcie w miejscu natywnego bloku zdjęć, który czysto ukrywa. Takie podejście zapewnia zgodność z motywem classic i zdecydowaną większością motywów z niego wywodzących się, bez konfliktów szablonów i bez długu utrzymaniowego przy każdej aktualizacji motywu. Szybki podgląd celowo zachowuje galerię natywną, aby uniknąć interferencji z rdzeniem.

§ 02

Zoom, który wreszcie wykorzystuje pełną rozdzielczość Twoich zdjęć

Natywny zoom PrestaShop ogranicza się do formatu large generowanego przez sklep, często 800 pikseli. Tutaj wewnętrzny zoom podąża za kursorem z regulowanym współczynnikiem, a od pierwszego najechania galeria wstępnie ładuje w tle oryginalne zdjęcie źródłowe, które wgrałeś, po czym niewidocznie się na nie przełącza. Szwy, faktury i detale pozostają ostre nawet przy dużym powiększeniu: mocny argument dla mody, jubilerstwa, mebli czy starannej fotografii produktowej.

§ 03

Pełny ekran na mobile, na który czekają Twoi odwiedzający

Na mobile przeglądarka pełnoekranowa otwiera się jednym tapnięciem: ciemne tło, szczypanie dwoma palcami z limitami przesuwania przeliczanymi na bieżąco, podwójne tapnięcie do zoomu i oddalenia, poziome przesunięcie do zmiany zdjęcia i licznik pozycji. Na komputerze ta sama przeglądarka reaguje na kółko myszy, strzałki klawiatury i klawisz Escape. Doświadczenie zbliżone do dużych marketplace'ów, bezpośrednio w Twoim sklepie.

§ 04

Zdjęcia spójne z wybranym wariantem

Gdy klient wybiera kolor koniakowy, pokazywanie mu zdjęć modelu czarnego rodzi wątpliwości i zwroty. Galeria odczytuje natywną tabelę powiązań zdjęcia / kombinacje i filtruje wyświetlanie: w trybie ścisłym pojawiają się tylko zdjęcia wariantu; w trybie inteligentnym przechodzą na początek, a pozostałe następują po nich. Jeśli kombinacja nie ma żadnego przypisanego zdjęcia, w ramach fallbacku wyświetlana jest pełna galeria. Resynchronizacja następuje przy każdej zmianie wariantu, także po podmianie bloku zdjęć przez AJAX rdzenia PrestaShop.