How can I make sure that the customer first accepts the terms and conditions in my shop before they procees to the checkout?
This tutorial requires advanced HTML, CSS and JavaScript knowledge. It is best if you send this to your theme developer.
To make the functionality, which requires the customer to check the terms and conditions checkbox before they can proceed to the checkout, compatible with Bundler, you have to prevent clicks on the checkout button with the CSS property called pointer-events. Catching the event with JavaScript may not always work, as Bundler also listens on the click event on the checkout buttons.
The code sample here shows how to toggle the CSS class button-disabled on the checkout button based on the state of the terms and conditions checkbox. This class disables the click events on the checkout button.
This tutorial requires advanced HTML, CSS and JavaScript knowledge. It is best if you send this to your theme developer.
To make the functionality, which requires the customer to check the terms and conditions checkbox before they can proceed to the checkout, compatible with Bundler, you have to prevent clicks on the checkout button with the CSS property called pointer-events. Catching the event with JavaScript may not always work, as Bundler also listens on the click event on the checkout buttons.
The code sample here shows how to toggle the CSS class button-disabled on the checkout button based on the state of the terms and conditions checkbox. This class disables the click events on the checkout button.
<input id="terms-and-conditions" type="checkbox" /><span>I agree with terms and conditions.</span>
<input id="checkout-button" class="button-disabled" type="submit" name="checkout" value="Checkout">
<style>
.button-disabled {
opacity: .7;
/* The pointer-events property prevents any clicks on the button. */
pointer-events: none;
cursor: not-allowed;
}
</style>
<script>
var checkbox = document.querySelector("input#terms-and-conditions");
var checkoutButton = document.querySelector("#checkout-button");
checkbox.addEventListener('change', function() {
if (this.checked) {
// Checkbox is checked. Remove the button-disabled class
checkoutButton.classList.remove("button-disabled");
} else {
// Checkbox is NOT checked. Add the button-disabled class
checkoutButton.classList.add("button-disabled");
}
});
</script>