How to Customize the Facet Loader
By default, loading images will appear whenever facets refresh. However, this can be totally customized in FacetWP 1.6.0 and above.
Change the loader image
When facets refresh, the facet options get replaced with a loading <div>:
<div class="facetwp-loading"></div>
It uses a CSS background image, which can be changed with a little extra CSS:
.facetwp-loading {
background: url(PATH_TO_YOUR_IMAGE.png) no-repeat;
}
Add entirely custom actions
FacetWP 1.6.0 includes a way to add a custom loading handler. It involves attaching a function to the FWP.loading_handler javascript variable.
<script>
(function($) {
$(function() {
// Make checkbox options semi-transparent
FWP.loading_handler = function(params) {
params.element.find('.facetwp-checkbox').css('opacity', 0.5);
}
});
})(jQuery);
</script>
When using FWP.loading_handler
, an object with 3 elements is passed in:
params.element // the facet DOM element
params.facet_name // the facet name
params.facet_type // the facet type
Hide the loading animation
To skip the loading animation, set FWP.loading_handler
to an empty function:
<script>
(function($) {
$(function() {
FWP.loading_handler = function() { }
});
})(fUtil);
</script>