Vimeo Video Showcase - responsywny slider i lightbox z automatycznymi miniaturami

Film, który wysyła klienta na Vimeo, to film, który kosztuje Cię sprzedaż

Filmy produktowe, poradniki i materiały wizerunkowe sprzedają — ale tylko dopóki klient jest jeszcze u Ciebie. Ten moduł go zatrzymuje: filmy stoją w sliderze na stronie głównej, a kliknięcie otwiera lightbox na wierzchu strony, zamiast nowej karty na vimeo.com.

Wklej link. To cała konfiguracja.

• 1. Skopiuj link do filmu z paska adresu albo z przycisku udostępniania na Vimeo.
• 2. Wklej go w „Add a video” i kliknij Dodaj. Podgląd pojawia się, gdy tylko link zostanie rozpoznany.
• 3. Trzeciego kroku nie ma — miniatura i tytuł przychodzą z Vimeo automatycznie, a slider już działa na stronie głównej.

Zostaw pole tytułu puste, a moduł użyje oryginalnego tytułu z Vimeo. Akceptowany jest każdy format linku: vimeo.com/…, player.vimeo.com/video/…, linki do kanałów, grup i showcase'ów, a nawet samo ID filmu.

Filmy niepubliczne, bez upubliczniania ich

Wklej pełny prywatny link — ten z dodatkowym kodem po numerze — a film będzie odtwarzany w Twoim sklepie, pozostając ukrytym na Vimeo. Dokładnie tego potrzebujesz przy poradnikach, materiałach tylko dla klientów albo przy wszystkim, co nie jest jeszcze gotowe na publiczny kanał.

Lightbox zamiast objazdu

Filmy otwierają się w nakładce bez rozpraszaczy, którą zamkniesz kliknięciem albo klawiszem Escape, i są odtwarzane w trybie Do-Not-Track Vimeo (dnt=1). Automatyczne przewijanie slidera zatrzymuje się na czas odtwarzania oraz wtedy, gdy karta przeglądarki zejdzie w tło — nic więc nie przesuwa się za odtwarzaczem.

Slider, który zachowuje się porządnie na każdym ekranie

Sam decydujesz, ile filmów stoi obok siebie na komputerze — od jednego do ośmiu; na mniejszych ekranach desktopowych slider pokaże najwyżej cztery, na tabletach trzy, a na telefonach dwa, z natywnym przewijaniem palcem. Strzałki i kropki są opcjonalne i same znikają, gdy wszystkie filmy i tak mieszczą się na ekranie. Prędkość automatycznego przewijania oraz pauzę po najechaniu kursorem ustawisz w konfiguracji.

Kontrola nad każdym filmem i każdym językiem

Lista „Your videos” pozwala zmieniać kolejność strzałkami w górę i w dół, ukryć film jednym kliknięciem, edytować go albo usunąć. Każdy film możesz ograniczyć do jednego języka sklepu lub pokazać wszystkim — przydatne, gdy poradnik istnieje tylko po niemiecku albo gdy materiał kampanijny jest przeznaczony na jeden rynek. Filmy, których język został później usunięty ze sklepu, zostają oznaczone, więc możesz przypisać im nowy język zamiast po cichu je stracić.

Lekki z założenia

Zero jQuery. Żadnego slicka, żadnej wtyczki modal-video, żadnych zewnętrznych bibliotek, żadnego klucza API. Jeden mały plik CSS i jeden mały plik skryptu, ładowane wyłącznie wtedy, gdy jest co pokazać, i zabezpieczone przed pamięcią podręczną numerem wersji modułu — dzięki temu aktualizacje docierają do powracających klientów bez wymuszonego odświeżania.

Co naprawiła wersja 2.0

Starsze wydania ładowały na każdej stronie jQuery 1.10 z CDN-a, podpinały się jednocześnie pod header i displayHeader, przez co pliki wczytywały się dwa razy, z pustych adresów URL robiły popsute szare slajdy i miały stronę konfiguracji, która nie działała na nowszych wersjach PrestaShop. Tego wszystkiego celowo już nie ma: żadnego jQuery, każdy zapis walidowany i przekierowany, a filmu bez poprawnego linku Vimeo po prostu nie da się zapisać. Aktualizacja przenosi Twoje dotychczasowe filmy automatycznie — identyfikatory zostają odczytane, miniatury pobrane na nowo, a każdy stary slajd bez poprawnego filmu zostaje zachowany i oznaczony jako Hidden, zamiast zniknąć.

Zgodność

PrestaShop 1.7, 8 i 9, w ośmiu językach: angielskim, francuskim, hiszpańskim, holenderskim, niemieckim, polskim, tureckim i włoskim. Po instalacji slider podpina się pod displayHome, działa na dowolnym hooku wyświetlania, jeśli przeniesiesz go w Design → Positions, i można go wstawić bezpośrednio w szablonie za pomocą {widget name='vimeoslider'}. Odinstalowanie usuwa tabelę i ustawienia modułu — Twoje filmy na Vimeo pozostają nietknięte.

Najczęstsze pytania

Czy potrzebuję klucza API Vimeo?

Nie. Wystarczy wkleić link — miniaturę i tytuł moduł pobierze sam.

Czy mogę używać filmów niepublicznych?

Tak — wklej pełny prywatny link razem z kodem po numerze filmu, a będzie się odtwarzał w Twoim sklepie, pozostając niepublicznym na Vimeo.

Gdzie odtwarza się film?

W lightboksie na wierzchu Twojej strony, zamykanym kliknięciem lub klawiszem Escape, więc klient nigdy nie opuszcza sklepu.

Ile filmów widać naraz?

Na komputerze wybierasz od jednego do ośmiu w rzędzie; tablety i telefony automatycznie dostają mniej, z przewijaniem palcem.

Czy film może być widoczny tylko w jednym języku?

Tak. Każdy film możesz ograniczyć do jednego języka sklepu albo pokazać wszystkim.

Czy slider może stanąć gdzie indziej niż na stronie głównej?

Tak. Przenieś go lub skopiuj na dowolny hook wyświetlania w Design → Positions albo umieść w szablonie za pomocą {widget name='vimeoslider'}.

Miniatura wyświetla się jako ciemne tło zastępcze — co teraz?

Vimeo nie odpowiedziało, gdy moduł o nią poprosił. Otwórz formularz edycji filmu, kliknij „Update video” i sprawdź, czy film nie jest prywatny; przy filmach niepublicznych wymagany jest pełny prywatny link.