Menü

Erstellt: 08.11.2018Zuletzt geändert: 13.11.2018403x angesehen

Videos der Artikelbilderverwaltung hinzufügen von Youtube, Vimeo, Facebook etc.

Shopansicht eingebundenes Video in den Bilder
Administration Grundeinstellungen
Administration Artikelverwaltung Bilder URL und Schema auswählen
Shopansicht Popup-Button Orientierung
Shopansicht Popup-Button Position
Admin Grundeinstellung JQuery Resizer
Shopansicht Produktdetails Video Anwendungsbeispiel
Shopansicht Produktdetails Thumbnail Anwendungsbeispiel
Shopansicht Produktdetails Zwei Video Anwendungsbeispiele
Shopansicht Artikel-Listing mit Video Badge
Youtube URL Ausgabe für IFrames
Vimeo URL Ausgabe für IFrames
Facebook URL Ausgabe für IFrames

Produktbeschreibung

Youtube, Vimeo oder Facebook-Videos im Produkt ohne viel Aufwand anzeigen? Mit diesem Modul kein Problem! Manchmal ist es sinnvoll dem Shopbesucher und damit potenziellen Käufer mehr Infos über das gewünschte Produkt an die Hand zu geben. Videos sind der einfachste Weg um viele Informationen möglichst schnell und unterhaltsam zu übermitteln. Bislang war es jedoch nicht einfach, Videos in einer sinnvollen Reihung zwischen Bilder zu legen. Holen Sie sich jetzt dieses Modul und zeigen Sie Ihren Kunden mit knackigen Videos, was hinter Ihren Produkten und Dienstleistungen steckt. Präsentieren Sie professionell einen guten Mix aus Bildern und Videos, um Ihren Shopbesucher zu einem Stammkunden zu machen. Dieses Modul ist so offen gestaltet, dass Sie auch beliebige andere Streaming Services (sofern diese IFrames unterstützen) ohne Programmierarbeiten oder viel Aufwand in Ihren Shop integrieren können. Sie können in den Grundeinstellungen dieses Modules aus dem Ausgabeschema Youtube, Vimeo, Facebook und zwei weiteren frei gestaltbaren Schemen wählen. In der Bilderverwaltung Ihrer Produkte können Sie durch simples Selektieren eines Bildes das Ausgabeschema sowie die Ziel-URL und die Thumbnail-URL Ihres Videos definieren. Fertig! Schon wird das Video an der gewünschten Position in Ihrem Shop statt des Bildes angezeigt. Sollten Sie das Video an einer anderen Position bzw. nach einem anderen Bild haben wollen, so können Sie das Bild ganz einfach mittels Drag and Drop verschieben.

Neu in der aktuellen Version V1.4.1
Videos können nun beim Scrollen oder klicken auf andere Produktbilder (Funktionen sich konfigurierbar), automatisch und Videoplattform übergreifend gestoppt werden! Außerdem kann nun ein Vergrößern Symbol aktiviert werden, durch welches man auch aus der Videoansicht zu dem Bild-Popup kommt.

TIPP:
Sobald ein externes Thumbnail vorhanden ist, wird das im Shop hinterlegte Bild dadurch ersetzt. Dies kann von Vorteil sein, wenn Sie z.B. Thumbnails von Youtube o.ä verwenden möchten. Youtube ist bei dem URL Aufbau sehr benutzerfreundlich. Es können sowohl für Videos als auch für Thumbnails immer feste URLs verwendet werden, wodurch Sie in der Lage sind, nur noch mit der Video-ID zu arbeiten bzw. diese in der Bilderverwaltung der Artikel zu hinterlegen. Geändert werden muss hierzu lediglich das Ausgabeschema in den Grundeinstellungen.

Verfügbar im Store von Shopware

Aktuelle Version: V1.4.1
Direkt zum Modul in dem Shopware Store

Konfiguration

Administration Einstellungen Grundeinstellungen Menü
Im Administrationsbereich unter Einstellungen -> Grundeinstellungen -> Videos der Artikelbilderverwaltung...(Modulnamen) können Sie alle Elemente vom Modul konfigurieren.

Administration Grundeinstellung JQuery Resizer aktivieren
Im ersten Konfigurationspunkt können Sie bestimmen, ob das zusätzliche Berechnungsscript zur genaueren Anpassung des Video IFrames zugeschaltet wird. Das zusätzliche JQuery-Script ermöglicht das permanente Anpassen der Videogröße an den umgebenden Rahmen.

