[im3] ⭐ Nowa galeria produktowa [Youtube] ⭐

Galeria produktu z miniaturami, pełnoekranowym podglądem oraz filmem YouTube automatycznie pobieranym z iframe w opisie produktu.

Do czego służy moduł?

Nowa galeria produktowa [Youtube] zastępuje standardową galerię produktu wersją, która może wstawić film YouTube pomiędzy zdjęcia produktu. Klient nadal korzysta z miniaturek, strzałek i pełnoekranowego podglądu zdjęć.

Jak uruchomić film YouTube w galerii?

Dodaj film YouTube do opisu produktu jako kod iframe.
Upewnij się, że adres iframe ma format YouTube /embed/ID_FILMU.
W module włącz opcję Włącz lub wyłącz video w galerii.
Ustaw pozycję filmu polem Kolejność wyświetlanego video.
Dopasuj wysokość filmu i pozostałe opcje odtwarzania.

html

<iframe src="https://www.youtube.com/embed/VIDEO_ID" title="Film produktu" allowfullscreen></iframe>

W instrukcji jest gotowe środowisko testowe

Nie potrzebujesz prawdziwego produktu ani realnego filmu do sprawdzenia ustawień. Symulator ma 6 syntetycznych zdjęć i testowy slajd YouTube, więc od razu możesz klikać miniatury, zmieniać pozycję filmu i sprawdzać strzałki.

Konfiguracja modułu

Najważniejsze ustawienia galerii

Pozycja miniaturek zmienia układ desktopowy: lewa / prawa / pod zdjęciem.
Strzałki nawigacji mają osobne ustawienia dla desktopu i mobile.
Opis zdjęcia dotyczy widoku pełnoekranowego; kliknij duże zdjęcie w symulatorze.
Kolejność video decyduje, przed którym zdjęciem ma zostać wstawiony film.

Ustawienia video — ważne zachowanie źródłowe

Pole „przyciski z video” działa odwrotnie niż może sugerować nazwa

W aktualnym Twig zaznaczenie Włącz lub wyłącz przyciski z video dodaje do adresu YouTube parametr controls=0, czyli ukrywa standardowe kontrolki odtwarzacza. Instrukcja celowo pokazuje dokładnie to zachowanie.

Autoplay: Twig dodaje autoplay=1&mute=1 po zaznaczeniu pola. Niezależnie od tego JavaScript modułu obserwuje slajd z filmem przez IntersectionObserver i ładuje widoczne video z autoplay.

Loop: dodawane są parametry loop=1 i playlist=ID_FILMU.

Jeżeli film się nie pojawia

Sprawdź, czy w opisie produktu znajduje się iframe.
Sprawdź, czy src zawiera fragment embed/.
Moduł bierze pierwszy iframe znaleziony w opisie.
Przy wartości kolejności większej od liczby zdjęć film jest dopisywany na końcu.
Przy kolejności 0 lub ujemnej aktualna logika źródłowa nie dodaje filmu do listy.

Szczegóły techniczne

Pole szerokości filmu obecnie nie wpływa na wynik

Config zawiera pole Szerokość filmiku w pixelach, ale aktualny Twig nie używa moduleConfig.videowidth. Iframe ma na sztywno width: 100%. Z tego powodu pole jest w symulatorze oznaczone jako S, a nie LIVE.