Eigene Altersklassen hinterlegen

Standardmäßig enthält der Shop die Altersfreigabeklassen der USK. Diese werden als Siegel in der Artikeldetailansicht im Shop dargestellt, wenn dem Artikel im ❯Reiter Onlineshop der Artikelverwaltung ein korrespondierender Wert im Feld "Altersfreigabe" eingetragen wird.

Wird also der Altersfreigabewert von 16 hinterlegt, erscheint folgender Hinweis im Shop:

Es kann aber auch vorkommen, dass andere Kennzeichen hinterlegt werden sollen, die nicht über bspw. das System der ❯Energieeffizienzklassen abgebildet werden können oder sollen.

Im Folgenden wird eine Einrichtung einer neuen Altersklasse anhand der Kennzeichnung der Spielzeugrichtlinie durchgeführt.

Die hier dargestellten Anpassungen sind bis auf Weiteres update-sicher, d.h. reguläre Template-Updates können weiterhin über das Shop-Management ausgeführt werden.

Vorbemerkung

Die Richtlinie 2009/48/EG des Europäischen Parlaments und des Rates vom 18. Juni 2009 (auch "Spielzeugrichtlinie" genannt) fordert in Anhang V, Teil B eine Kennzeichnung für Spielzeug, welches nicht für Kinder bis zu einem Alter von 36 Monaten bestimmt ist.

Derartige Produkte müssen bspw. mit folgendem Kennzeichen versehen werden:

Template anpassen

Am Shop-Template müssen zwei Anpassungen vorgenommen werden, weshalb der aktuelle Template-Satz heruntergeladen werden muss. Dies ist im Shop-Management unter Shop-Design > Shop-Templates möglich.

Anschließend muss die geladene .zip-Datei entpackt werden, um den Template-Satz bearbeiten zu können.

Grafik hinterlegen

Im ersten Schritt muss im Template-Ordner \nav\icons die zu verwendende Grafik hinterlegt werden.

Diese sollte vom Dateityp .png sein und die Abmaße 40 x 40 px haben, um sich in das bestehende Informationsgefüge der Artikeldetailansicht einzufügen.

Im vorliegenden Beispiel also diese:

Template-Datei erstellen

Im Ordner \templdes Template-Satzes finden sich mehrere Dateien, deren Bezeichnung mit altersflag beginnt und die sich in drei Typen einteilen lassen:

• altersflag_n.htm
• altersflag_s_n.htm
• altersflag_s_json_n.htm

(n ist ein Platzhalter für eine beliebige Zahl.)

Für den hier vorliegenden Fall sind nur die Dateien vom Typ altersflag_n.htm relevant. Bei diesen handelt es sich um kleine Code-Schnipsel, welche die Darstellung des Kennzeichens und des zugehörigen Textes in der Artikeldetailansicht steuern.

Die angehangenen Zahlen korrespondieren mit demjenigen Wert, der im Reiter Onlineshop der Artikelverwaltung als "Altersfreigabe" hinterlegt wurde. Wird in diesem Feld somit bspw. eine 12 eingetragen, wird die Template-Datei altersflag_12.htm ausgespielt.

Der Shop prüft also bei einem vorhandenen Wert im Feld "Altersfreigabe", ob eine zugehörige Template-Datei vorhanden ist und spielt diese aus.

Im vorliegenden Beispiel wird also eine Datei altersflag_3.htm erstellt und folgender Inhalt eingefügt:

<div class="agerating agerating_3" title="{s}Nicht f&uuml;r Kinder unter drei Jahren geeignet.{e}">
  <span class="icon-spielzeug3"></span>
  <div class="text font--small"><br>{s}Nicht f&uuml;r Kinder unter drei Jahren geeignet.{e}</div>
</div>

Hier sind mehrere Dinge wichtig:

• In Zeile 1 wird gleichzeitig eine neue CSS-Klasse erstellt, die idealerweise auf dieselbe Zahl referenziert wie die Altersfreigabeklasse, hier also agerating_3. Diese Klasse werden wir später noch im CSS definieren.
• In Zeile 2 wird ebenfalls eine CSS-Klasse erstellt (icon-spielzeug3). Diese Klasse enthält das auszuspielende Bild und wird ebenfalls später ausgestaltet.
• Die Texte in den Zeilen 1 und 3 (hier "Nicht für Kinder unter drei Jahren geeignet.") sind frei definierbar.
  Zu beachten ist allerdings:
  • Die Start- und Endpunkte {s} und {e} müssen unbedingt erhalten bleiben.
  • Sonderzeichen wie Umlaute, Ligaturen etc. müssen in ihrer HTML-Notation oder ihrer Entity-Darstellung hinterlegt werden.
    Eine Übersicht findet sich bspw. auf dieser Seite. Ein Ä lässt sich also mittels Ä oder Ä darstellen.

Template hochladen

Wurden diese Anpassungen durchgeführt, kann das Template wieder gepackt und im Shop-Management unter Design und Darstellung > Shop-Templates hochgeladen werden.

CSS hinterlegen

Da neue CSS-Klassen angelegt wurden, müssen diese noch definiert werden. Im Shop-Management unter Design und Darstellung > Shop-Design > Erweiterung durch individuelle CSS-Inhalte > CSS - Anfang muss dazu der folgende Code hinterlegt werden:

.agerating_3 {
  font-size: 0.9em;
  margin-bottom: 1em;
}

.agerating_3 .icon-spielzeug3 {
  background-image: url(../nav/icons/unter3.png);
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  display: block;
  background-position: 0 0;
}

.agerating_3 .text {
  padding-left: 44px;
  margin-top: -40px;
}

Hierbei ist wichtig, dass die Bezeichnungen der Klassen mit den vorher festgelegten übereinstimmen. In diesem Fall also .agerating_3 und .icon_spielzeug3.

Außerdem muss der Dateiname des Bildes in der Style-Anweisung background-image mit dem im Ordner \nav\icons eingefügten identisch sein.