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

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
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

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
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

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
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.

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
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:

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
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:

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
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:

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
FWP.reset('make');

Reset multiple facets:

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
FWP.reset(['make', 'model', 'year']);

Reset individual values:

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
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:

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
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:

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
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