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!
