→ 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.