Video in Artikelbildgalerie

Inhalt

1. Wozu dient das Plugin "Video in Artikelbildgalerie"

JTL bietet Webshop-Betreibern üblicherweise die Möglichkeit, über die JTL-Wawi Produktbilder in die Artikelbildgalerie der Artikeldetailseiten hinzuzufügen. Mit dem Plugin „Video in Artikelbildgalerie“ fügen Sie neben den üblichen Produktbildern zusätzlich auch Videos hinzu, wie es z. B. auch bei Amazon möglich ist. Dadurch erweitern Sie die Produktpräsentation für Ihre Kunden.

2. Was kann das Plugin "Video in Artikelbildgalerie"

Das knowmates-Plugin „Video in Artikelbildgalerie“ ist exklusiv für das Shopsystem JTL-Shop entwickelt. Es ermöglicht das Hinterlegen von Videos verschiedener Plattformen (z. B. YouTube, Vimeo oder eigene Videos) in der Artikelbildgalerie (siehe Abbildung 1).

Abbildung 1: Videos verschiedener Plattformen in der Artikelbildgalerie im JTL -Shop

Die Videos sind sprachabhängig hinterlegbar, also z. B. ein Video mit deutschen Kommentaren für die Sprache „Deutsch“ und ein Video mit englischen Kommentaren für die Sprache „Englisch“.

Darüber hinaus lassen sich die Videos individuell sortieren.

Das Plugin bindet die Videos natürlich auch responsiv ein. Sie passen sich also der Bildschirmauflösung des genutzten Endgerätes an, um so eine optimale Benutzererfahrung zu
ermöglichen.

Sie hinterlegen die Videos direkt über das Plugin oder aber Sie fügen die Videos mittels Funktionsattribut über Ihre JTL-Wawi hinzu.

Hinweis: Wir empfehlen, die Videos mittels Funktionsattribut in der JTL-Wawi zu hinterlegen. Dadurch bearbeiten Sie z. B. via JTL-Ameise viele Artikel in einem Zuge und behalten dabei stets die Übersicht über Ihre Artikel-Videos.

3. Systemvoraussetzungen

  • JTL-Shop 5.2, 5.3
  • PHP 8.1, PHP 8.2
  • Template NOVA
  • ionCube Loader in der aktuellsten Version

4. Installation im JTL-Shop

Für Deinen JTL-Shop 5 beziehst Du Plugins über den JTL-Extension Store. Um auf Inhalte des JTL-Extension Stores zugreifen zu können, musst Du zunächst Dein JTL-Konto mit Deinem JTL-Shop 5 verknüpfen. Dies wird normalerweise beim Installationsprozess des Shops bereits abgefragt.

So verknüpfst Du Dein JTL-Konto mit Deinem JTL-Shop 5:

  1. Logge Dich im JTL-Shop-Backend ein.
  2. Navigiere im Menü zu „PLUGINS“ > „Meine Käufe“.
  3. Klicke auf „Konto verknüpfen“.
  4. Logge Dich mit Deinen JTL-Daten ein.
  5. Anschließend siehst Du in „PLUGINS“ > „Meine Käufe“ die Übersicht zu Deinen Lizenzen und Subscriptions.

So buchst Du eine Extension für JTL-Shop 5:

  1. Rufe den JTL-Extension Store auf.
  2. Suche nach dem gewünschten Plugin.
  3. Wähle das Plugin aus und klicke auf „Jetzt auschecken“.
  4. Klicke im folgenden Fenster auf „Anmelden“ und melde Dich mit Deinem zentralen JTL-Login an.
  5. Klicke im JTL-Checkout auf „Jetzt bestellen“, um die Bestellung abzuschließen.
  6. Rufe Dein JTL-Shop-Backend auf. Unter „PLUGINS“ > „Meine Käufe“ befindet sich jetzt im Bereich „Ungebundene Lizenzen“ Deine eben erworbene Lizenz.
  7. Nun ordnest Du das Plugin Deinem Shop zu. Klicke dafür auf „An diesen Onlineshop“ anbinden.
  8. Anschließend findest Du die Lizenz im Bereich „Gebundene Lizenzen“ und die Schaltfläche „Installieren“ steht zur Verfügung. Nach der Installation kannst Du das Plugin im Menü unter „PLUGINS“ > „Plugin-Manager“ in der Registerkarte „Aktiviert“ konfigurieren.

