Widok produktu 360° (df360spin): dokumentacja
Instalacja, konfiguracja i zasilanie przeglądarki produktu 360° df360spin: przygotowanie zdjęć, ustawienia globalne, tworzenie sekwencji i dobre praktyki fotografowania.
Prezentacja
Widok produktu 360° (df360spin) dodaje do kart produktów interaktywną przeglądarkę, która odtwarza pełny obrót artykułu na podstawie zwykłej sekwencji zdjęć. Odwiedzający obraca produkt, przeciągając go myszą lub palcem, z automatycznym odtwarzaniem, trybem pełnoekranowym, licznikiem klatek i nawigacją z klawiatury. Moduł nie zastępuje żadnego szablonu: osadza się przez wybrany przez Ciebie hook wyświetlania.
Widok 360° to nie model 3D: to seria zdjęć wykonanych dookoła produktu. Jakość efektu zależy przede wszystkim od regularności Twojej sesji zdjęciowej.
Przygotowanie zdjęć
Sfotografuj produkt na stole obrotowym, wykonując stałą liczbę ujęć rozłożonych w równych odstępach, w tym samym kadrze i przy tym samym oświetleniu. Obracaj stół o stały kąt między kolejnymi ujęciami, na przykład 10° przy 36 zdjęciach, czyli 360° ÷ 36.
Zalecana liczba zdjęć
- 24 zdjęcia (co 15°): poprawny obrót, lekka sekwencja.
- 36 zdjęć (co 10°): dobry kompromis między płynnością a wagą, zalecany w większości przypadków.
- 72 zdjęcia (co 5°): bardzo płynny obrót dla produktów o wysokiej wartości, cięższa sekwencja.
Moduł przyjmuje do 120 klatek na sekwencję. Poniżej 24 zdjęć obrót wygląda skokowo.
Nazewnictwo i format
Nazwij pliki w kolejności obrotu, z zerami wiodącymi w numeracji, aby zapewnić prawidłowe sortowanie: frame_01.jpg, frame_02.jpg i tak dalej. Moduł automatycznie sortuje zdjęcia według nazwy pliku podczas importu. Eksportuj do formatu JPG, PNG lub WebP w spójnym rozmiarze. Zdjęcia szersze niż skonfigurowana maksymalna szerokość są automatycznie zmniejszane po stronie serwera.
Neutralne, jednolite tło (białe lub jasnoszare) oraz stałe oświetlenie dają najczystszy obrót. Zablokuj ekspozycję i balans bieli aparatu, aby uniknąć różnic jasności między kolejnymi zdjęciami.
Instalacja
- W panelu administracyjnym otwórz Moduły > Menedżer modułów, kliknij Wgraj moduł i wybierz plik ZIP
df360spin. - Po instalacji kliknij Konfiguruj, aby ustawić opcje globalne.
- W menu Katalog pojawia się nowa zakładka Widoki 360° Spin służąca do zarządzania sekwencjami.
Ustawienia globalne
Na stronie konfiguracji modułu określasz domyślne zachowanie wszystkich przeglądarek:
- Pozycja wyświetlania: pod miniaturami produktu (zalecane), w bloku informacji dodatkowych albo na dole karty produktu.
- Domyślne automatyczne odtwarzanie: uruchamia ciągły obrót przy załadowaniu strony. W razie potrzeby nadpisywane osobno dla każdej sekwencji.
- Prędkość odtwarzania (ms na klatkę): czas wyświetlania każdej klatki przy automatycznym odtwarzaniu. Im niższa wartość, tym szybszy obrót. Orientacyjnie 60 ms przy 36 klatkach daje pełny obrót w około 2 sekundy.
- Czułość przeciągania: liczba pikseli przeciągnięcia potrzebna do przejścia o jedną klatkę. Niska wartość zwiększa reaktywność obrotu.
- Maksymalna szerokość klatek (px): powyżej tej szerokości importowane zdjęcia są automatycznie zmniejszane.
- Leniwe ładowanie: wczytuje zdjęcia dopiero wtedy, gdy przeglądarka 360° znajdzie się w widocznym obszarze ekranu.
Tworzenie sekwencji 360°
- Otwórz Katalog > Widoki 360° Spin, a następnie kliknij Dodaj sekwencję 360°.
- W polu Produkt wpisz nazwę, referencję lub identyfikator produktu: pojawi się lista podpowiedzi, z której wybierasz właściwy produkt.
- Zostaw sekwencję aktywną i wybierz tryb automatycznego odtwarzania (użyj ustawienia globalnego, włączone lub wyłączone).
- Zapisz: wyświetli się panel zarządzania klatkami.
Produkt może mieć tylko jedną sekwencję na sklep. W trybie wielosklepowym każdy sklep zarządza własną sekwencją dla tego samego produktu.
Import i porządkowanie klatek
- Przeciągnij i upuść zdjęcia w strefie zrzutu albo kliknij, aby je wybrać. Możesz wysłać wiele plików naraz.
- Zdjęcia są importowane partiami z paskiem postępu, a następnie sortowane według nazwy pliku.
- Zmień kolejność, przeciągając miniatury; nowa kolejność zapisuje się automatycznie.
- Najedź na miniaturę i kliknij czerwony krzyżyk, aby usunąć zdjęcie.
- Kliknij Podgląd obrotu, aby odtworzyć sekwencję bezpośrednio w panelu administracyjnym przed publikacją.
Obsługa po stronie sklepu
Na karcie produktu odwiedzający przeciąga produkt, aby obracać go w obie strony, myszą lub palcem, z bezwładnością na końcu gestu. Pasek sterowania zawiera przycisk odtwarzania i pauzy, licznik klatek oraz przycisk trybu pełnoekranowego. Na klawiaturze strzałki w lewo i w prawo przesuwają obraz o jedną klatkę, a spacja uruchamia lub wstrzymuje obrót. Systemowe ustawienie ograniczonego ruchu jest respektowane: automatyczne odtwarzanie nie startuje, jeśli użytkownik wyłączył animacje w swoim systemie.
Rozwiązywanie problemów
Przeglądarka się nie wyświetla
Sprawdź, czy sekwencja jest aktywna, czy zawiera co najmniej dwa zdjęcia oraz czy pozycja wyświetlania wybrana w ustawieniach odpowiada hookowi obecnemu w Twoim motywie. Moduł jest przeznaczony dla motywów opartych na classic.
Obrót jest skokowy
Zwiększ liczbę zdjęć w sekwencji, celuj w 36 lub więcej, i sprawdź regularność kąta między kolejnymi ujęciami.
Zdjęcia ładują się zbyt wolno
Zostaw włączone leniwe ładowanie, zmniejsz maksymalną szerokość klatek w ustawieniach i wybierz format WebP przy eksporcie.
Zgodność
- PrestaShop od 8.0 do 9.x, motyw classic oraz motywy potomne.
- Tryb wielosklepowy: jedna sekwencja na produkt i na sklep.
- Ekran dotykowy i mysz, tryb pełnoekranowy przeglądarki.
- Vanilla JS bez jQuery, bez nadpisywania szablonów.