Administration Grundeinstellung JQuery Viewport-Watcher
Im zweiten Konfigurationspunkt können Sie den JQuery Viewport-Watcher aktivieren. Dieser überwacht das Video, ob es gerade vom User gesehen wird. In zwei Optionen können Sie festlegen, ob das Video durch das Weiterschalten der Bilder gestoppt wird oder durch das Scrollen der Seite.
Diese Optionen geben Ihrem Shop-Besucher die Möglichkeit, ein Video laufen zu lassen und sich parallel die Artikelbeschreibung durchzulesen, sofern das von Ihnen gewünscht wird.

Administration Grundeinstellung Badge aktivieren
Im nächsten Konfigurationspunkt können Sie einstellen ob der Badge im Produktlisting angezeigt werden soll. Der Badge wird immer dann angezeigt, wenn irgend ein Video in der Bilderverwaltung des entsprechenden Produktes konfiguriert ist.
(Mehr dazu unter dem Punkt "Badge im Produktlisting" in dieser Anleitung)

Administration Grundeinstellung Button Orientierung
Mit dem Konfigurationspunkt "Popup Button anzeigen" können Sie einstellen, ob ein Vergrößern-Button neben dem Video ausgegeben werden soll. Der Shop-Besucher hat, damit die Möglichkeit auf das Bild-Popup zu gelangen und kann von dort aus zwischen den Bilder/Videos hin und her schalten.
Es stehen zwei Optionen zur Verfügung:
Mit "Orientierung am äußeren Rahmen" wird der Button außerhalb des IFrames angezeigt.
Mit der Option "Orientierung am IFrame" wird der Button innerhalb des IFrames angezeigt. Da hier eine genaue Berechnung der IFrame Größe erforderlich ist, funktioniert diese Option nur korrekt, wenn der JQuery Resizer ebenfalls aktiv ist.

Wenn Sie das Symbol des Buttons verändern möchten, können Sie dies in den Textbausteinen tun. Suchen Sie hierzu nach dem Begriff "embvid_popup_button"

Administration Grundeinstellung Button für Popup
Mit dem Konfigurationspunkt "Popup Button Position" kann der Popup Button, welcher in dem vorherigen Konfigurationspunkt bestimmt wurde, in der Position verändert werden. Ihnen stehen hier vier Optionen zur Verfügung.

Administration Grundeinstellung IFrame für Youtube, Vimeo und Facebook
Nachfolgend besitzt das Modul drei Ausgabeschemas, welche für Youtube, Vimeo oder Facebook Videos konfiguriert werden können. Der Platzhalter
"##url_to_replace##" ersetzt dabei die Video-URL,
"##thumbnail_to_replace##" ersetzt die Bild-URL,
welche in der Bilderverwaltung des Artikels gepflegt werden können.
Das Thumbnail (sofern angegeben) ersetzt das Bild!

Administration Grundeinstellung zwei freie IFrames
Mit den beiden freien Ausgabeschemas haben Sie die Möglichkeit andere Plattformen sowie, sofern vorhanden, einen eigenen Streaming Service zu integrieren. Genau wie bei den drei obigen Ausgabeschemas wird der Platzhalter
"##url_to_replace##" für Video-URLs und
"##thumbnail_to_replace##" für Bild-URLs, durch die URL in der Ausgabe ersetzt.

Videos und Thumbnails im Artikel hinterlegen

Administration Menü Artikel Übersicht
Unter dem Menüpunkt "Artikel" -> "Übersicht" können Sie beliebige Artikel editieren.

Administration Artikel-Übersicht und Details mit Bilderverwaltung
Klicken Sie zum editieren der Artikelbilder auf den Bleistift in der Artikel-Übersicht eines Artikels, in der sich öffnenden Seite "Artikeldetails" klicken Sie auf den Reiter "Bilder".

Administration Artikel Bilderverwaltung Video Ausgabeschema und URL Pflegen
Nun können Sie ein Bild durch anklicken auswählen, auf der rechten Seite unter den "Freitextfelder" finden Sie das Ausgabeschema sowie die URLs.

Administration Bilderverwaltung und Grundeinstellung mit Ausgabeschema
Sie können als Ausgabeschema zwischen den konfigurierten Schemata aus den Grundeinstellungen wählen

Administration Artikel Bilderverwaltung URL zum Video Pflegen
Tragen Sie als "Video URL" das Video ein, welches Sie in Ihren Shop einbetten möchten. Als Beispiel verwenden wir folgende URL:
https://www.youtube-nocookie.com/embed/in1MLLQsCNI Bitte beachten Sie das es sich NICHT um dieselbe URL von Youtube handelt, welche Sie im Browser sehen können!
Hier ein Beispiel
Folgendes Video können wir im Browser direkt auf Youtube öffnen:
https://www.youtube.com/watch?v=in1MLLQsCNI
Die URL zum Einbetten in ein IFrame lautet allerdings:
https://www.youtube-nocookie.com/embed/in1MLLQsCNI
Weitere Infos zum Einbetten von Videos finden Sie ganz unten in dieser Anleitung unter "Tipps zum Einbinden der Videos".