5. Plugin "Video in Artikelbildgalerie" einrichten

5.1 Benutzeroberfläche im Überblick

Rufen Sie das Konfigurationsmenü entweder unter „Plugin-Manager“ > „Aktiviert“ über das entsprechende Zahnrad-Icon auf der rechten Seite oder direkt über „Installierte Plugins“ > „Video
in Artikelbildgalerie“ auf.

Du siehst nun die Plugin-Benutzeroberfläche (siehe Abbildung 2).

Abbildung 2: Benutzeroberfläche vom Plugin „Video in Artikelbildgalerie“

Oben rechts befindet sich ein Switch, mit welchem Du zwischen hellem und dunklem Design wechseln kannst.

Triff nun die gewünschten Einstellungen für das Plugin „Video in Artikelbildgalerie“.

Der Reiter „Einstellungen“ beinhaltet folgende Optionen (siehe Abbildung 3):

Abbildung 3: Reiter „Einstellungen“

  • Plugin-Status (aus/an): Anzeige im Shop-Frontend aktivieren/deaktivieren.
  • Videos aus dem Plugin (‘Reiter Artikel‘) im Shop anzeigen?: Über diese Option lassen Sie die im Reiter „Artikel“ hinterlegten Videos anzeigen. Dazu hinterlegen sie die Videos direkt über das Plugin.
  • Videos aus der JTL-Wawi mittels Funktionsattribut nutzen?: Über diese Option lassen Sie in der JTL-Wawi hinterlegte Videos anzeigen. Dazu hinterlegen Sie die Videos via
    Funktionsattribut über die JTL-Wawi.
  • Videos vom Vaterartikel auf Varkombis vererben?: Ist diese Option aktiviert, sind die Videos vom Vaterartikel auch bei den Varkombis zu sehen.
  • Nur Videovorschläge desselben Kanals zulassen: Ist diese Option aktiviert, werden nur Videos eines Kanals angezeigt (z. B. ausschließlich YouTube).
  • Installiertes Template: Neben dem Nova-Template lässt sich auch das admorris-Template auswählen (dieses nutzt eine andere technische Grundlage)

Der Reiter „Artikel“ beinhaltet folgende Optionen (siehe Abbildung 4):

Abbildung 4: Reiter „Artikel“

Über den Reiter „Artikel“ fügen Sie direkt im Plugin über „+ VIDEO HINZUFÜGEN“ Videos zu Artikeln hinzu, die im Webshop aktiv sind.

Der Reiter „Farben“ beinhaltet folgende Informationen (siehe Abbildung 5):

Abbildung 5: Reiter „Farben“ (Versionsnummer exemplarisch)

  • Größe des Play-Buttons im Vorschaubild: Hinterlegen Sie die gewünschte Größe des Play-Buttons in Pixel.
  • Farbe des Play-Buttons im Vorschaubild: Über das nebenstehende Farbfeld hinterlegen Sie die Farbe des Play-Buttons. Über den Pfeil setzen Sie den Wert auf den Ausgangswert
    zurück.
  • Hintergrundfarbe des Play-Buttons im Vorschaubild: Über das nebenstehende Farbfeld hinterlegen Sie die Hintergrundfarbe des Play-Buttons im Vorschaubild.
  • Farbüberlagerung des Vorschaubild: Über das nebenstehende Farbfeld legen Sie eine Farbebene auf das Vorschaubild.
  • Speichern: Speichern Sie alle Ihre zuvor getroffenen Einstellungen.

Der Reiter „Lizenz“ beinhaltet folgende Optionen (siehe Abbildungen 6 & 7):

