Neu Energielabel einbinden

WITTKO

Gut bekanntes Mitglied
15. Februar 2016
107
7
Hallo,
um dem Gesetzgeber gerecht zu werden hab ich das Energielabel auf den Detailseiten (details.tpl) eingebunden. Ich steuere das ganze dann über ein eigenes Feld über die WAWI.
Beispielseite: https://wittko.eu/3-Phasen-LED-Strahler-10-20-30-50W-Lichtfarben-kalt-oder-warmweiss-Alu-schwarz

Da auch in den Übersichtsseiten das Label dargestellt werden soll, muss ichs natürlich auch hier einbinden :( In was für einer .tpl kann ich die Einstellungen für die Übersichtsseiten hinterlegen?
Beispielseite: https://wittko.eu/Leuchten-fuer-Dreiphasen-Stromschienen

Vielleicht hat das ja auch schon jemand für sich umgesetzt und kann mir da etwas behilflich sein?

Danke und Gruß,
Stefan

P.S. wie bekomme ich die Attention-Überschrift im Popup weg?
 

WITTKO

Gut bekanntes Mitglied
15. Februar 2016
107
7
Hi,
im ersten Shop finde ich das perfekt umgesetzt. Bleibt für mich nur die Frage wie ich das Label auf die Übersichtsseite bringe :(

Ein Hinweis in welcher Datei ich das anpassen kann würde mir schon reichen.

Gruß,
Stefan
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
7.221
1.958
Berlin
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) &gt; 0) jQuery("#e-label-leistung").html("&lt;span class='text-bold'&gt;" + leistung + "&lt;/span&gt; kWh/1000h").attr("data-label-type",label);
    }
    jQuery("#energielabel").modal("show");
    return false;
}
  
  
</script>
 

chefsalat

Sehr aktives Mitglied
10. Januar 2013
245
101
Coole Lösung:
P.S: Hat das Label (class .energielabel-button) in Shop bewusst z-index:10 anstatt z.B. 9? Denn so ragt es in die Lupen-Grafik hinein, nur als Hinweis^^
 

WITTKO

Gut bekanntes Mitglied
15. Februar 2016
107
7
Super, danke für die Beiträge - einfach toll umgesetzt!

In unserem Fall muss ich allerdings sowieso mit einer Extragrafik pro Produkt arbeiten, da 1. wechselnde Hersteller und 2. die Produkte ja auch bei ebay und Amazon eingestellt werden sollen.
Da kann ich zwar direkt am Preis kein Label hinterlegen aber ich habs dann immerhin in den Bildern, auch wenns rechtlich nicht ordentlich gelöst ist...:(
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
7.221
1.958
Berlin
Also bei ebay ist es klar, da geht das mit dem label am Preis nicht, bei Amazon auch nicht, ich frage mich da sowieso, warum das zulässig ist und niemand abgemahnt wird.

bei ebay gehen wir über die ebay Vorlage den gleichen weg mit den Bilder (Deko Shop) udn ziehen diese dann aus dem Shop heraus, die Werte sind dann Statisch absolut positioniert. Amazon wird hier nicht bedient, da geht es dann nicht ohne Bild.

Aber wie gesagt ob das bei diesen beiden Anbietern alles so rechtens ist.....wer weiß, ob es da nicht irgendwann auch Stress geben wird.
 

WITTKO

Gut bekanntes Mitglied
15. Februar 2016
107
7
Der Tip das Label in der price.tpl zu hinterlegen wars! So einfach wenn mans weiß...;)
Das hab dann sogar ich mit meinen bescheidenen Fähigkeiten geschafft - herzlichen Dank dafür!

Zwei Kleinigkeiten möchte ich noch verbessern:
  1. Wie kann das Label in der Artikelübersicht links neben dem Preis dargestellt werden? Blicke in meiner custom.css nicht so wirklich durch:(
  2. Wie bekomme ich die Attention-Überschrift im Popup weg?

Sorry für die, in Profiaugen, wahrscheinlich dämlichen Fragen! Wäre nett wenn Ihr mir da nochmal unter die Arme greifen könnt...
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
7.221
1.958
Berlin
also,

als erstes solltest du die ID Energie direkt wieder killen :)
in deinem Listing wirst du sonst deine ID Energie locker 20 mal haben, das darfst du ja nicht, eine ID ist unique.

als stylesheet jetzt auf die Schnelle, würde ich im Listing das hier verwenden:
Code:
element.style {
  display: inline-block;
  position: relative;
  top: 7px;
}

aber ich weiß natürlich nicht was passiert wenn es einen Sonderpreis oder ähnliches gibt.

nochmal zu den Größen, das gewerbeaufsichtsamt möchte: "das die Schriftgröße des Labels die gleiche ist, wie die des Preises" das ist sonst ein Mangel, ich kann dir nicht sagen ob das nur so weil der eine Mitarbeiter es genau so wollte oder ob es grundsätzlich so ist, daher würde ich es genau in der gleichen Größe darstellen.

Wie bekomme ich die Attention-Überschrift im Popup weg?
gib deinem Link einen title, ich würde hier nicht global Energielabel nehmen, das wäre keywordspamming auf einem extrem schlechtem Niveau. trage dort den Lampennamen/typen ein.

in der Detailseite musst du dann auf diese bezogen, das label neu ausrichten, also top auf null oder weniger, auch hier passt die Schriftgröße preis/label nicht.
 

WITTKO

Gut bekanntes Mitglied
15. Februar 2016
107
7
Hi, ja das hab ich mir auch schon angesehen aber dann wieder verworfen. Grund war nur bis V 3.2 und auch die Demo-Site funktioniert wohl nicht. Vielleicht kann der Entwickler hier ja mal Stellung dazu nehmen...

Wollte das gerne aber selber umsetzen da ich in dem Bereich der absolute Anfänger bin gerne mal fitter werden würde ;)
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
7.221
1.958
Berlin

ag-websolutions.de

Sehr aktives Mitglied
29. Dezember 2009
14.548
232
über Plugin Preise anderer Service partner diskutiere ich nicht

Klar ist .... zu 99% kann ich alles was ein Plugin kann auch im Template einbauen ... aber ich muss es bei jedem Shop update neu verifizieren und ggfls. anpassen ... irgendwann muss ich hier manueller Aufwand gegen Lizenzpreis stellen
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
7.221
1.958
Berlin
Es geht ja auch um die Menge der Plugins in einem Shop, ich habe mittlerweile Shops gesehen mit mehr als 20 Plugins, da ist der Shop dann die extension.

Jedes Plugin zieht Performance und könnte ein Shopsystem irgendwo, negativ beeinflussen.
 

WITTKO

Gut bekanntes Mitglied
15. Februar 2016
107
7
Hab das Plugin jetzt getestet und werds wohl auch behalten. Allerdings werden die Labels in den Boxen (z.B. Bestseller, Neu im Sortiment, Unsere Empfehlungen usw.) nicht angezeigt. Haken bei den jeweiligen Labels sind gesetzt! Könnt Ihr da bitte nochmal drüberschauen...
 
Ähnliche Themen
Titel Forum Antworten Datum
Variationsertikel erstellen und in Woocommerce einbinden JTL-Wawi 1.9 4

Ähnliche Themen