Jak dodać film do szczegółów produktu | Demo + Instrukcja

Spis treści:

• Filmiki w szczegółach towaru – nie tylko z YouTube!
• Co to jest kod osadzania (embed code)?
• Skąd wziąć poprawny link do filmu umieszczonego na platformie Vimeo?
• Błędy odtwarzacza - „Sorry, we’re having a little trouble.”, „Sign in to Vimeo to watch this video”
• Jak poprawnie ustawić prywatność filmu na Vimeo?
• Gdzie pojawia się filmik w szablonach Comarch e-sklep?
• Przykład działania video w funkcjonującym demo
• Jak szablony Topaz, Szafir i Rubin radzą sobie z wyświetlaniem filmów?
• Problem z miniaturą filmu w szablonie Rubin
• Zalety korzystania z Vimeo

1. Filmiki w szczegółach towaru – nie tylko z YouTube!

W dokumentacji Comarch e-Sklep znajdziemy instrukcję, jak dodać film z YouTube do szczegółów produktu ( zobacz instrukcję ). Warto jednak zaznaczyć, że to tylko przykład – nie oznacza to, że można używać wyłącznie YouTube! Instrukcja pokazuje, jak dodać film z tej konkretnej platformy, ale umieszczenie filmu zadziała również z innymi źródłami wideo, o ile korzystają one z udostępniania filmów za pomocą „kodu osadzania”.

2. Co to jest kod osadzania (embed code)?

Kod osadzania (ang. embed code) to fragment HTML, zazwyczaj w formacie <iframe>...</iframe>, który można umieścić na dowolnej stronie internetowej w celu bezpiecznego zaprezentowania treści wraz z powiązanymi z nią funkcjonalnościami, pochodzące z obcej strony. Treściami mogą być np. wykresy, prezentacje, mapy, posty z mediów społecznościowych, a nawet różnego rodzaju formularze (np. pochodzące od banków i umożliwiające e-płatność po podaniu danych karty). W naszym przypadku jest to odtwarzacz filmów z rozbudowanymi możliwościami – pauzowania, powiększenia okna, dalszego udostępniania filmu itd.

3. Skąd wziąć poprawny link do filmu umieszczonego na platformie Vimeo?

Trzeba wpierw pobrać pełen „kod embed” i wydobyć z niego adres URL.

➡️ Tego kodu nie wklejamy do ERP!

Z jego wnętrza należy wydobyć URL wskazujący na odtwarzacz wraz z ID filmu. Możesz np. wkleić skopiowany kod HTML do notatnika i następnie zaznaczyć oraz skopiować do pamięci sam link.

Jego składnia powinna wyglądać tak:

https://player.vimeo.com/video/id_twojego_filmu

Tak wyodrębniony link możesz już wkleić w systemie ERP Comarch jako wartość atrybutu o nazwie "PRODUCT_MOVIE".

Sklep Comarch sam zadba o to, aby na szczegółach towaru znalazła się pełna postać kodu osadzania (HTML - iframe) zawierająca URL pobrany z tego atrybutu.

4. Błędy odtwarzacza - „Sorry, we’re having a little trouble.”, „Sign in to Vimeo to watch this video” - na co wskazują?

Jeśli po osadzeniu filmu z Vimeo w Comarch e-Sklep w miejscu odtwarzacza wideo pojawiają się podobnego typu komunikaty, to niemal na pewno oznacza, że film nie ma odpowiednich uprawnień do  publicznego odtwarzania.

Aby to poprawić, trzeba zmienić ustawienia prywatności filmu.

5. Jak poprawnie ustawić prywatność filmu na Vimeo?

📌 Ważne: Vimeo może domyślnie ustawiać Twoje importowane filmy jako "prywatne" – czyli dostępne tylko dla ciebie (właściciela konta). Możesz widzieć swoje filmy wideo w swoim sklepie gdy jesteś zalogowany do Vimeo, ale pozostali użytkownicy zobaczą błąd. Aby film był dostępny dla każdego, musi mieć uprawnienia publiczne.