Abbildung 6: Reiter „Lizenz“ – keine gültige Lizenz vorhanden

  • Lizenz abfragen: Beim Kauf wird für die angegebene Domain eine Lizenz auf dem Lizenz-Server angelegt. Über den Button wird auf diesem geprüft, ob für Deine Domain eine Lizenz
    des Plugins vorliegt, und welche Art von Lizenz es ist.
  • Plugin für 14 Tage testen: Fordere eine Testphase von 14 Tagen an. Nach diesen 14 Tagen läuft die Test-Lizenz ab.
  • Lizenz kaufen: Eine vollwertige Lizenz über 12 Monate ist im JTL-Extension Store zu erwerben. Hier kannst Du Deine Lizenz auch um 12 oder 24 Monate verlängern.

Abbildung 7: Reiter „Lizenz“ – gültige Lizenz vorhanden

  • Lizenz abfragen: Beim Kauf wird für die angegebene Domain eine Lizenz auf dem Lizenz-Server angelegt. Über den Button wird auf diesem geprüft, ob für Deine Domain eine Lizenz
    des Plugins vorliegt, und welche Art von Lizenz es ist.
  • Lizenz verlängern: Eine vollwertige Lizenz über 12 Monate ist im JTL-Extension Store zu erwerben. Hier kannst Du Deine Lizenz auch um 12 oder 24 Monate verlängern.

Der Reiter „Über“ beinhaltet folgende Informationen (siehe Abbildung 8):

Abbildung 8: Reiter „Über“ (Versionsnummer exemplarisch)

Im Reiter „Über“ findest Du Informationen zur Plugin-Version, PHP-Version, IonCube-Version, zum Plugin-Autor sowie die (Shop)-Webseite des Autors als auch zwei Buttons, über den Du das Plugin Log leerst bzw. öffnest.

5.2 Video über Plugin hinzufügen

So gehen Sie vor, wenn Sie Videos direkt über das Plugin zu einzelnen Artikeln hinzufügen möchten:

1. Öffnen Sie im Plugin den Reiter „Artikel“ und klicken Sie auf „+ Video hinzufügen“. Das Pop-Up „Video hinzufügen“ öffnet sich.

2. Suchen Sie in Schritt 1 den gewünschten Artikel über die Eingabe des Artikelnamens oder der Artikelnummer. Die Suche liefert Ihnen auch in Abhängigkeit Ihrer Eingaben Vorschläge (siehe Abbildung 9). Über das Feld „Nur Vaterartikel“ zeigt die Vorschlagsliste bei der Eingabe nur Vaterartikel.

Abbildung 9: Produktvideo über das Plugin hinzufügen – Schritt 1

Bestätigen Sie Ihre Eingabe mit einem Klick auf „weiter“.

3. Wählen Sie in Schritt 2 das Video aus, das Sie hinzufügen möchten (siehe Abbildung 10):

  • Ausgewählter Artikel: Hier sehen Sie den in Schritt 1 ausgewählten Artikel.
  • Plattform: Auswahl der Videoquelle (z. B. YouTube, Vimeo, Video Url definieren, Video hochladen, Video auswählen)
  • Video code:
    • youtube: Geben Sie die Video-ID vom YouTube-Video an.
    • vimeo: Geben Sie die Video-ID vom Vimeo-Video an.
    • Video Url definieren: Geben Sie die URL für den gewünschten Video-Typ an (MP4, WebM, Ogg). Wir empfehlen MP4.
    • Video hochladen: Laden Sie Ihre eigenen Videos per Drag & Drop oder Dateiauswahl hoch. Es muss mindestens ein MP4-Video hinterlegt sein. Zusätzlich funktionieren noch
      WebM und Ogg. Vergeben Sie bei Bedarf einen Namen für die Videogruppe.
    • Video auswählen: Sofern Sie bereits Videos hochgeladen haben, wählen Sie aus der angezeigten Video-Übersicht aus.
  • Sprachauswahl: Auswahl zwischen allen installieren Sprachen und/oder vereinzelten Sprachen.

Abbildung 10: Produktvideo über das Plugin hinzufügen – Schritt 2

Bestätigen Sie Ihre Eingabe mit einem Klick auf „weiter“.

