Menü

Erstellt: 08.11.2018Zuletzt geändert: 13.11.20181225x angesehen

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

Shopansicht eingebundenes Video in den Bilder
Admin Grundeinstellungen
Admin 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 Plugin 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 und effektivste 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 diese Erweiterung für Ihren Shop 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 Ihre Shopbesucher zu Stammkunden zu machen. Dieses Modul ist so offen gestaltet, dass Sie auch beliebige andere Video 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 hinterlegen. Fertig! Schon wird das Video an der gewünschten Position in Ihrem Shop statt des Bildes angezeigt. Möchten Sie lieber ein eigenes Thumbnail und nicht das von z.B. YouTube verwenden? Lassen Sie die Thumbnail-URL einfach leer und nutzen Sie das hochgeladene Bild aus Ihrem Shop! 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. Über die Grundeinstellungen haben Sie die Möglichkeit einen Viewport Watcher zu aktivieren, dieser überprüft, ob sich das Video im sichtbaren Bereich befindet, wenn nein wird das Video gestoppt. Dieses Feature funktioniert Videoplattform übergreifend.

Verfügbar im Store von Shopware

Aktuelle Version: V1.4.4
Direkt zum Plugin in den Shopware Store


Konfiguration

Grundlegendes

Admin Einstellungen Grundeinstellungen Menü
Nach der Installation finden Sie im Administrationsbereich unter Einstellungen -> Grundeinstellungen -> Videos der Artikelbilderverwaltung...(Pluginname) alle Einstellmöglichkeiten vom Plugin.

Admin Textbaustein Menü
Im Administrationsbereich unter Textbausteine haben Sie die Möglichkeit den Badge zu editieren. Öffnen Sie dafür unter
Einstellungen -> Textbausteine
den Editor.
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: ►
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.

Admin Artikel Bilderverwaltung Video Attribute
In der Artikelverwaltung unter dem Reiter "Bilder" finden Sie nach dem Klick auf ein Bild unter dem Punkt "Freitextfelder" alle Einstellmöglichkeiten um ein Bild durch ein Video zu ersetzen.

Überblick der Grundeinstellungen

Admin Grundeinstellungen Überblick
Die Grundeinstellungen sind in vier Abschnitte unterteilt.

Admin Grundeinstellung Plugin Handling
Im ersten Abschnitt können Sie einstellen, ob die Multishop-Fähigkeit aktiviert werden soll.

Admin Grundeinstellung Plugin-Einstellungen
Im zweiten und dritten Abschnitt können Sie verschiedene Einstellungen vornehmen, welche für alle Ausgabeschemas gelten.

Admin Grundeinstellung Plugin-Schemas
Der vierte Abschnitt ist fünfmal vorhanden. Hier können Sie ein IFrame hinterlegen, welches durch Platzhalter mit den passenden Informationen aus dem Artikel ersetzt und anschließend im Frontend ausgegeben wird.

Konfiguration der grundlegenden Plugin Einstellungen

Admin Grundeinstellung Multishop-Fähigkeit
Mit dem Plugin Handling können Sie bestimmen, ob die Multishop-Fähigkeit aktiviert wird. Dies bezieht sich jedoch "lediglich" auf die Einstellungen, welche Sie in den Grundeinstellungen zum jeweiligen Shop durchführen, nicht jedoch auf Übersetzungen (Globus im Eingabefeld) in den Textbausteinen! Die Deaktivierung der Multishop-Fähigkeit kann von Vorteil sein, wenn Sie ohnehin nur eine Konfiguration wünschen, welche für alle Shops gleichermaßen gelten soll.

Admin Grundeinstellung JQuery Resizer aktivieren
Im ersten Konfigurationspunkt in der Gruppe "Einstellungen" 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.

Admin Grundeinstellung JQuery Viewport-Watcher
Im nächsten 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.

Admin Grundeinstellung Pfeile für Bildwechsel
Mit dem Konfigurationspunkt "Pfeile für Video/Bild-Wechsel" können Sie die üblichen Pfeile (links und rechts) ausgeben lassen. Diese werden als Overlay oberhalb vom Video angezeigt. Bitte beachten Sie das die Pfeile nur unterhalb von 750px Seitenbreite auftauchen!

Admin Grundeinstellung Badge aktivieren
Im darauffolgenden 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)

Admin 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"

Admin 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.

Konfiguration der Schemas

Admin Grundeinstellung IFrame für Youtube, Vimeo und Facebook
Nachfolgend besitzt das Plugin 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!

Admin 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

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

Admin 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".

Admin 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.

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

Admin 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".

Admin 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.

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