Możesz zmienić w ustawieniach swojego konta aby wszystkie dodawane w przyszłości filmy były publiczne, aby nie musieć o tej zmianie pamiętać:

Jeżeli jeszcze nie dodałeś na Vimeo swojego filmu, to zaraz po załadowaniu go na serwer powinieneś zobaczyć mały komunikat pop-up (np. w prawym dolnym rogu panelu z filmami Vimeo) w którym również możesz od razu zmodyfikować dostępność:

6. Gdzie pojawia się filmik w szablonach Comarch e-sklep?

To zależy od wersji szczegółów produktu jaki został wybrany w szablonie domyślnym lub jaki wybrałeś sam w kreatorze tworząc szablon we własnym zakresie. W niektórych wersjach filmy są wyświetlane między zdjęciami produktu (w karuzeli), w innych – jak w naszym demo – tworzona jest osobna sekcja w opisie produktu nazwana "FILMY", do której trafiają wszystkie osadzone materiały wideo.

7. Przykład działania video w funkcjonującym demo

Aby sprawdzić jak działa pokazywanie filmów pochodzących z Vimeo w jednym z domyślnych szablonów Topaz, możesz zajrzeć na nasze demo:

Film działa poprawnie, mimo że pochodzi z Vimeo, a nie z YouTube. To dowód, że Comarch e-Sklep wspiera różne źródła wideo, pod warunkiem że platforma z filmami zadbała o odtwarzacze z chociaż podstawową funkcjonalności odtwarzania na obcych stronach.

8. Jak szablony Topaz, Szafir i Rubin radzą sobie z wyświetlaniem filmów?

Poniżej prezentujemy, jak w praktyce zachowują się domyślne szablony Comarch e‑Sklep: Topaz, Szafir i Rubin w kontekście wyświetlania filmów dodanych za pomocą atrybutu PRODUCT_MOVIE.

9. Problem z miniaturą filmu w szablonie Rubin

W przypadku szablonu Rubin zauważyliśmy drobne niedociągnięcie – miniatura filmu (tzw. "mały podgląd") nie wczytuje się prawidłowo i wyświetla błąd, natomiast duży widok, po kliknięciu w miniaturę, działa bez zarzutu.

Problem ten wynika z faktu, że szablon przy miniaturze automatycznie dopisuje do linku z filmem dodatkowy parametr &autohide=1, co w niektórych przypadkach może zakłócać renderowanie miniatury.

To jednak niewielkie niedopatrzenie – Rubin jest najnowszym z szablonów, niedawno udostępnionym przez Comarch, więc tego typu drobne błędy mogą się jeszcze zdarzać. Parametr ten prawdopodobnie został dodany z myślą o YouTube, gdzie bywa stosowany, jednak jego obecność może ograniczać kompatybilność z innymi platformami. Na szczęście problem można łatwo usunąć, modyfikując kod szablonu.

Jeśli napotkasz podobny problem – lub inny, którego nie zauważyliśmy podczas przygotowywania tego materiału – zapraszamy do kontaktu. Chętnie przeanalizujemy sytuację i pomożemy w rozwiązaniu problemu.

10. Zalety korzystania z Vimeo

Jedną z zalet Vimeo jest możliwość personalizacji odtwarzacza, który będzie odtwarzał film na Twojej stronie. Serwis pozwala m.in. na:

• wyłączenie przycisków oraz opcji typu „prędkość”, „powiększenie”, „kod osadzania”
• ukrycie logo Vimeo
• zmianę kolorów elementów odtwarzacza np. do spójnej ze skórką Twojego sklepu

Na zrzucie poniżej pokazano 3 proste kroki, gdzie to ustawić:

Uwaga: Opcje personalizacji osadzanych odtwarzaczy są dostępne tylko dla płatnych planów. Aby korzystać z pełnej kontroli nad wyglądem i funkcjami odtwarzacza, należy wykupić co najmniej plan Standard. Plan Starter oferuje podstawowe możliwości personalizacji, takie jak zmiana rozmiaru odtwarzacza czy kolorów tekstu i paska odtwarzania, ale nie pozwala na ukrycie logo Vimeo czy przycisków społecznościowych.