4. Vergeben Sie in Schritt 3 einen Thumbnail Typ (siehe Abbildung 11):

  • Standard Thumbnail des Video Hosts: In diesem Fall wird das durch den Video Host hinterlegte Thumbnail genutzt.
  • Standard-Play-Button des Video Hosts: In diesem Fall wird der Standard-Play-Button des Video Hosts als Thumbnail genutzt.
  • Bild definieren: In diesem Fall vergeben Sie eine Thumbnail-URL und hinterlegen so ein Vorschaubild.
  • Bild hochladen: Laden Sie ein eigenes Bild via Drag & Drop oder Dateiauswahl hoch.
  • Bild auswählen: Durchsuchen und wählen Sie ein bereits vorhandenes Vorschaubild.

Abbildung 11: Produktvideo über das Plugin hinzufügen – Schritt 3

Bestätigen Sie Ihre Eingaben mit einem Klick auf „speichern“. Das Video wird auf der Artikelseite angezeigt. Sie gelangen zurück in den Reiter „Artikel“, in welchem Sie nun eine Übersicht vorfinden (siehe Abbildung 12).

Abbildung 12: Liste von Produktvideos im Reiter „Artikel“

Sind bei einem Artikel mehrere Videos hinterlegt, lassen sich diese ganz einfach via Drag & Drop (mit gedrückter Maustaste) entsprechend in eine gewünschte Reihenfolge verschieben. Alternativ ist das auch über die Option „Einfügen Nach Bild“ in Schritt 1 möglich.

5.3 Video über JTL-Wawi hinzufügen

So gehen Sie vor, wenn Sie Videos über die JTL-Wawi hinzufügen möchten:

5.3.1 Funktionsattribut in JTL-Wawi anlegen

Damit Ihr JTL-Shop die Videos aus der JTL-Wawi heraus im Frontend ausspielt, ist es nötig, ein entsprechendes Funktionsattribut in der JTL-Wawi zu hinterlegen.

So hinterlegen Sie das Funktionsattribut:

1. Öffnen Sie Ihre JTL-Wawi.

2. Wählen Sie oben in der Menüleiste „Artikel“ > „Attribute“ (siehe Abbildung 13).

Abbildung 13: Attribut-Einstellungen in JTL-Wawi öffnen

3. Wählen Sie den Bereich „Artikel“ (siehe Abbildung 14).

4. Klicken Sie unten auf „Gruppe anlegen“.

5. Wählen Sie diese an, klicken Sie daneben auf „“Gruppe bearbeiten“ und benennen Sie diese um in „knm“.

Abbildung 14: Attributgruppe anlegen & umbenennen

6. Wählen Sie die neue Attributgruppe „knm“ und klicken Sie unten auf den kleinen schwarzen Pfeil rechts vom Button „Attribut anlegen“. Wählen Sie nun „Neues Funktionsattribut“ (siehe Abbildung 15).

Abbildung 15: Neues Funktionsattribut anlegen

7. Klicken Sie doppelt auf den rosa hinterlegten Attributnamen und benennen Sie diesen in „knm_video“ um. Hinweis: Die Schreibweise muss 1:1 identisch sein. Der Datentyp ist standardmäßig auf „Freitext“ gestellt – dies bitte unbedingt so beibehalten (siehe Abbildung 16).

Abbildung 16: Funktionsattribut umbenennen & für Onlineshop aktivieren

8. Aktivieren Sie das Funktionsattribut durch Anhaken des entsprechenden Onlineshops unten rechts.

9. Speichern Sie das Funktionsattribut durch einen Klick auf „Speichern“.

5.3.2 Videos in JTL-Wawi hinterlegen

Nun bereiten Sie Ihre Videos vor. Nutzen Sie hierzu am besten einen Text-Editor wie Notepad++.

Hinweis: Von der Nutzung von Textverarbeitungsprogrammen wie OpenOffice oder Microsoft Word raten wir ab, da diese nicht ideal für die folgenden Schritte geeignet sind.

5.3.2.1 Video-Zeichenkette erstellen

YouTube:

