Energielabel – empfohlen vom Händlerbund (rechtssichere EU-Energielabel)

Inhalt

1. Wozu dient das Plugin "Energielabel – empfohlen vom Händlerbund (rechtssichere EU-Energielabel)"

Bei bestimmten Produktklassen (z. B. Kühlschränke, Waschmaschinen, Fernseher, Lampen und Leuchtmittel) sind Onlinehändler verpflichtet, elektronische Etiketten (Energielabel) und Produktdatenblätter zur Verfügung zu stellen. Die Kunden sollen dadurch in ihrer Kaufentscheidung unterstützt werden.

Weitere wichtige Informationen hierzu findest Du unter:

https://www.haendlerbund.de/de/wissen/infografik-energielabel

2. Was kann das Plugin "Energielabel – empfohlen vom Händlerbund (rechtssichere EU-Energielabel)"

Das knowmates-Plugin „Energielabel“ ist exklusiv für das Shopsystem JTL-Shop entwickelt. Es zeigt sowohl das alte als auch das neue Energielabel für Elektro- und Elektronikprodukte mit einem entsprechenden Pfeil in der Nähe des Produktpreises auf Kategorieseiten, auf Artikeldetailseiten sowie in Produktslidern (z. B. Cross-Selling). Die Darstellung des vollständigen Labels erfolgt nach einem Klick auf den Pfeil (siehe Abbildung 1). Außerdem kannst Du Produktdatenblätter, Energielabels und Icons mehrsprachig hinterlegen und dem Kunden in seiner Sprache anzeigen lassen.

Abbildung 1: „Energielabel“ im Frontend eines JTL -Shops (links: Energielabel alt, rechts: Energielabel neu, oben: Standardansicht, unten: nach Klick)

Neben dem Energielabel ermöglicht das Plugin auch die Darstellung der z. T. verpflichtend anzuführenden Produktdatenblätter. Diese werden ebenfalls in der Nähe des Produktpreises verlinkt. Darüber hinaus lassen sich die Produktdatenblätter zusätzlich in einem separaten Tab unterhalb der Produktbilder auf der Artikeldetailseite anzeigen (siehe Abbildung 2).

Abbildung 2: „Produktdatenblatt“ im Frontend eines JTL -Shops

 

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 "Energielabel – empfohlen vom Händlerbund (rechtssichere EU-Energielabel)" einrichten

5.1 Benutzeroberfläche im Überblick

Rufe das Konfigurationsmenü entweder unter „Plugin-Manager“ > „Aktiviert“ über das entsprechende Zahnrad-Icon auf der rechten Seite oder direkt über „Installierte Plugins“ > „Energielabel“ auf.

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

Abbildung 3: Benutzeroberfläche vom Plugin „Energielabel“

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 „Energielabel“.

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

Abbildung 4: Reiter „Einstellungen“

  • Plugin-Status (aus/an): Anzeige im Shop-Frontend aktivieren/deaktivieren
  • Sprache auswerten (aus/an): Wenn aktiv, werden Produktdatenblätter, Energiepfeile und Icons in der Sprache des Kunden angezeigt
  • Datenblatt im Tab anzeigen: Wenn aktiv, wird das Produktdatenblatt (auf der Artikeldetailseite) zusätzlich zum Link unter dem Produktpreis in einem Reiter neben der Beschreibung verfügbar sein.
  • Mehrere Pfeile nebeneinander zeigen: Falls mehrere Pfeile für ein Produkt nötig sind, können diese untereinander oder nebeneinander angezeigt werden. Aufgrund der unterschiedlichen Größen der Anzeigebereiche (Sidebar, OnPage Composer Product-Stream, Artikelslider, Kategorieansicht, Artikeldetailseite) kann die Darstellung nebeneinander nicht immer erreicht werden.
  • Größe der Pfeile der Energieklasse: Die Hinweispfeile der Energieklasse lassen sich klein, mittel und groß anzeigen.
  • Anzeigelayout: Auswahl einiger minimal verschiedener Layouts für Pfeile und Link zum Datenblatt („Preis am Pfeil – Datenlink unten“ oder „Datenlink am Pfeil – Preis darunter“)

Der Reiter „Verknüpfungsfehler“ beinhaltet folgende Optionen (siehe Abbildung 5):

