Grundlegendes
Nach der Installation finden Sie im Administrationsbereich unter Einstellungen -> Grundeinstellungen -> Videos der Artikelbilderverwaltung...(Pluginname) alle Einstellmöglichkeiten vom Plugin.
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.
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
Die Grundeinstellungen sind in vier Abschnitte unterteilt.
Im ersten Abschnitt können Sie einstellen, ob die Multishop-Fähigkeit aktiviert werden soll.
Im zweiten und dritten Abschnitt können Sie verschiedene Einstellungen vornehmen, welche für alle Ausgabeschemas gelten.
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
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.
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.
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.
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!
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)
Über den Konfigurationspunkt "Overlay Play Button über Thumbnail anzeigen", können Sie steuern, ob ein Play Button überhalb des Thumbnail Bildes in der Produktdetail-Ansicht angezeigt werden soll oder nicht.
Diese Funktion ist besonders wichtig, wenn Sie ein bestimmtes Thumbnail hinterlegen möchten, bei dem der Play Button störend wäre.
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"
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
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!
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
Unter dem Menüpunkt "Artikel" -> "Übersicht" können Sie beliebige Artikel editieren.
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".
Nun können Sie ein Bild durch anklicken auswählen, auf der rechten Seite unter den "Freitextfelder" finden Sie das Ausgabeschema sowie die URLs.
Sie können als Ausgabeschema zwischen den konfigurierten Schemata aus den Grundeinstellungen wählen
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".
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"
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.
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.
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
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.
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.
Youtube
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
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.
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.
Youtube
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
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
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.