So konfigurieren Sie die Inhalte für das Funktionsattribut:

  1. Suchen Sie das Video und kopieren Sie die Video-ID in die Zwischenablage.
  2. Erstellen Sie eine leere Datei mit einem Text-Editor.
  3. Optional: Sofern Sie das Video für eine bestimmte Sprache oder mehrere Sprachen nutzen möchten, schreiben Sie die ID der gewünschten Sprache in eckige Klammern. Der Wert „0“ sowie gar kein Eintrag sprechen alle Sprachen an. Einzelne Sprachen sind durch einen Bindestrich zu trennen (wenn ein Video z. B. nur für zwei von drei Sprachen genutzt werden
    soll).
    Die ID der Sprache finden Sie in der JTL-Wawi unter „Admin“ > „Allgemeine Einstellungen“ > „Sprachen“. Rechts unter den gewählten Sprachen hat die erste Sprache die ID 1, die zweite Sprache die ID 2 und so weiter.
  4. Schreiben Sie das Kürzel „yt,“.
  5. Fügen Sie hinter dem Komma die ID aus der Zwischenablage ein.
  6. Um das Vorschaubild zu definieren, setzen Sie ein weiteres „,“ und:
    a. fügen einen Link zu einem Vorschaubild ein oder
    b. schreiben das Wort „button“, wodurch das YouTube-Icon als Vorschaubild genutzt wird oder
    c. fügen nichts hinzu, um das Vorschaubild von YouTube zu nutzen. Bei dieser Option sind zwei Kommata, wenn anschließend noch eine Sortiernummer folgen soll.
  7. Setzen Sie nun eine Sortiernummer, um die Position des Videos zu bestimmen.
  8. Möchten Sie ein weiteres Video hinzufügen, trennen Sie beide Videos via „|“.

Beispiel eines YouTube-Videos für alle Sprachen ohne Vorschaubild:

yt,8LhCd1W2V0Q

Beispiel eines YouTube-Videos für die Sprache mit der ID = 1, inkl. Vorschaubild (YouTube-Icon) & Position 1:

[1]yt,8LhCd1W2V0Q,button,1

Beispiele für mehrere YouTube-Videos:

yt,8LhCd1W2V0Q,https://www.domain.de/bilder/video/beispiel.jpg|yt,8LhCd1W2V0Q,button|yt,8Lh
Cd1W2V0Q

[1-2]yt,G9HqFwjOVY8|[2]yt,sNYv0JgrUlw,button|[0]yt,HdJDxM4Lq2w|[1]yt,qTSQ7Y9lO7o

Beispiel für eine Kombination aus YouTube-Videos & Vimeo-Videos:

vi,255185671|yt,8LhCd1W2V0Q|vi,255185671,/bilder/video/beispiel.jpg

Vimeo:

So konfigurieren Sie die Inhalte für das Funktionsattribut:

  1. Suchen Sie das Video und kopieren Sie die Video-ID in die Zwischenablage.
  2. Erstellen Sie eine leere Datei mit einem Text-Editor.
  3. Optional: Sofern Sie das Video für eine bestimmte Sprache oder mehrere Sprachen nutzen möchten, schreiben Sie die ID der gewünschten Sprache in eckige Klammern. Der Wert „0“
    sowie gar kein Eintrag sprechen alle Sprachen an. Einzelne Sprachen sind durch einen Bindestrich zu trennen (wenn ein Video z. B. nur für zwei von drei Sprachen genutzt werden
    soll).
    Die ID der Sprache finden Sie in der JTL-Wawi unter „Admin“ > „Allgemeine Einstellungen“ >„Sprachen“. Rechts unter den gewählten Sprachen hat die erste Sprache die ID 1, die
    zweite Sprache die ID 2 und so weiter.
  4. Schreiben Sie das Kürzel „vi,“.
  5. Fügen Sie hinter dem Komma die ID aus der Zwischenablage ein.
  6. Um das Vorschaubild zu definieren, setzen Sie ein weiteres „,“ und:
    a. fügen einen Link zu einem Vorschaubild ein oder
    b. schreiben das Wort „button“, wodurch das Vimeo-Icon als Vorschaubild genutzt wird oder
    c. fügen nichts hinzu, um das Vorschaubild von Vimeo zu nutzen. Bei dieser Option sind zwei Kommata, wenn anschließend noch eine Sortiernummer folgen soll.
  7. Setzen Sie nun eine Sortiernummer, um die Position des Videos zu bestimmen.
  8. Möchten Sie ein weiteres Video hinzufügen, trennen Sie beide Videos via „|“.

