Im Quelltext welchen ich soeben erhalten habe ist die Struktur eindeutig: Die Seite ist s2dsummary.php, enthält das Formular der Zusammenfassung und ganz am Ende innerhalb dieses Formulars den Button „Bezahlpflichtig bestellen“.
Damit brauchen wir keine unsicheren Vermutungen über .checkout oder .basket mehr.
Der ideale Anker ist vorhanden
Der Bestellbutton lautet:
<button type="submit" class="sqrshopbutton sqrbuttonright">
<span>Bezahlpflichtig bestellen</span>
</button>
Damit können wir per JavaScript gezielt erkennen:
Befinden wir uns auf der Abschlussseite und gibt es den finalen Submit-Button?
Wenn ja, wird unmittelbar vor dem Bereich mit dem Bestellbutton der Gewährleistungshinweis eingefügt.
Ich würde den Checkout-Teil deshalb so schreiben:
<script>
document.addEventListener("DOMContentLoaded", function () {
/* =====================================================
EU-Gewährleistungshinweis
Zusatzanzeige auf SIQUANDO Abschlussseite
Shop 10 / 11 / 12
===================================================== */
var forms = document.querySelectorAll("form");
for (var i = 0; i < forms.length; i++) {
var submitButton =
forms[i].querySelector('button[type="submit"].sqrshopbutton');
if (!submitButton) {
continue;
}
var buttonText =
submitButton.textContent ||
submitButton.innerText ||
"";
/*
* Nur auf der endgültigen Bestellseite ausführen.
*/
if (
buttonText.indexOf("Bezahlpflichtig bestellen") === -1 &&
buttonText.indexOf("Zahlungspflichtig bestellen") === -1 &&
buttonText.indexOf("Kaufen") === -1
) {
continue;
}
/*
* Doppelte Einfügung verhindern.
*/
if (document.getElementById("sq-eu-checkout-guarantee")) {
return;
}
var box = document.createElement("div");
box.id = "sq-eu-checkout-guarantee";
box.className = "sqrpara";
box.innerHTML =
'<div class="sqrparabox">' +
'<p style="text-align:center;">' +
'<strong>Ihre gesetzlichen Gewährleistungsrechte</strong>' +
'</p>' +
'<p style="text-align:center;">' +
'<a href="https://europa.eu/youreurope/garantien" ' +
'target="_blank" rel="noopener noreferrer">' +
'<img src="/images/eu-gewaehrleistung-de.svg" ' +
'alt="EU-Hinweis zu den gesetzlichen Gewährleistungsrechten" ' +
'style="display:block;width:100%;max-width:750px;' +
'height:auto;margin:15px auto;border:0;">' +
'</a>' +
'</p>' +
'</div>';
/*
* Den kompletten SIQUANDO-Absatz mit dem
* Bestellbutton ermitteln.
*/
var buttonArea = submitButton;
while (
buttonArea &&
!buttonArea.classList.contains("sqrpara")
) {
buttonArea = buttonArea.parentNode;
}
if (buttonArea && buttonArea.parentNode) {
buttonArea.parentNode.insertBefore(
box,
buttonArea
);
}
return;
}
});
</script>
Das Entscheidende daran
Bei der an mich gelieferten (gesandten) Abschlussseite würde daraus:
Bestelldetails
Warenkorb / Endsumme
Ihre gesetzlichen Gewährleistungsrechte
[offizielle EU-Grafik]
Bezahlpflichtig bestellen
Das ist genau die Position, die wir gesucht haben.
Und wir können sie anhand deines Quelltexts technisch eindeutig bestimmen, weil Warenkorb, Endsumme und anschließend der eigene sqrpara-Block mit dem finalen Submit-Button innerhalb desselben Bestellformulars vorhanden sind.
Noch besser: unabhängig von s2dsummary.php
Ich würde absichtlich nicht nur die URL abfragen:
location.pathname.indexOf("s2dsummary.php")
sondern den tatsächlichen Bestellbutton erkennen.
Das macht die Lösung robuster, falls Shop 10 oder 11 eine etwas andere URL verwendet.
Auch die drei Texte
Bezahlpflichtig bestellen
Zahlungspflichtig bestellen
Kaufen
Fertiger Versuch für Shop / Washington
Diesen Code kannst du dort einsetzen, wo dein bisheriger Code in der Kontextspalte funktioniert. Wichtig ist nur, dass SIQUANDO diesen Code auch auf der Abschlussseite mit ausliefert.
<!-- ==========================================================
EU-GEWÄHRLEISTUNGSHINWEIS
SIQUANDO SHOP 12 R3 – DESIGN WASHINGTON
Zusatzanzeige auf der Bestell-Abschlussseite
========================================================== -->
<style>
#sq-eu-checkout {
box-sizing: border-box;
width: 100%;
margin: 20px 0;
padding: 15px;
border: 1px solid #cccccc;
background: #ffffff;
text-align: center;
}
#sq-eu-checkout-title {
margin: 0 0 12px 0;
font-weight: bold;
font-size: 16px;
}
#sq-eu-checkout img {
display: block;
width: 100%;
max-width: 700px;
height: auto;
margin: 0 auto;
border: 0;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
/*
* Finalen SIQUANDO-Bestellbutton suchen
*/
var buttons =
document.querySelectorAll('button[type="submit"].sqrshopbutton');
var orderButton = null;
for (var i = 0; i < buttons.length; i++) {
var text =
(buttons[i].textContent || buttons[i].innerText || "")
.replace(/\s+/g, " ")
.trim();
if (
text.indexOf("Bezahlpflichtig bestellen") !== -1 ||
text.indexOf("Zahlungspflichtig bestellen") !== -1
) {
orderButton = buttons[i];
break;
}
}
/*
* Kein finaler Bestellbutton:
* Dann befinden wir uns nicht auf der Abschlussseite.
*/
if (!orderButton) {
return;
}
/*
* Doppelte Anzeige verhindern
*/
if (document.getElementById("sq-eu-checkout")) {
return;
}
/*
* Den SIQUANDO-Absatz ermitteln,
* in dem der Bestellbutton steht.
*/
var buttonArea = orderButton;
while (
buttonArea &&
buttonArea !== document.body &&
!buttonArea.classList.contains("sqrpara")
) {
buttonArea = buttonArea.parentNode;
}
if (
!buttonArea ||
buttonArea === document.body ||
!buttonArea.parentNode
) {
return;
}
/*
* EU-Hinweis erzeugen
*/
var notice = document.createElement("div");
notice.id = "sq-eu-checkout";
notice.className = "sqrpara";
notice.innerHTML =
'<div id="sq-eu-checkout-title">' +
'Ihre gesetzlichen Gewährleistungsrechte' +
'</div>' +
'<a href="https://europa.eu/youreurope/garantien" ' +
'target="_blank" rel="noopener noreferrer">' +
'<img src="/images/eu-gewaehrleistung-de.svg" ' +
'alt="EU-Hinweis zu den gesetzlichen Gewährleistungsrechten">' +
'</a>';
/*
* Direkt VOR den SIQUANDO-Absatz mit
* "Bezahlpflichtig bestellen" einsetzen.
*/
buttonArea.parentNode.insertBefore(
notice,
buttonArea
);
});
</script>
Was damit konkret passiert
Das Script macht auf normalen Seiten zunächst gar nichts. Es sucht ausschließlich nach dem finalen SIQUANDO-Bestellbutton.
Auf der von dir gelieferten Abschlussseite findet es:
<button type="submit"
class="sqrshopbutton sqrbuttonright">
<span>Bezahlpflichtig bestellen</span>
</button>
---------------------------------------
Bestelldetails
---------------------------------------
Grosser Fliegenpilz 32,00 EUR
Versand 4,99 EUR
Endsumme 36,99 EUR
---------------------------------------
IHRE GESETZLICHEN
GEWÄHRLEISTUNGSRECHTE
[ vollständige offizielle EU-Grafik ]
---------------------------------------
[ Zurück ] [ Bezahlpflichtig bestellen ]
Ein Problem bleibt
Wenn SIQUANDO die Kontextspalte auf s2dsummary.php überhaupt nicht erzeugt, wird natürlich auch ein Script, das nur in dieser Kontextspalte steckt, dort nicht ausgeführt.
Das ist jetzt eigentlich die letzte technische Frage.
Wenn wir von diesem Shop auch noch den Quelltext einer normalen Seite mit dem von umsteiger bereits in die Kontextspalte gesetzten Label/HTML-Clip hätten, können die beide Quelltexte vergleichen werden. Dann sehen wir, wo SIQUANDO den Kontextspalten-Code tatsächlich einbaut und ob wir daraus einen globalen Einfügepunkt für Washington ableiten können.
Wichtiger Hinweis vorab
Alles, was ich hier zur Einbindung des neuen EU-Gewährleistungshinweises in SIQUANDO Shop 10, 11 oder 12 veröffentliche, ist lediglich ein Versuch, mit Unterstützung von ChatGPT eine möglichst einfache technische Lösung für ältere Shop-Versionen zu finden.
Ich selbst besitze diese SIQUANDO-Versionen nicht und konnte die hier veröffentlichten Scripts daher nicht selbst testen. Ich kann deshalb weder gewährleisten, dass sie in jeder Shop-Version, jedem Design oder jeder individuellen Konfiguration technisch einwandfrei funktionieren, noch dass dadurch sämtliche gesetzlichen Anforderungen erfüllt werden.
Die vorgeschlagenen Lösungen wurden ebenfalls nicht juristisch geprüft und stellen keine Rechtsberatung dar. Jeder Shopbetreiber ist selbst dafür verantwortlich, zu prüfen, welche gesetzlichen Anforderungen für seinen Shop gelten und ob die jeweilige Umsetzung diesen Anforderungen entspricht.
Mein Gedanke dahinter ist eigentlich ganz einfach: Gerade kleine und kleinste Onlineshops sollen vielleicht die Möglichkeit haben, notwendige Anpassungen mit überschaubarem Aufwand selbst vorzunehmen, anstatt für jede neue gesetzliche Vorgabe sofort kostenpflichtige Software-Upgrades, Erweiterungen oder externe Dienstleistungen in Anspruch nehmen zu müssen.
Und neue bzw. geänderte gesetzliche Anforderungen für Onlineshops gibt es inzwischen wahrlich oft genug.
Wer die hier veröffentlichten Lösungen ausprobiert, tut dies daher auf eigene Verantwortung. Über Rückmeldungen, ob und in welchen SIQUANDO-Versionen bzw. Designs die Scripts funktionieren, würde ich mich freuen. So können wir die Lösung gemeinsam verbessern.
Es geht hier ausdrücklich nicht darum, eine „rechtssichere Komplettlösung“ zu versprechen, sondern lediglich darum, eine mögliche technische Hilfestellung für kleinere Shops zur Verfügung zu stellen.