Prezentacja wideo produktów - slider YouTube, Vimeo i Dailymotion z lightboxem, strona główna lub kolumna boczna, bez jQuery

Twoje filmy produktowe zaczynają sprzedawać

Film umieszczony na stronie produktu zobaczą tylko ci, którzy już na tę stronę trafili. Ten moduł przenosi Twoje filmy produktowe tam, gdzie odwiedzający naprawdę zaczynają: na stronę główną albo do kolumny bocznej widocznej na każdej podstronie.

Każdy slajd używa zdjęcia głównego produktu jako miniatury i prowadzi wprost do tego produktu. Prezentacje, rozpakowania i poradniki przestają być zakopane i zaczynają ściągać ludzi na strony produktów.

Trzy serwisy, żadnego klucza API

Wklejasz link, resztę moduł robi sam. Rozpoznaje YouTube, Vimeo i Dailymotion, a już podczas pisania pojawia się plakietka, która nazywa serwis i pokazuje odczytany identyfikator filmu — jeszcze przed zapisem widzisz, że moduł wychwycił właściwy film.

YouTube jest rozpoznawany w każdej popularnej postaci: watch?v=…, youtu.be/…, Shorts, transmisje live, linki osadzania i linki /v/. Vimeo działa ze zwykłymi linkami oraz z hashem prywatności filmów niepublicznych (vimeo.com/123456789/abcdef1234) — wklej pełny link, a hash zostanie zachowany. Dailymotion przyjmuje swoje standardowe adresy filmów.

Dla żadnego z tych serwisów nie trzeba zdobywać klucza API ani zakładać konta dewelopera.

Lightbox, który nie wyprowadza klienta ze sklepu

Kliknięcie slajdu otwiera film w nakładce bez rozpraszaczy, na Twojej własnej stronie — nikt nie zostaje w połowie wizyty przerzucony na YouTube. Nakładkę zamyka kliknięcie albo klawisz Esc, a jej znaczniki opisują ją jako prawdziwe okno dialogowe dla technologii wspomagających. Przy zamknięciu odtwarzacz jest czyszczony, a nie tylko ukrywany, więc dźwięk naprawdę milknie, zamiast grać dalej w tle.

Filmy z YouTube odtwarzane są przez odtwarzacz youtube-nocookie.com, przyjazny prywatności.

Strona główna, kolumna boczna albo dowolne miejsce w motywie

Domyślnie slider pokazuje się na stronie głównej. Aby umieścić go w kolumnie, wejdź w Wygląd → Pozycje, znajdź Prezentacja wideo produktów i przypnij moduł do displayLeftColumn lub displayRightColumn. Twórcy motywów mogą też wstawić go gdziekolwiek przez {widget name='productvideoslider'}.

W kolumnach bocznych slider automatycznie pokazuje jeden film naraz, niezależnie od ustawienia liczby filmów w rzędzie — wąska kolumna i tak nie pomieści czterech w czytelny sposób.

Responsywność z prawdziwej logiki, nie z pobożnych życzeń

Wybierasz od 1 do 6 filmów w rzędzie na komputerze. Moduł następnie sam zmniejsza tę liczbę w JavaScripcie, mierząc rzeczywistą szerokość okna: najwyżej 2 poniżej 576 px, 3 poniżej 768 px, 4 poniżej 992 px, a powyżej — tyle, ile wybrałeś. Twoje ustawienie to maksimum, a nie sztywna liczba.

Przewijanie działa przez natywne przesuwanie palcem na telefonach i tabletach. Strzałki, kropki, automatyczne przewijanie, jego prędkość i pauza po najechaniu są opcjonalne i konfigurowalne, a sam slider mieści się w szerokości treści Twojego motywu, zamiast rozlewać się od krawędzi do krawędzi.

Kolejność, widoczność i lista, która mówi prawdę

Listę Twoje filmy produktowe porządkujesz strzałkami w górę i w dół, a każdy film możesz ukryć jednym kliknięciem, bez usuwania go. W każdym wierszu widać produkt, serwis i status.

Jeśli produkt przypisany do filmu zostanie później usunięty, lista powie to wprost — ostrzeżeniem "Product deleted" zamiast zostawiać Cię w niepewności. Taki wiersz możesz przypiąć do innego produktu albo skasować.

Nic zepsutego nie trafia na witrynę sklepu

Slajd wyświetla się tylko wtedy, gdy film jest aktywny, a jego produkt jest aktywny w bieżącym sklepie. Pilnuje tego samo zapytanie, złączone ze statusem produktu na poziomie sklepu — produkt wyłączony albo nieprzypisany do sklepu po prostu wypada. Usunięcie produktu automatycznie kasuje jego filmy.

Wersja 2 zamknęła nieuwierzytelniony punkt zapisu

Warto to powiedzieć wprost, bo to prawdziwy powód, żeby zaktualizować moduł.

Wersja 1.x zawierała samodzielny plik ajax.php, którego kontrola uwierzytelnienia przechodziła za każdym razem, gdy przesłano identyfikator produktu. Dowolny anonimowy odwiedzający mógł wysłać metodą POST identyfikator produktu i dowolny tekst, a ten trafiał prosto do rdzeniowej tabeli product. Ten sam plik doklejał wartość z żądania wprost do zapytania SQL i wywoływał error_reporting(0), ukrywając wszystkie błędy, które przy okazji wywoływał.

