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.
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.
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.
<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:
Server-side, FacetWP takes all the selected values, processes them using the index table, then returns the results as a JSON object:
Remember those HTML placeholder elements mentioned before? FacetWP simply injects the response HTML into the appropriate container elements.