In diesem Artikel zeigen wir Ihnen, wie Sie eine Warenkorb Checkbox in Shopify erstellen, sodass Ihre Kunden die AGB und Widerrufsbelehrung vor einem Kauf bestätigen müssen.
Warum eine Warenkorb Checkbox?
Schließt ein Kunde bei Ihnen einen Kaufvertrag ab, ist es wichtig, dass der Kunde die AGB und das Widerrufsrecht für diesen Kauf kennt. Um zu gewährleisten, dass Kunden nicht willkürlich bestellen können, ohne über Ihre AGB, sowie Widerrufsbelehrung informiert zu sein, gibt es besagte Checkboxen.
Checkboxen sind ein simples HTML-Element, welches anklickbar ist. Mit ein bisschen Code – keine Sorge, wir zeigen Ihnen genau, was Sie tun müssen – können Sie also eine Warenkorb Checkbox einrichten, ohne dessen Bestätigung kein Kunde zur Kasse weitergeleitet wird.
Damit das optimal klappt, empfehlen wir alle Instant-Pay-Buttons oder auch Jetzt-Kaufen-Buttons aus Ihrem Shop zu entfernen. Diese können leider zu Komplikationen führen, ebenso wie der eingeschobene Warenkorb. Es ist also besser, eine feste Warenkorbseite in Ihrem Shopify Shop zu nutzen.
Debut-Theme
Die folgende Anleitung ist für das Debut-Theme und ähnliche ältere Themes gedacht. Falls Sie moderne Themes, wie das Dawn-Theme, nutzen, klicken Sie hier.
Eine Warenkorb Checkbox hinzufügen
Erstellen Sie zuerst eine Kopie Ihres Themes, sollte bei der Bearbeitung des Codes ein Fehler auftreten.
1. Öffnen Sie den Code Ihres Themes unter Onlineshop → Themes → Aktuelles Theme → Aktionen → Code bearbeiten.
2. Suchen Sie im Abschnitt Assets nach: theme.js oder theme.js.liquid
3. Fügen Sie am Ende der Datei den folgenden Code ein:
$(document).ready(function() { $('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() { if ($('#agree').is(':checked')) { $(this).submit(); } else { alert("Um fortzufahren, willigen Sie den AGB und der Widerrufsbelehrung ein."); return false; } }); });4. Klicken Sie auf Speichern.
5. Unter Sections, gehen Sie in die Datei: cart-template.liquid, wenn in Ihrem Theme diese Datei nicht in den Sections vorhanden ist, suchen Sie in den Templates nach cart-template.liquid oder cart.liquid.
6. Fügen Sie über dem Checkout-Button den folgenden Code ein:
<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree">
<label style="display:inline; float:none" for="agree">
I willige den <a href="/pages/terms-and-conditions">AGB</a> ein.
</label>
</p>7. Klicken Sie auf Speichern.
Dawn-Theme
Diese Anleitung ist für das Dawn-Theme und ähnlich moderne Themes gedacht. Erstellen Sie zur Sicherheit eine Kopie Ihres Themes, bevor Sie Änderungen am Code durchführen.
jQuery einbinden
Starten Sie, indem Sie den folgenden Code zwischen die Head-Tags (<head>…</head>) der theme.liquid-Datei einfügen:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>Eine Warenkorb-Checkbox hinzufügen
Fügen Sie den folgenden HTML-Code zur zur main-cart-footer.liquid (Zeile 53/54) und cart-notification.liquid (Zeile 24) hinzu und ändern Sie ggf. den Text ab.
<p>
<input type="checkbox" id="agree">
<label for="agree">
Ich willige der <a href="/policies/privacy-policy">Datenschutzerklärung</a>, den <a href="/policies/terms-of-service">AGB</a> sowie der <a href="/policies/refund-policy">Widerrufsbelehrung</a> wissentlich ein.
</label>
</p>JavaScript einfügen
Fügen Sie den folgenden JavaScript-Code ans Ende der cart.js und cart-notification.js ein.
$(document).ready(function() {
$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
if ($('#agree').is(':checked')) {
$(this).submit();
}
else {
alert("Bitte willigen Sie unseren Rechtstexten ein, um fortzufahren.");
return false;
}
});
});Das war’s – Glückwunsch!
Antworten
Hallo und besten dank für die erklärung vom checkbox habe eins zu eins nach gemacht jedoch funktioniert es immer noch nicht und das zweite Problem ist das es in der Bestellbestätigungsemail leere AGB versendet bitte um Hilfe.
Danke Gruss Hischam
Hallo Hischam,
ich habe Dir soeben via E-Mail geantwortet.
Beste Grüße aus Berlin
Ole N. Mai
Hallo Ole,
das ist wohl die beste Anleitung, die ich nach 4 Stunden nervenaufreibender Google Suche gefunden habe. Danke für diese Anleitung. Ich habe allerdings die Herausforderung, dass ich für eine Kundin eine weitere Checkbox hinzufügen muss. Hierfür habe ich einfach in main-cart-footer.liquid und cart-notification.liquid den Bereich … mit anderem Inhalt einfügt.
Es wird auch alles angezeigt – allerdings selbst wenn ich die Checkboxen aktiviere, komme ich nicht in den Checkout-Bereich.
Wo habe ich hier einen Denkfehler, bzw. könntest du mir hierfür eine schnelle Lösung anbieten?
Vielen lieben Dank im Vorraus,
Sabrina
Hallo Sabrina,
vermutlich liegt der Fehler im JavaScript-Code.
Damit eine zweite Checkbox registriert werden kann, musst Du die beiden JavaScript-Codes etwas anpassen.
Füge in der if-Funktion eine weitere ID hinzu, welche als „checked“ markiert werden muss.
Beispiel 1/2:
$(document).ready(function() {$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
if ($('#agree').is(':checked') && $('#confirm').is(':checked')) {
$(this).submit();
} else {
alert("Um fortzufahren, willigen Sie den AGB und der Widerrufsbelehrung ein.");
return false;
}
});
});
Beispiel 2/2:
$(document).ready(function() {$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
if ($('#agree').is(':checked') && $('#confirm').is(':checked')) {
$(this).submit();
} else {
alert("Bitte willigen Sie unseren Rechtstexten und bestätigen Sie unsere Bedingungen, um fortzufahren.");
return false;
}
});
});
Hier habe ich mit den Zeichen && festgelegt, dass es noch eine zweite ID gibt, in diesem Fall „confirm“, welche angeklickt werden muss.
Wichtig hierbei ist, dass Du diese ID auch im Element HTML-Element festlegst (z. B.: id=”confirm”).
Hoffentlich konnte ich Dir damit weiterhelfen.
Beste Grüße aus Berlin
Ole N. Mai
Hallo zusammen,
vorab vielen Dank für die eigentlich sehr hilfreiche Anleitung!
Soweit hat alles super funktioniert bis auf einen fatalen Fehler.
Ich konnte keine Produkte mehr dem Warenkorb zuweisen. Sobald ich auf Artikel dem Warenkorb zuweisen geklickt habe ist das Feld weiß geworden und war nichtmehr klickbar.
Das Produkt wurde auch nicht dem Warenkorb hinzugefügt.
Das das Feld nicht klickbar ist und weiß wird ist in so fern normal, dass es sobald das Produkt dem Warenkorb hinzugefügt ist, es wieder gehen sollte. (Ladezeit = nicht anklickbar)
Eventuell hakt es bei mir an der Problematik, dass das Produkt nicht dem Warenkorb hinzugefügt wird und sich somit die Seite aufhängt?!
Ich benutze das Theme Craft.
Sollte ich über den direkt kaufen Button gehen und dann den Kauf abrechen ist das Produkt im Warenkorb und es wird alles richtig angezeigt.
Ich würde mich sehr über eine kleine Hilfestellung freuen.
Viele Grüße
Ben Dahlhaus
Hallo Ben,
ich habe soeben versucht, den besagten Fehler in Deinem Onlineshop zu reproduzieren.
Bei mir ist jedoch kein Problem aufgetreten – weitere Produkte/Artikel konnten dem Warenkorb hinzugefügt werden.
Sollte bei Dir weiterhin besagter Fehler auftreten, melde Dich gerne noch einmal.
Beste Grüße aus Berlin
Ole N. Mai
Hallo,
Ich habe alles gemacht wie in dem Video und hier in der Anleitung, allerdings komme ich nicht in den Checkout, selbst wenn ich den Haken aktiviere.
Dort wird mir dann immer die Meldung angezeigt, ,,Bitte willigen Sie unseren Rechtstexten ein, um fortzufahren.´´, auch wenn ich den Haken aktiviere.
Ich bitte um Hilfe, danke.
LG
Ahmad
Hallo Ahmad,
welches Theme verwendest Du in Deinem Onlineshop?
Beste Grüße aus Berlin
Ole N. Mai
Hallo und vielen Dank für die tolle Erklärung zum Dawn-Theme!
Soweit hat das Einfügen der Checkbox für den Warenkorb gemäß Anleitung funktioniert.
Wenn ich ein Produkt dem Warenkorb hinzufüge, erscheint ein Popup mit dem aktuellen Warenkorb. Hier kann ich in der Checkbox den Haken setzen und gelange über den Button “Auschecken” zum Checkout. Soweit wie geplant.
Wenn ich aber über das Warenkorb-Icon oben rechts den Warenkorb als Seite öffne, dort den Haken der Checkbox aktivere und dann über den Button “Auschecken” zum Checkout gelangen möchte, erscheint die Fehlermeldung “Du musst erst bestätigen” zwei mal hintereinander. Zum Checkout gelange ich nicht.
Ich habe ein wenig herumgespielt und herausgefunden, dass wenn ich den angegebenen Java-Code in cart.js entferne, in den Warenkorb navigiere, dort den Haken setze und auschecken möchte die Fehlermeldung nur noch einmal erscheint.
Könnt ihr mir bitte helfen, diesen fehler zu beheben?
Besten Dank und freundliche Grüße
Marius