X Features Cars Demo Power Plants Demo State Parks Demo Site Showcase Docs Tutorials Add-ons Buy

How FacetWP Works

Setup

In the admin UI, you create new facets from your existing data. Then you’re asked to click the Re-index button. Indexing is the process of storing facet data into a custom database table. The index table allows FacetWP to retrieve data very quickly.

Indexing

FacetWP adds one database table: facetwp_index. This table contains all the information needed to generate the facets. When the “Re-index” button is clicked, FacetWP loops through every post on your site and indexes the values for each facet.

facetwp-index-table

The facet_value column is used to generate the permalink URL, and the facet_display_value column contains the label that the user sees. The values for each row can be modified during the indexing process using the facetwp_index_row filter.

Presentation

FacetWP uses shortcodes to let you control where on the page to display your facets, template, etc. When you use a shortcode, it creates an empty placeholder element that gets populated via JavaScript after pageload. Below is an example of what a facet shortcode outputs:

<div class="facetwp-facet facetwp-facet-make facetwp-type-checkboxes" data-name="make" data-type="checkboxes"></div>

Interaction / AJAX

When the page loads, FacetWP scans for HTML elements having the CSS class facetwp-template. Same goes for facets (facetwp-facet). Selected values (if available) are stored for each facet.

Much of this information is stored in the FWP variable, which is sent to the server via AJAX when a refresh is triggered:

console-ajax-request

Server-side, FacetWP takes all the selected values, processes them using the index table, then returns the results as a JSON object:

console-ajax-response

Finally, FacetWP’s JavaScript code parses the JSON response.

Remember those HTML placeholder elements mentioned before? FacetWP simply injects the response HTML into the appropriate container elements.

See Also

Facet Configuration

Template Configuration

Presentation