Administration Artikel Bilderverwaltung Thumbnail zum Video Pflegen
Als "Thumbnail URL" können Sie eine URL zu einem Bild von z.B. Youtube verwenden. Youtube lässt sich wesentlich leichter in der URL (Bilder sowie Videos) bedienen, daher können Sie folgenden Aufbau verwenden:
https://img.youtube.com/vi/in1MLLQsCNI/hqdefault.jpg(oder mqdefault.jpg)
Die Video-ID " in1MLLQsCNI " lässt sich leicht aus der URL Identifizieren.
Mehr Informationen zu Thumbnails der Video-Portale finden Sie in dieser Anleitung unter "Tipps zum Einbinden der Thumbnails"

Shopansicht Produktdetails Konfigurationsbeispiel für Youtube Videos
Ist eine "Video URL" vorhanden, wird das Artikelbild in der Produktdetailansicht in Ihrem Shop, durch das IFrame (gemäß Grundeinstellungen) ersetzt. Gleiches gilt für die Popup Version des Bildes. Bitte beachten Sie dass, sofern kein Ausgabeschema in dem Bild mit der Video-URL ausgewählt wurde, immer Youtube verwendet wird.

Shopansicht Produktdetails Konfigurationsbeispiel für Youtube Thumbnails
Ist eine "Thumbnail URL" vorhanden, wird das Artikelbild im Produkt-Listing (sofern es das "Vorschau" Bild ist) und in der Produktdetailansicht (nur Thumbnail) durch das externe Bild (gemäß Grundeinstellungen) ersetzt. In den Grundeinstellungen ist, sofern Sie keine URL direkt konfigurieren möchten, keine weiteren Einstellungen zum Thumbnail nötig.

Shopansicht Artikeldetails zwei Beispiele der Konfiguration mit Youtube Videos und Thumbnails
Zwei Konfigurationstipps:
Durch die Schemen, welche Sie in den Grundeinstellungen verändern können, ist es möglich so ziemlich alle Wünsche der Konfiguration abzudecken.

Konfiguration: URL in der Bilderverwaltung
Möchten Sie die vollständige URL in die Bilderverwaltung einfügen (Default)? Die URL der Bilderverwaltung wird durch einen Platzhalter über die Schemen der Grundeinstellung ersetzt und an passender Stelle ausgegeben.

Konfiguration: URL im Schema, Video-ID in der Bilderverwaltung
Möchten Sie aber einen Teil der URL bereits in den Grundeinstellungen hinterlegen, damit Sie nur noch mit der Video-ID arbeiten können? Tragen Sie hierfür einfach die Video-ID statt der vollständigen URL in der Bilderverwaltung ein. Das Schema der Grundeinstellung ersetzt die Video-ID mittels Platzhalter und fügt diese genau an der richtigen Stelle in der URL ein, welche Sie zuvor in den Grundeinstellungen hinterlegt haben.

Badge im Produktlisting

Shopansicht Artikeldetails mehrere Bilder mit Playbutton als Overlay
Sofern das betreffende Produkt mehrere Bilder hat, wird das Thumbnail Bild dazu mit einem entsprechenden Overlay versehen, damit der Shop-Besucher weiß, wo sich das Video befindet.

Shopansicht Artikel-Listing Play-Badge über Artikelbild
Um Ihren Shop-Besucher auch vor dem Öffnen eines Produktes zu signalisieren, welches Produkt Videos enthält, wird im Produktlisting ein Play-Badge angezeigt. Diese Funktion ist standardmäßig aktiviert, kann aber über die Grundeinstellungen deaktiviert werden. Das Badge enthält ein Play Symbol, welche lediglich in Form eines HTML Codes ausgegeben wird. Der Inhalt des Badges kann über die Textbausteine geändert werden.

Administration Textbaustein Menü
Im Administrationsbereich unter Textbausteine haben Sie die Möglichkeit den Badge zu editieren. Öffnen Sie dafür unter Einstellungen -> Textbausteine den Editor.

Administration Textbausteine Editor such nach Play-Badge
Klicken anschließend auf den Ordner Frontend und geben in der Suche den Schlüssel "product_listing_playbadge" ein, es wird nun das änderbare Badge angezeigt. Standardmäßig ist ein typischer Playbutton voreingestellt, dieser Besitzt den HTML Code: ►

Administration Textbausteine Doppelklick auf Badge-Zeile
Klicken Sie zum Ändern doppelt auf die Zeile, sofern Sie einen Text statt dem Play-Button angezeigt haben möchten.

