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
} );

See also