Co gorsza, zapisana wartość trafiała bez zmian do atrybutu href, więc link wykorzystujący wrogi pseudo-protokół uruchamiający kod wykonywał się po kliknięciu.

Tego pliku już nie ma. Linki są teraz walidowane i zapisywane są wyłącznie rozpoznane adresy YouTube, Vimeo i Dailymotion, każda akcja w panelu przechodzi przez standardowy token pracownika, a dane wyjściowe są escape'owane w szablonach.

Moduł nie modyfikuje już tabeli produktów PrestaShop

Wersja 1.x przy instalacji wykonywała ALTER TABLE ps_product ADD product_video_field_1 i nigdy tej kolumny nie usuwała — po odinstalowaniu w rdzeniowej tabeli produktów zostawała ona na stałe.

Wersja 2 trzyma swoje dane we własnej tabeli. Aktualizacja przenosi wszystkie istniejące filmy z rdzeniowej kolumny, wykrywa serwis każdego z nich, a następnie usuwa tę kolumnę. Odinstalowanie też ją usuwa, gdyby jakimś cudem przetrwała. Każdy przeniesiony link, którego nie udało się rozpoznać, jest ukrywany zamiast pokazywany jako zepsuty, dzięki czemu poprawisz go i włączysz z powrotem z poziomu listy.

Front sklepu stracił wszystkie zależności

Wersja 1.x ładowała jQuery 1.4.4, Fancybox i wtyczkę mousewheel na każdej stronie sklepu, wchodząc w konflikt z jQuery, które miał już Twój motyw. Tego wszystkiego nie ma. Front to czysty JavaScript i CSS bez żadnych zależności — po jednym małym pliku.

Moduł rejestruje te dwa pliki tylko na stronach, na których faktycznie ma coś do pokazania. Warto jednak wiedzieć: jeśli korzystasz z opcji Łącz, kompresuj i buforuj, PrestaShop scala zasoby wszystkich modułów we wspólne paczki, więc kod tego modułu i tak pojedzie w takiej paczce razem z resztą — tak działa sama platforma, moduł nie może z tego zrezygnować.

Naprawione są też dwa inne błędy wersji 1.x: reklamowane wyświetlanie w lewej i prawej kolumnie nigdy nie zostało faktycznie zarejestrowane, więc nie robiło zupełnie nic; a logika strony głównej brała pierwsze N produktów z kategorii Home i dopiero potem szukała filmów, przez co sklep, którego pierwsze produkty nie miały filmów, widział pusty slider.

Zgodność

PrestaShop od 1.7 do 9, w ośmiu językach: angielskim, francuskim, hiszpańskim, holenderskim, niemieckim, polskim, tureckim i włoskim.

Bez nadpisań, bez modyfikacji rdzenia i motywu, bez jQuery. Odinstalowanie usuwa tabelę modułu i jego ustawienia oraz kasuje starą kolumnę z rdzenia — baza danych wraca do stanu sprzed instalacji.

Najczęściej zadawane pytania

Czy potrzebuję klucza API do YouTube, Vimeo lub Dailymotion?

Nie. Wklejasz zwykły link do filmu, a moduł sam rozpoznaje serwis. Dla żadnego z tych trzech nie trzeba zdobywać klucza ani zakładać konta dewelopera.

Gdzie może pojawić się slider?

Domyślnie na stronie głównej, w lewej lub prawej kolumnie po przypięciu go w Wygląd → Pozycje, albo w dowolnym miejscu motywu przez {widget name='productvideoslider'}.

Dlaczego w kolumnie bocznej widzę tylko jeden film naraz?

To celowe. Kolumny boczne są wąskie, więc slider zawsze pokazuje tam jeden film, niezależnie od ustawienia liczby filmów w rzędzie.

Ustawiłem sześć filmów w rzędzie, a widzę mniej.

Liczba filmów w rzędzie to maksimum dla komputera. Moduł mierzy rzeczywistą szerokość okna w JavaScripcie i pokazuje najwyżej 2 filmy poniżej 576 px, 3 poniżej 768 px i 4 poniżej 992 px.

Mój film z Vimeo nie odtwarza się w lightboksie.

Jeśli jest niepubliczny, link musi zawierać jego hash prywatności, na przykład vimeo.com/123456789/abcdef1234 — wklej pełny adres z przycisku udostępniania. Filmu, którego właściciel wyłączył osadzanie, nie da się odtworzyć na żadnej stronie.

Link nie został przyjęty.

Wklej pełny adres z paska przeglądarki albo z przycisku udostępniania. Plakietka pod polem od razu mówi, czy link został rozpoznany, i pokazuje odczytany identyfikator filmu, więc nie musisz zapisywać i liczyć na szczęście.

Przy jednym z filmów widzę ostrzeżenie "Product deleted".

Produkt, na który wskazywał ten film, został usunięty. Edytuj wiersz i wybierz inny produkt albo skasuj wiersz.

Slider w ogóle się nie pokazuje.

Wyświetla się tylko wtedy, gdy przynajmniej jeden film jest aktywny, a jego produkt jest aktywny w bieżącym sklepie. Sprawdź kolumnę statusu na liście oraz status samego produktu.

Co dzieje się z kolumną, którą wersja 1 dodała do mojej tabeli produktów?

Aktualizacja przenosi z niej Twoje filmy, a następnie ją usuwa. Odinstalowanie również ją kasuje. Baza danych kończy w takim stanie, w jakim była, zanim moduł w ogóle został zainstalowany.