How do I prevent customers from checking out before Supertime is loaded?

Supertime by default is loaded using Shopify's script tag feature, which means we are loaded after the initial page is loaded, which can lead to Supertime being loaded slowly on slow connections especially if you happen to have a lot of scripts, apps or plugins in your storefront. You may also want to load Supertime earlier by adding our script directly to your store or cart. If a date or time slot is required to checkout on your store, you may want to follow the steps below.

Disable Checkout Button by Default to Allow Supertime to Collect Required Date or Time Data

You may want to additionally restrict your customers from being able to checkout with the additional step of disabling your checkout button by default. Otherwise, your customers may be able to checkout before apps like Supertime have loaded in your theme's cart.

Common Issues:

If you have tried applications that interact with your cart and checkout flow, these can prevent Supertime or the methods below from disabling your checkout button even if you have uninstalled the apps if you have not removed the code snippets created by these third party applications in your cart (e.g. apps from popular vendors like HulkApps)
If you have tried applications that interact with your cart and checkout flow, these can slow down apps from loading in your cart via Script Tags even if you have uninstalled the apps if you have not removed the code snippets created by these third party applications in your cart
If you have not performed the steps below and you have customers that are accessing your store on a slow connection

You can update your theme to disable the checkout button by following the instructions below. Supertime will manage your checkout button's state once it is loaded in your cart.

Method 1: Disable the button directly in your theme

Here's an example of how to disable your checkout button on the Debut theme:

Visit your store's Theme settings.
Click the Actions button and select Edit Code. Find your template file where the checkout button would be (e.g. in our case, it's in Sections > cart-template.liquid)
Add disabled within the <button> or <input> field of the checkout button as an attribute. It should look like the following lines of code for the Debut theme:

                <input type="submit" name="checkout"
                  class="cart__submit btn btn--small-wide"
                  value="{{ 'cart.general.checkout' | t }}" disabled>

Click the Save button. Your checkout will be disabled by default, and Supertime will enable this button automatically, especially when your customers have provided required information for checkout.

Method 2: Insert a Snippet of Code to Disable Your Checkout Button on Load

Note: This method works if your theme has checkout buttons that have an attribute of name="checkout" and your checkout button is an <input> or <button> element, and your cart isn't a custom loaded via JavaScript.

Steps:

1. Copy and paste this snippet below - this snippet will search for your buttons and set the checkout buttons to be disabled on load before Supertime is loaded:

   <script>
     document.addEventListener("DOMContentLoaded", function(event) {
		var checkoutButtons = document.body.querySelectorAll('button[name="checkout"], input[name="checkout"]')
        checkoutButtons.forEach(function(button) {
			button.disabled = true;
		});
     });
  </script>

2. Visit your store's Theme settings.
3. Click the    Actions button and select Edit Code.
4. Find your theme.liquid file if you have a cart that is present on all your pages.
5. Paste the provided snippet immediately below your   <body> tag in that file.

How do I prevent customers from checking out before Supertime is loaded?

Related Articles