Hide the add to cart forms and links before the page loads

By design, the Foxy javascript doesn't block a pageload, so clicking on an add-to-cart button before the page is fully loaded will take you to the full page cart. If you would like to prohibit this default behavior use the following JavaScript code snippet.

The following JavaScript code will select all DOM elements on a webpage which are Foxy add-to-cart links and forms, and set their display property to “none” until the FC (Foxy Cart) object is ready. At that point, the FC onload event will run a function, which in this case is adding additional event handles for the FC.client.on (ready.done) event. That then triggers a callback function that will iterate through the nodelist of selected elements and set their style property to block.

Put this code at the bottom of your page or template. It won't work in the head.

<script>
  /*
  match all a elements whose href attribute's value contains "/cart" and form elements 
  whose value of the action attribute contains "/cart"
  */
 
  var fcElements = document.querySelectorAll('a[href*="/cart"], form[action*="/cart"]');
 
  // iterate through the nodelist and set the display property to none
  for (var i = 0; i < fcElements.length; i++) {
    fcElements[i].setAttribute(
      "data-display-original-value",
      fcElements[i].style.display
    );
    fcElements[i].style.display = "none";
  }
 
  var FC = FC || {};
  FC.onLoad = function () {
    FC.client.on('ready.done', function () {
      for (var i = 0; i < fcElements.length; i++) {
        fcElements[i].style.display = fcElements[i].getAttribute("data-display-original-value");
      }
    }); //end of FC client.on
  }; //end of onload
</script>

Site Tools