also im ersten
Shop ist es extremer weil da das Gewerbeaufsichtsamt oder so verlangte, dass auch die kleinen Fähnchen "in unmittelbarer Nähe zum Preis sein mussten" auch die Beschriftung muss genau so groß sein, wie die Beschriftung vom Preis.im zweiten Shop werden keine Leuchtmittel verkauft, daher ist das dort nicht erforderlich, oder es hat nur noch keiner bemängelt, ich bin ja nicht für das rechtliche Verantwortlich und setze das gewünschte um.
Also was ich dort gemacht habe:
ich habe zwei Freitextfelder angelegt, in einem steht die Energieklasse, beispielsweise für Leuchtmittel "A+,A,A++ usw..."
Für Lampen mit Leuchtmittel habe ich die Bezeichnung "L-A,L-A++ usw." verwendet, da diese ein anderes Label und andere Daten haben.
im zweiten Freitextfeld stehen die Daten wie 5kwh/1000h usw.
Ich habe dann Grafiken erstellt die genau diese Bezeichnungen haben, mit einem .jpg angehangen, also z.B. "Label-L-A++.jpg" fürs Label und die Siegel heisst dann nur "L-A++.jpg"
Freitextfelder wären bei dir nun Beispielsweise Funktionsattribute.
Das Energielabel habe ich dann mittels JavaScript als modales Fenster geöffnet und die Werte wie Artikelnummer, Hersteller und die Leistungsdaten dann auch über JS absolut positioniert eingefügt.
Du bist ja bei dir schon beim Preis mit dem "fähnchen", ich würde das daneben setzen, ich glaube das war gefordert, die Artikelboxen im Listing findest du ja in
productlist/item_box.tpl die Preisanzeige wird in allen Fällen immer von
productdetails/price.tpl verwendet, daher solltest du lieber diese nehmen, da du deine Vorgaben ja auch in den Bestsellern usw. bereitstellen musst.
Dein Modales Fenster was du dann immer öffnest, das kannst du ja irgendwo im footer einmalig hinterlegen.
Als Beispiel füge ich hier mal einfach den code für das Modale Fenster ein, auch im Listing verwende ich nur dieses eine, das dann jeweils mit den passenden Daten gefüttert wird, es wäre ja Wahnsinn, für jedes Leuchtmittel ein eigenes Energielabel bereitzustellen:
PHP:
<div class="modal fade in" id="energielabel" tabindex="-1" role="dialog" aria-labelledby="energielabel" aria-hidden="false" style="display: block;">
<div class="modal-dialog" style="width:90%; max-width:340px;">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<div class="e-label">
<img id="e-label-image" src="/layout/callisto_2_3/img/energielabel/label-A+.png" alt="">
<span id="e-label-art-lampe" data-label-type="A+"></span>
<span id="e-label-art-leuchtmittel" data-label-type="A+">E27_B45_SMD12</span>
<span id="e-label-leistung" data-label-type="A+"><span class="text-bold">5</span> kWh/1000h</span>
</div>
</div>
</div>
</div>
</div>
</div>
und das Script ist ja auch recht einfach aufgebaut, wie gesagt ich unterscheide hier zwischen Leuchtmittel und Lampe
PHP:
<script>
jQuery(".energielabel-button").on("click", function(e) {
e.stopPropagation();
var artnr = jQuery(this).data("art-lampe");
var label = jQuery(this).data("art-label");
var leistung = jQuery(this).data("art-leistung");
show_energie_label(artnr,label,leistung);
});
function show_energie_label(artnr,label,leistung) {
jQuery("#e-label-image").attr("src","/layout/callisto_2_3/img/energielabel/label-"+label+".png");
if(label.match(/L-/)) {
jQuery("#e-label-art-lampe").html(artnr).attr("data-label-type",label);
jQuery("#e-label-art-leuchtmittel").html("").attr("data-label-type",label);
jQuery("#e-label-leistung").html("").attr("data-label-type",label);
}
else {
jQuery("#e-label-art-leuchtmittel").html(artnr).attr("data-label-type",label);
jQuery("#e-label-art-lampe").html("").attr("data-label-type",label);
if(Number(leistung) > 0) jQuery("#e-label-leistung").html("<span class='text-bold'>" + leistung + "</span> kWh/1000h").attr("data-label-type",label);
}
jQuery("#energielabel").modal("show");
return false;
}
</script>