Hier ist der Code den ich auf unserer Seite eingefügt habe. (Shop 11, Design New York)
Label erscheint dann nur im Checkout (s2dsummary.php) und ist oberhalb des "Kaufen"-Buttons eingefügt..
Bei anderen Designs müssten evtl. die CSS-Anweisungen im Bereich <style> </style> angepasst werden ?
Bei wem die Grafik einen anderen Dateinamen hat, der müsste den dann noch im Code entsprechend ändern.
Das Label ist nicht verlinkt, da (wie ich das verstanden habe) das aus rechtlicher Sicht nicht erforderlich zu sein scheint und ja im Label auch der QR-Code und darunter die Website-Adresse angegeben ist.
Über dem Label habe ich eine Überschrift eingefügt. Kann man machen, muß man aber nicht.
"Zurück" (zur vorherigen Seite im Checkout) ist jetzt als Text-Link dargestellt (war vorher ein Button). Der Button war vorher zu dominant neben dem "Kaufen"-Button.
Die hier im Code noch dargestellten Kommentare (jeweils zwischen /* und */) habe ich vor dem veröffentlichen des Shops entfernt. Kann man machen, muß man aber nicht.
<style>
/* =========================================================
EU-Gewährleistungsinformation im Checkout
========================================================= */
.sq-eu-guarantee-wrapper {
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 12px 0 14px 0;
padding: 0;
text-align: center;
clear: both;
}
/* =========================================================
Überschrift über dem EU-Label
========================================================= */
.sq-eu-guarantee-heading {
box-sizing: border-box;
width: 100%;
margin: 0 0 8px 0;
padding: 0;
text-align: center;
font-weight: bold;
}
/* =========================================================
Container für das EU-Label
========================================================= */
.sq-eu-guarantee-notice {
box-sizing: border-box;
width: 100%;
max-width: 700px;
margin: 0 auto;
padding: 0;
text-align: center;
}
/* =========================================================
EU-Grafik
========================================================= */
.sq-eu-guarantee-notice img {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 700px;
height: auto;
margin: 0 auto;
padding: 0;
border: 0;
}
/* =========================================================
BESTELLBEREICH IM CHECKOUT
Der Bestellbereich wird optisch vom EU-Label getrennt.
========================================================= */
.sq-eu-guarantee-wrapper + .sqrpara {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: none;
box-sizing: border-box;
margin: 28px auto 0 auto;
padding: 20px 20px 14px 20px;
border: 1px solid #d5d5d5;
}
/* =========================================================
KAUFEN-BUTTON
Groß, deutlich und zentriert.
========================================================= */
.sq-eu-guarantee-wrapper + .sqrpara button.sqrshopbutton {
display: block;
width: 100%;
max-width: 550px;
box-sizing: border-box;
margin: 0 auto;
padding: 15px 30px;
text-align: center;
font-size: 1.15em;
letter-spacing: 1px;
}
/* =========================================================
ZURÜCK-LINK
Optisch wie die vorhandenen sqrprevpage-Links:
einfacher Textlink, linksbündig unter dem Kaufen-Button.
========================================================= */
.sq-eu-guarantee-wrapper + .sqrpara a.sqrprevpage {
display: block;
width: 100%;
box-sizing: border-box;
margin: 10px 0 0 0;
padding: 0;
text-align: left;
background: none !important;
border: none !important;
color: inherit !important;
font-size: 0.95em;
font-weight: normal;
text-transform: none;
letter-spacing: normal;
text-decoration: underline;
}
/* Hover */
.sq-eu-guarantee-wrapper + .sqrpara a.sqrprevpage:hover {
background: none !important;
text-decoration: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
/* =========================================================
Nur auf der Checkout-Zusammenfassung ausführen
========================================================= */
if (
window.location.pathname.indexOf("s2dsummary.php") === -1
) {
return;
}
/* =========================================================
Bestellbuttons suchen
========================================================= */
var buttons = document.querySelectorAll(
'button.sqrshopbutton'
);
for (var i = 0; i < buttons.length; i++) {
/* =======================================================
Buttontext auslesen
Groß-/Kleinschreibung wird ignoriert
======================================================= */
var text = (buttons[i].textContent || "")
.replace(/\s+/g, " ")
.trim()
.toLowerCase();
/* =======================================================
Nur relevante Bestellbuttons berücksichtigen
Funktioniert z. B. bei:
KAUFEN
Kaufen
kaufen
Bezahlpflichtig bestellen
Zahlungspflichtig bestellen
======================================================= */
if (
text !== "kaufen" &&
text !== "bezahlpflichtig bestellen" &&
text !== "zahlungspflichtig bestellen"
) {
continue;
}
/* =======================================================
SIQUANDO-Bereich des Buttons suchen
======================================================= */
var buttonArea = buttons[i].closest(".sqrpara");
/*
* Alternative, falls der Button nicht innerhalb
* eines .sqrpara liegt
*/
if (!buttonArea) {
buttonArea = buttons[i].closest("#submittable");
}
if (!buttonArea || !buttonArea.parentNode) {
continue;
}
/* =======================================================
Doppelte Ausgabe verhindern
======================================================= */
var previous = buttonArea.previousElementSibling;
if (
previous &&
previous.classList.contains(
"sq-eu-guarantee-wrapper"
)
) {
continue;
}
/* =======================================================
Gemeinsamen Container erstellen
======================================================= */
var wrapper = document.createElement("div");
wrapper.className =
"sq-eu-guarantee-wrapper";
/* =======================================================
Überschrift
======================================================= */
var heading = document.createElement("div");
heading.className =
"sq-eu-guarantee-heading";
heading.textContent =
"Information der EU zu Ihren gesetzlichen Gewährleistungsrechten";
/* =======================================================
Container für das EU-Label
======================================================= */
var notice = document.createElement("div");
notice.className =
"sq-eu-guarantee-notice";
/* =======================================================
EU-Label
Das Label wird vollständig und direkt angezeigt.
Keine zusätzliche Verlinkung.
======================================================= */
notice.innerHTML =
'<img ' +
'src="/images/legal-guarantee_notice_de_768.jpg" ' +
'alt="EU-Hinweis zu den gesetzlichen Gewährleistungsrechten">';
/* =======================================================
Überschrift und Label zusammenfügen
======================================================= */
wrapper.appendChild(heading);
wrapper.appendChild(notice);
/* =======================================================
Gesamten Block VOR dem Bestellbereich einfügen
======================================================= */
buttonArea.parentNode.insertBefore(
wrapper,
buttonArea
);
}
});
</script>