Abbildung 5: Reiter „Verknüpfungsfehler“

  • Hier aufgeführte Artikel werden automatisch im Webshop ausgeblendet („Dieser Artikel wurde zeitweilig deaktiviert.“). Dies ist eine erzwungene Einstellung, die aus Gründen der Rechtssicherheit nicht geändert werden darf/kann.
  • In den Details werden folgende Punkte aufgelistet und der Ort, an dem die Dateien erwartet werden:
  • interne Artikelnummer: interner Schlüssel in JTL-Wawi
  • Medienverzeichnis für den Artikel: übergeordneter Ordner des Artikels im Verzeichnis /plugins/knm_energy_label/mediafiles/
  • Artikelnummer: Artikelnummer in JTL-Wawi
  • Artikelname: Artikelname in JTL-Wawi
  • Sprache: Abkürzung der Sprache (für jede Sprache muss ein eigenes Unterverzeichnis mit der entsprechenden Sprach-ISO angelegt werden)
  • URL der PDF: absoluter Pfad des Produktdatenblatts
  • gefunden: Info, ob das Produktdatenblatt unter der URL gefunden wurde
  • URL des Labels: absoluter Pfad des Energielabels
  • gefunden: Info, ob das Energielabel unter der URL gefunden wurde

Darüber hinaus wird der Artikel ebenfalls im Webshop ausgeblendet, wenn eines der Pflicht-Funktionsattribute fehlt (knm_energy_label_scale, knm_energy_label_value, knm_energy_label_arrow_type).

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 Energielabel & Produktdatenblatt hinterlegen

Energielabel und Produktdatenblatt hinterlegst Du für Deine Artikel bequem via FTP (File Transfer Protocol) auf dem Webserver. Bei der Installation des Plugins wird folgendes Verzeichnis ausgehend vom Shop-Root-Verzeichnis automatisch angelegt:

/plugins/knm_energy_label/mediafiles/

Hierin ist für jeden gewünschten Artikel ein eigenes Medienverzeichnis (Ordner mit dem Namen „article_xxxx“) anzulegen. Die vier „x“ stehen an der Stelle repräsentativ für den internen Schlüssel, den die JTL-Wawi den Artikeln automatisch beim Anlegen gibt.

Hinweis: In den folgenden Verzeichnissen darf sich jeweils nur eine Datei befinden.

Die Bilddatei (JPG, PNG, SVG) des Energielabels ist im anzulegenden Unterverzeichnis „img“ abzulegen. Der Dateiname ist dabei unerheblich. Der Pfad zum Verzeichnis für die Bilddatei des Energielabels lautet dann ausgehend vom Shop-Root-Verzeichnis z. B.:

/plugins/knm_energy_label/mediafiles/article_2248/img/

Die PDF-Datei des Produktdatenblatts ist im anzulegenden Unterverzeichnis „pdf“ abzulegen. Der Dateiname ist dabei unerheblich. Der Pfad zum Verzeichnis für die PDF-Datei des Produktdatenblatts lautet dann ausgehend vom Shop-Root-Verzeichnis z. B.:

/plugins/knm_energy_label/mediafiles/article_2248/pdf/

„2248“ ist im Beispiel die interne Artikelnummer der JTL-Wawi („Interner Schlüssel“) und nicht zu verwechseln mit der JTL-Wawi-Artikelnummer. Daher ist es in jedem Fall empfehlenswert, in der Artikelübersicht den „Internen Schlüssel“ als Spalte anzeigen zu lassen, um diesen identifizieren zu können – für den Fall, dass Du die Dateien nicht über Funktionsattribute verlinken möchtest, sondern diese selbst auf dem Server speicherst.

Hinweis: Bei mehreren Sprachen müssen die lokalen Pfade für die von der Standardsprache abweichenden Sprachen zum Verzeichnis mit dem entsprechenden Sprach-ISO ergänzt werden z.B. für Französisch:

/plugins/knm_energy_label/mediafiles/article_2248/img/fre
/plugins/knm_energy_label/mediafiles/article_2248/pdf/fre

Für die Standardsprache des Shops muss kein Unterverzeichnis angelegt werden. Ob für verschiedene Sprachen verschiedene Dateien verwendet werden sollen, definierst Du über die Einstellung im Pluginbackend (Einstellungen -> Sprache auswerten). Ist diese Einstellung nicht aktiv, werden bei von der Standardsprache abweichenden Sprachen immer die Dateien der Standardsprache verwendet.

5.2.1 Funktionsattribute in JTL-Wawi anlegen

Alle weiteren Einstellungen sind über Funktionsattribute in JTL-Wawi zu steuern.

Hinweis: Es müssen alle sieben zur Verfügung stehenden Funktionsattribute für das Plugin „Energielabel“ angelegt werden.

So hinterlegst Du die Funktionsattribute:

Öffne Deine JTL-Wawi.

Wähle oben in der Menüleiste „Artikel“ > „Attribute“ (siehe Abbildung 9).

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

1. Wähle den Bereich „Artikel“ (siehe Abbildung 10).

2. Klicke unten auf „Gruppe anlegen“.

3. Wähle diese an, klicke daneben auf „“Gruppe bearbeiten“ und benenne diese um, z. B. in „Eigene Attribute“.

Abbildung 10: Attributgruppe anlegen & umbenennen

