Disable Add to Cart button until Product Options has loaded

Overview:

Our application is Asynchronous, which simply means, that your theme has a higher priority of loading first than our app does. So, there is typically a brief moment where your add to cart button might pop in before our Custom Product Options app does. This may allow for an overzealous customer to very quickly reach the page and press the add to cart button before your required fields have popped in. The tutorial below will completely disable the Add to Cart button until our app is done loading. That way, there is no chance of the lightening fast customer to get a product without first selecting that product's required options.

---

Step 1: Edit Add To Cart Button

The first step will be to add disabled="disabled" to your add to cart button, and change the button text to  "Loading...".

---

Step 2: Add Snippet to Theme.liquid

Paste the following snippet just before the closing </body> item in your theme.liquid file. 

Javascript Version (preferred)

document.querySelector('body').addEventListener("productOptionsLoadedJS", function(e) {
   //console.log("Product Options Loaded");

   var btn = document.querySelector("button.btn--add-to-cart");
   if(btn != null){
      btn.removeAttribute("disabled"); 
   }

   setTimeout(function() { 
     btn.removeAttribute("disabled"); 
   }, 3000);
});

jQuery Version

{{ 'https://productoptions.w3apps.co/js/options.js' | script_tag }}
<script type="text/javascript">
 $( document ).ready(function() {
   w3productOptionsJS($);
 });

  $('body').on("productOptionsLoaded", function() { 
    $(".add_to_cart").removeAttr("disabled");
    $(".add_to_cart .text").text("Add to Cart"); 
  }); 

  setTimeout(function() { 
    $(".add_to_cart").removeAttr("disabled");
    $(".add_to_cart .text").text("Add to Cart"); 
  }, 3000);
</script>

---

What this snippet does:

The First Function will manually load Custom Product Options for a faster load time.

The second function will set the Add to cart button as Enabled when our app is done loading, and change the text to "Add to Cart".

This third function will wait a maximum of 3 seconds and set to Enabled if for whatever reason our app does not load.

---