Validating your cart before checkout in the Revy Bundle App (useful for TOS checkbox)

There are cases where you want to validate some field before checkout, and since our Revy Bundles App takes control of the checkout button you need to use our validation function to achieve this.

This custom code is useful if you have for example a TOS (terms of service) checkbox that you want to validate before letting your customers check out.

The code below is an example, you can copy and paste that but you need to update accordingly, check the comments and the notes below and update accordingly your theme and as you wish to use it.

Example

<script>
window.revyBundleDataLayer = window.revyBundleDataLayer || []; 
window.revyBundleDataLayer.push({onReady: function() {
  window.RevyBundle.api.checkoutValidator = function() {
    let checkbox = document.querySelector(".my-tos-checkbox");
    if(checkbox.checked) {
      return true // If returns true the checkout continues
    } else {
      alert("Please accept our Terms of Service before proceed!");
      return false; // If returns false the checkout redirection is stopped
    }
  }
}}); 
</script>

We do recommend putting this code in the final of the snippets/revy-bundle-script.liquid file, this way you keep your theme clean and concentrate all the Revy Bundle App custom code in just one place.

How the example works

Basically this code uses the Revy Bundle Callback "onReady" that executes the code inside when the app is ready.

Then the function window.RevyBundle.api.checkoutValidator is responsible for executing the code inside and returning true if you want to proceed to checkout, and false if not.

In the example above I'm checking if a checkbox is checked before proceeding, this is just an example of code, you need to modify the function to check whatever you want and return true (if you want to continue the checkout) or false, if you want to stop the checkout redirecting.

We do recommend using this validation function inside the onReady callback to avoid errors, the example uses it and you should use it too.

If you have questions or don't know how to implement please ping us at [email protected], and we can help you or implement it for you ASAP ;).