6. Wähle die neue Attributgruppe „Eigene Attribute“ und klicke unten auf den kleinen schwarzen Pfeil rechts vom Button „Attribut anlegen“. Wähle nun „Neues Funktionsattribut“ (siehe Abbildung 11) und lege nach und nach alle sieben Funktionsattribute an.

Abbildung 11: Neue Funktionsattribute anlegen

7. Klicke doppelt für jedes Funktionsattribut auf den rosa hinterlegten Attributnamen und benenne diese entsprechend um (siehe Abbildung 12).

Hinweis: Die Schreibweise muss 1:1 identisch sein. Der Datentyp ist standardmäßig auf „Freitext“ gestellt – diese bitte entsprechend der Übersicht der Energielabel-Funktionsattribute anpassen.

Abbildung 12: Funktionsattribute umbenennen & für Onlineshop aktivieren

8. Aktiviere die Funktionsattribute durch Anhaken des entsprechenden Onlineshops unten rechts.

9. Speichere die Funktionsattribute durch einen Klick auf „Speichern“.

5.2.2 Funktionsattribute des Plugins „Energielabel“

Hinweis: Es müssen alle sieben zur Verfügung stehenden Funktionsattribute für das Plugin „Energielabel“ angelegt werden.

Da für manche Artikel (z. B. bestimmte Heizungsanlagen) mehrere Pfeile angezeigt werden müssen, sind einige Attributwerte teilbar (siehe Abbildung 13 auf Folgeseite). Die Teilung erfolgt durch die Zeichenfolge: |~~|

Abbildung 13: Darstellung mehrerer Pfeile bei geteilten Attributwerten

Folgende Funktionsattribute stehen für JTL-Wawi zur Verfügung:

knm_energy_label_scale

  • Pflichtfeld (Freitext)
  • Attributwerte teilbar (via Zeichenfolge |~~|)
  • Werte (durch „|“ getrennt) werden aufgelistet wie angegeben (sollten den Werten auf der Bilddatei des Energielabels entsprechen)
  • z. B.: A|B|C|D|E|F|G oder A+++|A++|A+|A|B|C|D oder A|B|C|D|E|F|G|~~|A|B|C|D|E|F|G (siehe Abbildung 13)

knm_energy_label_value

  • Pflichtfeld (Freitext)
  • Attributwerte teilbar (via Zeichenfolge |~~|)
  • Wert enthält das zugeteilte Label (muss in knm_energy_label_scale vorhanden sein)
  • z. B.: D oder A|~~|B (siehe Abbildung 13)

knm_energy_label_arrow_type

  • Pflichtfeld (Freitext)
  • Attributwerte teilbar (via Zeichenfolge |~~|)
  • mögliche Werte:
    • 0=A-G Pfeil nach links (neuer Pfeil)
    • 1=A-G Pfeil nach rechts (neuer Pfeil)
    • 2=A+++ Pfeil nach links (alter Pfeil)
    • 3=A+++ Pfeil nach rechts (alter Pfeil)
    • z. B. 0|~~|1 (siehe Abbildung 13 auf vorheriger Seite)

knm_energy_label_file_label

  • optionales Feld (Freitext), wenn Energielabel in gemeinsamen Pool liegt
  • Attributwerte nicht teilbar
  • URL zur Bilddatei mit dem Energielabel
  • z. B.:
    https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg
  • Für die Internationalisierung der Feldwerte wird dem Funktionsattribut ein Präfix vorangestellt, das dem ISO-Code der Sprache entspricht. Um einen Feldwert für die französische Sprache zu definieren, wird das Funktionsattribut fre_knm_energy_label_file_label angelegt und mit dem entsprechenden Wert befüllt.

knm_energy_label_file_pdf

  • optionales Feld (Freitext), wenn Produktdatenblatt in gemeinsamen Pool liegt
  • Attributwerte nicht teilbar
  • URL zur PDF-Datei mit dem Produktdatenblatt
  • z. B.: https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf
  • Für die Internationalisierung der Feldwerte wird dem Funktionsattribut ein Präfix vorangestellt, das dem ISO-Code der Sprache entspricht. Um einen Feldwert für die französische Sprache zu definieren, wird das Funktionsattribut fre_knm_energy_label_file_pdf angelegt und mit dem entsprechenden Wert befüllt.