Beispiel eines Vimeo-Videos für alle Sprachen ohne Vorschaubild:

vi,255185671

Beispiel eines Vimeo-Videos für die Sprache mit der ID = 2, inkl. Vorschaubild (Vimeo-Icon) & Position 3:

[2]vi,8LhCd1W2V0Q,button,3

Beispiele für mehrere Vimeo-Videos:

vi,255185671,https://www.domain.de/bilder/video/beispiel.jpg|vi,255185671,button|vi,255185671

[1-2]vi,G9HqFwjOVY8|[2]vi,sNYv0JgrUlw,button|[0]vi,HdJDxM4Lq2w|[1]vi,qTSQ7Y9lO7o

Beispiel für eine Kombination aus YouTube-Videos & Vimeo-Videos:

vi,255185671|yt,8LhCd1W2V0Q|vi,255185671,/bilder/video/beispiel.jpg

Eigene Video-URLs:

Hinweis: Bei eigenen Video-URLs müssen die Videos das MP4-Format haben.

So konfigurieren Sie die Inhalte für das Funktionsattribut:

  1. Speichern Sie Ihr Video auf dem Server.
  2. Suchen Sie Ihr Video und kopieren Sie den Pfad in die Zwischenablage.
    Hinweis: Bei eigenen Video-URLs sind auch relative Pfade möglich (also z. B. „videos/knmViIs/_a0br_fr_alle.mp4“).
  3. Erstellen Sie eine leere Datei mit einem Text-Editor.
  4. Optional: Sofern Sie das Video für eine bestimmte Sprache oder mehrere Sprachen nutzen möchten, schreiben Sie die ID der gewünschten Sprache in eckige Klammern. Der Wert „0“
    sowie gar kein Eintrag sprechen alle Sprachen an. Einzelne Sprachen sind durch einen Bindestrich zu trennen (wenn ein Video z. B. nur für zwei von drei Sprachen genutzt werden
    soll). Die ID der Sprache finden Sie in der JTL-Wawi unter „Admin“ > „Allgemeine Einstellungen“ > „Sprachen“. Rechts unter den gewählten Sprachen hat die erste Sprache die ID 1, die zweite Sprache die ID 2 und so weiter.
  5. Schreiben Sie das Kürzel „ow,“.
  6. Fügen Sie hinter dem Komma den Pfad aus der Zwischenablage ein.
  7. Um das Vorschaubild zu definieren, setzen Sie ein weiteres „,“ und fügen einen Link zum Pfad Ihres Vorschaubildes ein. Soll kein Vorschaubild genutzt werden, sind zwei Kommata
    zu setzen, wenn anschließend noch eine Sortiernummer folgen soll.
  8. Setzen Sie nun eine Sortiernummer, um die Position des Videos zu bestimmen.
  9. Möchten Sie ein weiteres Video hinzufügen, trennen Sie beide Videos via „|“.

Beispiel für eine eigene Video-URL für die Sprachen mit den IDs = 1 und 2, inkl. eigenem Vorschaubild:

[1-2]ow,https://www.domain.de/videos/knmViIs/_a0br_fr_alle.mp4,https://www.domain.de/bilder/knmViIs/blaertt.jpg

5.3.2.2 Video-Zeichenkette im Artikel hinterlegen

1. Öffnen Sie den gewünschten Artikel in Ihrer JTL-Wawi.

2. Navigieren Sie in den Reiter „Attribute/Merkmale“.

3. Klicken Sie auf „Attribut zuweisen“.

4. Öffnen Sie nun die von Ihnen erstellte Attributgruppe „knm“, klicken Sie auf das Funktionsattribut „knm_video“ und auf „Weiter“.

5. Kopieren Sie die erstellte Video-Zeichenkette ins Eingabefeld (siehe Abbildung 17).

Abbildung 17: Video-Funktionsattribut in Artikelstammdaten hinterlegen

6. Klicken Sie auf „Speichern“.
7. Nach dem nächsten Online-Shop-Abgleich (Worker oder manuell) erscheint das Video im JTL-Shop-Frontend.