[im3] ⭐ Nowa galeria produktowa [mp4] ⭐

Galeria produktu z miniaturami, pełnoekranowym podglądem oraz lokalnym filmem MP4 automatycznie pobieranym z pierwszego znacznika <video> w opisie produktu.

Do czego służy moduł?

Moduł rozbudowuje standardową galerię produktu o lokalny film MP4. Film jest pobierany bezpośrednio z pierwszego znacznika <video> znalezionego w opisie produktu i dodawany do tej samej listy mediów co zdjęcia.

Możesz ustawić miejsce filmu w galerii, pozycję miniaturek, strzałki na desktopie i mobile, wysokość filmu oraz natywne przyciski sterowania.

Jak dodać film MP4 do produktu?

W opisie produktu przejdź do edycji HTML.
Dodaj znacznik video z bezpośrednim adresem pliku MP4 w atrybucie src.
Zapisz opis produktu i włącz opcję Włącz lub wyłącz video w galerii.
Ustaw numer w polu Kolejność wyświetlanego video.

Parser aktualnego modułu szuka pierwszego znacznika <video> i odczytuje wartość zapisaną w formie src="...".

html

<video src="/upload/twoj-film-produktu.mp4"></video>

W instrukcji jest gotowe środowisko testowe

Symulator zawiera 6 syntetycznych zdjęć oraz przykładowy slajd MP4. Nie musisz podłączać ObjectApi ani prawdziwego filmu, żeby przetestować kolejność, miniatury, strzałki, controls i wysokość video.

Konfiguracja modułu

Najważniejsze ustawienia galerii

Pozycja miniaturek działa na desktopie: po lewej, po prawej albo pod zdjęciem. Na mobile źródłowy slider miniaturek jest ukryty.

Kolejność video określa miejsce filmu względem zdjęć. Wartość 1 oznacza film przed pierwszym zdjęciem. Jeżeli wpiszesz numer większy niż liczba zdjęć, film zostanie dopisany na końcu.

Wysokość video działa na desktopie. Na ekranach do 575 px źródłowy CSS wymusza automatyczną wysokość filmu.

Autoplay i zapętlanie — ważne zachowanie źródłowe

Checkboxy autoplay i loop nie sterują aktualnym kodem

Pola Włącz automatyczne odtwarzanie video oraz Automatyczne zapętlanie wideo istnieją w konfiguracji, ale aktualny Twig/JS ich nie odczytuje. JavaScript sam ustawia muted, playsinline, preload="metadata" i loop, a następnie próbuje odtwarzać video, kiedy co najmniej 60% slajdu jest widoczne.

Po opuszczeniu widocznego obszaru film jest pauzowany i jego czas jest resetowany do początku. To samo dzieje się po ukryciu karty przeglądarki. Pole Szerokość filmiku również nie jest aktualnie używane przez kod renderujący.

Jeżeli film się nie pojawia

Sprawdź, czy opcja video w galerii jest włączona.
Upewnij się, że w opisie produktu istnieje znacznik <video>.
Adres filmu musi znajdować się bezpośrednio w atrybucie src="..." elementu video.
Dla wartości kolejności 0 lub liczby ujemnej źródłowy Twig nie wstawia video do galerii.
Jeżeli używasz znacznika <source> wewnątrz video zamiast atrybutu src na samym <video>, obecny parser go nie odczyta.

Szczegóły techniczne

Moduł buduje wspólną listę mediaList ze zdjęć produktu i opcjonalnego video. Miniatura filmu jest oznaczona ikoną play. JavaScript LocalVideoAutoplay używa IntersectionObserver z progiem 0.6, obserwuje elementy [data-video-slide] i integruje się ze Storefront przez zdarzenia PageManager.loaded oraz PageManager.beforeDestroy.