Administration Textbausteine Multilinguale Werte verändern
Sofern Sie andere Texte oder Symbole für andere Sprachen verwenden möchten, können Sie mit klick auf den Globus die Texte für alle Sprachen verändern.

Tipps zum Einbinden der Videos

Im Administrationsbereich in Ihrem Shop in den Grundeinstellungen können Sie das Schema des IFrames ändern. In der Bilderverwaltung eines beliebigen Artikels kann die URL eingetragen werden. Da aber die URL für das IFrame NICHT die URL des z.B. Youtube Videos ist, hier eine kleine Anleitung wie man am schnellsten die URL findet.

Youtube

Youtube IFrame URL finden
Klicken Sie auf Youtube auf ein beliebiges Video. Unterhalb vom Abonnieren Button, finden Sie den "Teilen" Button, klicken Sie darauf. Es erscheint darunter eine Box, klicken Sie auf "Einbetten", anschließend erscheint der vollständige Code mit dem IFrame. Die URL, welche Sie nutzen können finden Sie zwischen den "" im src="" Attribut.

Vimeo

Vimeo IFrame URL finden
Klicken Sie auf ein Vimeo Video, auf der rechten Seite oben, innerhalb vom Video, finden Sie den "Teilen" Button. Klicken Sie auf den Button, es öffnet sich nun ein Fenster. Im Fenster sehen Sie den vollständigen IFrame Code zum Einbinden. Die nutzbare URL finden Sie zwischen den "" in dem src="" Attribut.

Facebook

Facebook IFrame URL finden
Klicken Sie auf ein beliebiges Video bei Facebook, suchen Sie die drei Punkte (entweder oberhalb oder unterhalb des Videos). Klicken Sie auf die drei Punkte, es öffnet sich ein Menü direkt daneben, klicken Sie auf "Einbetten". Im darauffolgenden Fenster finden Sie den vollständigen IFrame Code, die nutzbare URL finden Sie zwischen den "" in dem src="" Attribut.

Tipps zum Einbinden der Thumbnails

Jeder Plattform besitzt eigene Routinen, wodurch es nicht möglich ist, eine best practice für alle Plattformen gleichermaßen zu erstellen. Hier ein paar Tipps, um möglichst schnell an die Thumbnails zu kommen.

Youtube

Thumbnail von Youtube Videos finden
Bei Youtube benötigen Sie lediglich die Video-ID, diese können Sie in jeder Browser URL auf der Plattform finden. Wenn Sie z.B. folgendes Video bei Youtube öffnen:
https://www.youtube.com/watch?v=in1MLLQsCNI
so lautet die Video-ID: in1MLLQsCNI
Die Video-ID können Sie wie folgt, zum aufrufen des Thumbnails verwenden:
https://img.youtube.com/vi/in1MLLQsCNI/hqdefault.jpg

Vimeo

Thumbnail von Vimeo Videos finden
Bei Vimeo funktioniert das ganze über eine API. Es ist aber auch möglich die API direkt anzusprechen. Wenn Sie also z.B. folgendes Video öffnen:
https://vimeo.com/74182374
die Video-ID lautet: 74182374
Möchten Sie hiervon die Thumbnail haben, dann können Sie mit folgender URL die API ansprechen:
https://vimeo.com/api/oembed.xml?url=https%3A//vimeo.com/74182374
Nun sollte Ihr Browser den XML Inhalt anzeigen. Suchen Sie die Zeile mit dem Namen "thumbnail_url". In der Zeile befindet sich die URL, welche Sie für das Thumbnail verwenden können:
https://i.vimeocdn.com/video/448474408_640.webp

Facebook

Thumbnail von Facebook Videos finden
Bei Facebook funktioniert die Sache noch eine Spur anders. Hier sind die Videos immer in Posts eingebettet, zuerst muss man also an die Video-ID kommen. Die einfachste Möglichkeit ist das Video zu vergrößern (Seitenansicht, nicht Vollbild!), anschließend können wir im Browser die URL erkennen:
https://www.facebook.com/shopware/videos/1445310582174825/
die Video-ID lautet: 1445310582174825
Sprechen wir nun die API von Facebook mit folgender URL an:
graph.facebook.com/1445310582174825/picture
ändert sich nach Aufruf im Browser auch gleich die URL zu folgender:
https://scontent.xx.fbcdn.net/v/t15.5256-10/p168x128/19358585_1445314422174441_8086207972688003072_n.jpg?_nc_cat=104&_nc_ht=scontent.xx&oh=ab147d445ad696ba0a6212accbbd50a7&oe=5C7D6C78
Dies ist die URL, welche Sie zum Aufruf des Thumbnails verwenden können.

Tags

Video einbettenVideosBilderShopwareArtikelverwaltungBilderverwaltungBilder um Videos ergänzen
instagram