less than a minute read • Updated 9 minutes ago
Hide add to cart forms until the page loads
How to hide add to cart forms and links until your page fully loads to prevent early add to cart clicks.
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>