JS Objects and Functions
FacetWP uses a few different JS objects to store and handle data on the front-end. They’re each described below.
Viewing the data
To view each of the following objects, type its name into the browser console:
FWP
FWP
contains the bulk of FacetWP’s data and logic. It contains a mixture of functions, variables, and data objects. Much of this is covered below.
Data objects
FWP.facets; // Contains each facet's selected values
FWP.extras; // Determines which extra features to use (pager, sort, etc)
FWP.hooks; // JS hook system, based on the WP_JS_Hooks library
FWP.settings; // Facet-specific settings, as well as some global data (e.g. FWP.settings.pager)
FWP.frozen_facets; // A low-level object to force certain facet types to only re-render when needed
FWP.active_facet; // Stores information for the currently active, selected facet. Only available during facetwp-refresh event
FWP.response; // Contains the ajax response data
Functions
FWP.refresh(); // Parses the facets and triggers an ajax refresh
FWP.reset(); // Resets all facets
FWP.fetchData(); // Triggers an AJAX refresh without re-parsing the facets
FWP.parseFacets(); // Applies any facet HTML changes to FWP.facets
FWP.setHash(); // Updates the permalink URL
FWP.loadFromHash(); // Populates facet data from URL data (happens on pageload)
FWP.buildQueryString(); // Builds and returns the URL query string (without preceding questionmark)
FWP.init(); // Initializes all FacetWP event listeners
Variables
FWP.auto_refresh = true; // Whether or not to auto-refresh when a facet choice is selected
FWP.soft_refresh = false; // This is set to true when using the Pager facet (page numbers, per page and load more), and the old sort box. Skips processing of other facets.
FWP.is_refresh = false; // This is set to true when a refresh is active
FWP.is_reset = false; // This is set to true when resetting
FWP.loaded = true; // This remains true after FacetWP initializes
FWP_HTTP
FWP_HTTP
contains data for the current page’s URI and its $_GET variables.
FWP_HTTP.get; // an object containing the page's $_GET variables
FWP_HTTP.uri; // the current page's URI (minus any beginning or trailing slashes)
FWP_JSON
FWP_JSON
contains generally static data, such as the endpoint URL (ajaxurl
) and the facet URL prefix. Here are examples of its data:
FWP_JSON.ajaxurl; // the current ajax endpoint URL
FWP_JSON.loading_animation; // the animation type, usually "fade" or "spin"
FWP_JSON.no_results_text; // the text that appears for "No results found" screens
FWP_JSON.nonce; // useful when making authenticated ajax requests
FWP_JSON.prefix; // the prefix for each facet's URL variable, usually "_" or "fwp_"
Examples
Reset facets programmatically
Besides using a Reset facet, it is also possible to reset facets programmatically:
Reset all facets:
FWP.reset();
Reset all facets with a button:
<button onclick="FWP.reset()">Reset</button>
Or with a link:
<a href="javascript:;" onclick="FWP.reset()">Reset</a>
Paste the button or link into an HTML widget, HTML block, or directly into your PHP template file.
Reset one facet:
FWP.reset('make');
Reset multiple facets:
FWP.reset(['make', 'model', 'year']);
Reset individual values:
FWP.reset({ 'make': 'audi' });
Set a facet value and trigger a refresh
Let’s say you want to programmatically set a facet value and trigger a refresh. Your gut might tell you to use FWP.refresh()
. Since this function parses the facets, it would actually overwrite the values you’re trying to set. Here’s a better way to do it:
FWP.facets['car_brand'] = ['audi'];
FWP.fetchData();
Get the currently selected facet’s name or type
This example shows how to get the currently selected facet’s name or type:
<?php
add_action( 'wp_footer', function() {
?>
<script>
document.addEventListener('facetwp-refresh', function() {
if (null !== FWP.active_facet) {
let facet = FWP.active_facet;
let facet_name = facet.attr('data-name');
let facet_type = facet.attr('data-type');
console.log(facet_name);
console.log(facet_type);
}
});
</script>
<?php
} );