JS Objects
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
Functions
FWP.refresh(); // Parse the facets and trigger an ajax refresh FWP.reset(); // Reset all facets FWP.fetch_data(); // Make an ajax request FWP.parse_facets(); // Apply any facet HTML changes to FWP.facets FWP.set_hash(); // Update the permalink URL FWP.load_from_hash(); // Populates facet data from URL data (happens on pageload) 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 paging 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
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.fetch_data();