technische Umsetzung der geschachtelten Anzeige im Onlineshop nach 518/2014

Sie sehen unten ein Beispiel, wie sie auf Ihrer Webseite die Anforderung der Verordnung erfüllen können. Je nach Onlineshopsoftware müssen Sie dieses Beispiel anpassen. Der Code besteht aus einem kleinen Javascript, das eine Funktion „toggle“ definiert und einem HTML-Code, der mittels dieser Funktion das Label durch einen Mausklick einblendet. Das Beispiel funktioniert auch bei Touchscreens.

Es sind auch einfache Lösungen zulässig:

  • Popup-Fenster,
  • Anzeige in neuer Registerkarte,
  • Anzeige auf neuer Seite

Interessant ist dabei, dass nach deutscher Rechtsprechung mouseovers bisher nicht erlaubt sind (LINK), die Verordnung dieses aber hier zulässt. Auch POPUP-Fenster sind kritisch zu sehen, weil diejenigen, die POPup-Blocker eingeschaltet haben, das Label nicht sehen können. Neuere Browser haben das oft als Standard eingeschaltet, so dass wir von Polpup-Fenstern abraten.

Magento-Shops können eine solche Lösung auch mittels Attribut-Feldern darstellen. Falls sie einen Magnet-Shop haben, können wir solche Anpassungen für Sie durchführen, da wir selbst schon einige Magnet-Shops erstellt haben. (Anfrage an support@eulabel.de)

Im Beispiel werden dynamische Links zu eulabel.de verwendet, um das Label anzuzeigen. Der Link lässt in Echtzeit von EULabel das Label erzeugen. Vorteil dieser Methode ist, dass Sie für ein Produkt immer ein aktuelles Label haben, weil es der Hersteller pflegt. Sie können aber auch diese Links durch Links zu Labels, die irgendwo auf ihrem Webspace liegen, ersetzen.

Die codeschnipsel können sie hier downloaden:
[title size=“2″]Link zum Anzeigen eines Labels[/title] Diese Leuchte enthält eingebaute LED-Lampen. Die eingebauten LED-Lampen entsprechen den Energieklassen A bis A++. Die Lampen können in der Leuchte nicht ausgetauscht werden.

einfaches Codebeispiel:

<script type="text/javascript">
function toggle(id){
    e = document.getElementById(id);
    if(e.style.display=='none'){
       e.style.display = 'inline-block';
    }else{
       e.style.display = 'none';
    }
}
</script>
<a style="cursor:pointer" onclick="toggle('l1')">
    <img style="border:none" src="a++.png" alt="Diese Leuchte..." title="Diese Leuchte...">
</a>
<img id="l1" style="display:none"  src="label1.png" 
                title="Diese Leuchte..." alt="Diese Leuchte..." onclick="toggle('l1')" >

..

Auf mobilen Geräten (iPad) sieht das dann so aus:
energy-efficiency_labeling_mobile

nach einem Tipp auf den Pfeil erscheint das Label. Hält man den Finger kurze Zeit auf das Label erscheint der Alt-Text. Auf Desktops genügt es, den Mauszeiger über das Label zu halten, einige Sekunden später erscheint der Alt-Text. Die Alt-Texte oder den Title-Tag haben wir im Hinblick auf Anhang VIII, Absatz 4, Buchstabe g) in den Code eingebaut. Die dort stehenden Anforderungen gelen eigentlich für den Fall, wenn keine Bilder angezeigt werden können. Diese Situation ist unrealistisch, weil ohne Bildanzeige der Onlineshop unbrauchbar sein dürfte.

November 4, 2014   2404   eulabel    Labeln  
Total 0 Votes:

Tell us how can we improve this post?

+ = Verify Human or Spambot ?