Search & Filter Pro is a great WordPress filter tool, here is a guide to add a loading icon animation whilst the page is ajax refreshed when the user has selected a filter request and is waiting for the page to load the new results.
The plugin author has made 2 event callbacks where you can hook in javascript functions at the start and end of the ajax page refresh.
jQuery(document).ready(function($){
// detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
console.log("ajax start");
});
// detects the end of an ajax request being made
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
console.log("ajax end");
});
});
So with the above script enqueued global.js in this example, whilst running a S&F Pro filter the browser dev console should get some alerts whilst ajax runs on the page.
Now that that works a tool such as jQuery LoadingOverlay script can be used. Download the script get loadingoverlay.min.js and enqueue this script and make it dependent on the previous one.
So with basic parameters the loading icon can be created…
jQuery(document).ready(function($){
// detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
$.LoadingOverlay("show", {
imageColor : "#999"
});
});
// detects the end of an ajax request being made
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
$.LoadingOverlay("hide");
});
});
The script has a large number of configurable parameters, the only additional one used above is to set the color of the spinning icon.