knm_energy_label _icon

  • optionales Feld (Freitext), damit Kunde erkennen kann, wofür der jeweilige Pfeil steht
  • Attributwerte teilbar (via Zeichenfolge |~~|)
  • Icon wird mit einer Breite von 40 px angezeigt
  • URL zur Bilddatei mit dem Icon (im Beispiel befinden sich die Bilddateien im Verzeichnis icons – Verzeichnis frei wählbar)
    Hinweis: Die Existenz des Icons wird nicht validiert.
  • z. B.:
    https://domain.de/plugins/knm_energy_label/mediafiles/icons/heizung.png|~~|https://domain.de/plugins/knm_energy_label/mediafiles/icons/wasser.png (siehe Abbildung 13 auf vorheriger Seite)
  • Für die Internationalisierung der Feldwerte wird dem Funktionsattribut ein Präfix vorangestellt, das dem ISO-Code der Sprache entspricht. Um einen Feldwert für die französische Sprache zu definieren, wird das Funktionsattribut fre_ knm_energy_label _icon angelegt und mit dem entsprechenden Wert befüllt.

knm_energy_label_icon_alt

  • optionales Feld (Freitext)
  • Attributwerte teilbar (via Zeichenfolge |~~|)
  • Alt-Tag für das Image-Tag des Icons (falls kein Icon angegeben ist als angezeigter Text)
  • Alt-Tag wird angezeigt, wenn das Icon nicht angegeben wurde oder wenn es nicht korrekt geladen wird
  • z. B.: Heizung|~~|Wasser
  • Für die Internationalisierung der Feldwerte wird dem Funktionsattribut ein Präfix vorangestellt, das dem ISO-Code der Sprache entspricht. Um einen Feldwert für die französische Sprache zu definieren, wird das Funktionsattribut fre_knm_energy_label_icon_alt angelegt und mit dem entsprechenden Wert befüllt.

 

6. Sonstiges / Bemerkungen

Zusatz Templateauswahl

Ab der Version 5.3.0 gibt es die Möglichkeit, eigene Selektoren zu verwenden, um mehr Templates zu unterstützen

Abbildung 14: Templateauswahl

  • Templateauswahl: Diese Auswahl bestimmt die Vorgabewerte der einzelnen Selektoren.
  • Blauer Knopf mit Rückwärtspfeil: Reset. Der Knopf ermöglicht das Zurücksetzen aller Formularwerte auf Standardeinstellungen in Abhängigkeit vom gewählten Template.
  • Anzeigelayout: Auswahl einiger minimal verschiedener Layouts für Pfeile und Link zum Datenblatt.
  • Blauer Knopf mit Rückwärtspfeil: Reset. Der Knopf ermöglicht das Zurücksetzen aller Formularwerte auf Standardeinstellungen in Abhängigkeit vom gewählten Template.

Abbildung 14-1: Spezialselektoren

  • Energiepfeil -> Korrespondierendes Element für den Pfeil: Wähle hier das Element, auf das sich die Einbindung des Pfeilelements bezieht. In Abhängigkeit von diesem Element wird der Pfeil ins Template eingefügt.
  • Art der Einbindung: Wähle hier die Art und Weise, wie das Pfeilelement in das Template eingefügt wird.
  • Verlinkung Produktdatenblatt
  • Seite Kasse , Seite Vergleichsliste , Seite Wunschliste ,Mini-Warenkorb in der Headerbar , Seite Warenkorb , Kategorieansicht , Artikeldetailseite , Artikeldetailseite per Ajax gerufen (z.b. für Modalansicht) , Artikel in diversen Slidern des Shops , Artikel in OPC-Product-Streams ,Artikel in OPC-Slidern , Artikel in diversen Boxen , Konfig-Artikel haben folgende Einstellungen:

Alle Seiten:

  • Energiepfeil -> Korrespondierendes Element für den Pfeil: Wähle hier das Element, auf das sich die Einbindung des Pfeilelements bezieht. In Abhängigkeit von diesem Element wird der Pfeil ins Template eingefügt.
  • Energiepfeil -> Art der Einbindung: Wähle hier die Art und Weise, wie das Pfeilelement in das Template eingefügt wird.
  • Verlinkung Produktdatenblatt -> Korrespondierendes Element für das Produktdatenblatt: Wähle hier das Element, auf das sich die Einbindung des Links zum Produktdatenblatt bezieht. In Abhängigkeit von diesem Element wird der Link ins Template eingefügt.
  • Verlinkung Produktdatenblatt -> Art der Einbindung: Wähle hier die Art und Weise, wie die Verlinkung in das Template eingefügt wird.
  • Fehlende Dateien -> Korrespondierendes Element für das Produktdatenblatt: Wenn Dateien (Produktdatenblätter oder Energielabel) fehlen, wird der Artikel temporär ausgeblendet. Wähle hier das Element aus, auf das sich die Maßnahme bezieht.
  • Fehlende Dateien-> Art der Durchführung: Wähle die Methode zur Durchführung der Maßnahme

Zwei Seiten:

Abbildung 14-2: Integrierte Ansicht

  • Integrierte Ansicht: Definiere hier, ob 2 Elemente auf einer Zeile angezeigt werden sollen. Das Schlüsselelement und das korrespondierende Element werden dann in einem Wrapper integriert gezeigt.