EU-Energie-Labels – Anleitung

Überblick

Das Plugin (in der JTL-Shop-Pluginverwaltung geführt als „SALEPIX Energie-Effizienklassen-Symbole") zeigt zu Artikeln mit einer gepflegten Energieeffizienzklasse automatisch das passende Klassen-Symbol (A bis G) an – unter anderem auf der Artikeldetailseite, in Such- und Kategorielisten, im Warenkorb, auf der Startseite, in Boxen wie „Zuletzt angesehen" oder „Bestseller", in der Vergleichs- und der Wunschliste sowie im OPC-Portlet „Produkt-Stream".

Gesteuert wird die Anzeige über ein Funktionsattribut aus der JTL-Wawi (Standardname eek). Der Attributwert am Artikel (z. B. „A" oder, bei mehreren Klassen, „A,C") bestimmt, welche Symbole erscheinen. Ein Klick auf ein Symbol öffnet das vollständige Energielabel als Bild in einem Modal-Fenster.

Voraussetzungen

• JTL-Shop ab Version 5.2.0.
• Die Energieeffizienzklasse muss in der JTL-Wawi als Funktionsattribut gepflegt sein (Standardname eek). Bei mehreren Klassen werden die Werte durch Komma getrennt eingetragen, z. B. A,C.
• Für das vollständige Energielabel, das beim Klick auf ein Symbol im Modal-Fenster erscheint, verwendet das Plugin die letzten Artikelbilder des Artikels (rückwärts gezählt, ein Bild je hinterlegter Klasse). Diese Bilder müssen am Artikel hinterlegt sein.

Installation

1. Plugin-ZIP im JTL-Shop-Backend unter „Plugins → Plugin-Manager" im Reiter „Hochladen" hochladen.
2. Das Plugin unter „Verfügbar" installieren.
3. Anschließend unter „Plugins → SALEPIX Energie-Effizienklassen-Symbole" einrichten.

Einrichtung / Schnellstart

1. Unter „Plugins → SALEPIX Energie-Effizienklassen-Symbole → Einstellungen" den Eintrag Funktionsattribut-Name prüfen bzw. anpassen (Standard: eek). Dieser Wert muss exakt dem Namen des Funktionsattributs in der JTL-Wawi entsprechen.
2. Für jede benötigte Effizienzklasse (A bis G, jeweils als eigener Eintrag vorhanden) bei Bedarf ein eigenes Energie-Effizienz-Symbol (Bildpfad) und eine CSS-Klasse (optional) hinterlegen. Bleibt das Symbolfeld leer, verwendet das Plugin eines der mitgelieferten Symbole (siehe Einstellung „powerImageType" im Tab „Optionen").
3. In der JTL-Wawi am Artikel das Funktionsattribut (Standard eek) mit dem passenden Klassenwert pflegen, z. B. „B" oder bei mehreren Klassen „E,F".
4. Am Artikel die Artikelbilder hinterlegen, aus denen das Plugin die Bilder für das Modal-Fenster zieht (siehe Voraussetzungen).
5. Unter „Plugins → SALEPIX Energie-Effizienklassen-Symbole → Optionen" bei Bedarf die CSS-Selektoren und Einfügearten je Shop-Bereich an das eigene Template anpassen.

Einstellungen

Tab „Einstellungen"

In diesem Tab wird der Name des Funktionsattributs festgelegt und für jede Effizienzklasse (A bis G) ein eigener Eintrag gepflegt.

Tab „Optionen"

Je Shop-Bereich legen Sie hier fest, an welchem CSS-Selektor das Symbol eingefügt wird (Einstellung „…Selector") und auf welche Art (Einstellung „…Action": append, prepend, before, after oder replace).

Funktionen im Detail

Anzeige der Symbole

Das Plugin liest bei jedem Seitenaufruf den Wert des konfigurierten Funktionsattributs (Standard eek) des jeweiligen Artikels aus. Enthält der Wert mehrere durch Komma getrennte Klassen (z. B. „A,C"), erscheinen mehrere Symbole nebeneinander – je Klasse eines, mit eigenem Symbolbild und eigenem Label im Modal-Fenster.

Das Symbol wird in folgenden Bereichen eingefügt, sofern dort passende Artikel angezeigt werden:

• Artikeldetailseite (Hauptartikel, ähnliche Artikel, Cross-Selling-/Zubehörgruppen)
• Such- und Kategorieergebnisliste
• Warenkorb (Artikelpositionen sowie „Andere Kunden kauften auch")
• Startseite (Artikel-Slider)
• Boxen mit Artikeln (z. B. „Zuletzt angesehen", „Bestseller", „Topangebote", „Neu im Sortiment", „Sonderangebote", „In Kürze verfügbar", „Topbewertet") – das Symbol erscheint dort nur, wenn für die jeweilige Box die Anzeige-Kompatibilität aktiviert ist
• Vergleichsliste
• Wunschliste
• OPC-Portlet „Produkt-Stream"

Ist für eine Klasse im Tab „Einstellungen" kein eigenes Symbolbild hinterlegt, verwendet das Plugin eines der vier mitgelieferten Symbole (farbig oder Schwarz-Weiß, Pfeil links oder rechts), gesteuert über die Einstellung „powerImageType".

Label-Fenster (Modal)

Ein Klick auf ein Symbol öffnet ein Fenster mit dem vollständigen Energielabel als Bild. Als Bildquelle verwendet das Plugin die letzten Artikelbilder des Artikels: Bei mehreren angezeigten Klassen wird rückwärts gezählt, sodass jede Klasse ein eigenes Bild erhält. Sind nicht genügend Artikelbilder vorhanden, verwendet das Plugin stattdessen das Symbolbild der Klasse (eigenes oder mitgeliefertes) als Bild im Fenster. Der Titel im Fenster zeigt die jeweilige Klasse.

Einfügeposition anpassen

Für jeden der oben genannten Bereiche legen Sie im Tab „Optionen" einen CSS-Selektor und eine Einfügeart fest. So lässt sich die Position des Symbols an ein individuelles Template anpassen, ohne dass Vorlagen bearbeitet werden müssen.

Häufige Fragen

Was passiert, wenn ein Artikel mehrere Effizienzklassen hat? Es werden mehrere Symbole nebeneinander angezeigt – für jede im Funktionsattribut kommagetrennt eingetragene Klasse eines, jeweils mit eigenem Bild im Modal-Fenster.

Wo lege ich ein eigenes Symbolbild für eine Klasse fest? Im Tab „Einstellungen", beim jeweiligen Eintrag für die Klasse (A bis G), im Feld „Energie-Effizienz-Symbol".

Warum erscheint das Symbol in einer Box (z. B. „Zuletzt angesehen") nicht? Das Plugin zeigt das Symbol in Boxen nur an, wenn für die jeweilige Box die Anzeige-Kompatibilität aktiviert ist.

Kann ich die Position des Symbols an mein Template anpassen? Ja. Im Tab „Optionen" legen Sie je Shop-Bereich einen CSS-Selektor und eine Einfügeart (append, prepend, before, after, replace) fest.

Woher stammt das große Bild im Modal-Fenster? Aus den letzten Artikelbildern des Artikels. Sind keine ausreichenden Artikelbilder vorhanden, zeigt das Fenster stattdessen das Symbolbild der Klasse.

Support

Bei Fragen erreichen Sie uns über das Kontaktformular auf salepix.de. Bitte nennen Sie die Plugin-Version und Ihre JTL-Shop-Version.