FacetWP – Flyout

This add-on creates a flyout sidebar, which is useful for providing support for mobile devices.

Visit our Cars demo and reduce the width of your browser till you see the “Show filters” button in purple. This will allow you to see the feature in action.

The flyout displays, by default, all of the facets that are displayed on the page itself in the same order (with the exception of Pager facets, Map facets, and User Selections).

See the sample further down if you want to restrict the number of facets that are displayed in the flyout or modify the order in which they are displayed. The User Selections (along with any other material or other features) can be included on the flyer by including them in the template for the flyer, as shown in the example that follows.

Usage

To begin, obtain the add-on plugin, then download and install it before turning it on.

Then, in order to activate the flyout, you need include a button or link that has the CSS class of facetwp-flyout-open.

Button example:

<button class=“facetwp-flyout-open”>Filter</button>

Link example:

<a href=“javascript:;” class=“facetwp-flyout-open”>Filter</a>

You will need to include the following in your style in order to conceal the button or link for desktop users. css. This conceals the fly-out button or link for window or device widths that are more than 779px (the width may be adjusted to suit your needs):

@media (min-width: 780px) {

.facetwp-flyout-open {

display: none;

}

The Mobile Flyout automatically adds headings/labels above each facet.

If you want to hide these headings, add the following into your style.css:

If you want to change the HTML of the headings, see the example below.

Note: These headings are translatable with the facetwp_i18n hook.

JavaScript functions

The following functions are available to open and close the flyout:

JavaScript hooks

The flyout’s content and behaviour may be customised using the following hooks, which are all available:

By default, the flyout will display the same order for all of the facets that are displayed on the page itself (with the exception of the Pager and Map facets).

Simply give the preferred (or all) facet names in an array if you want to restrict the number of facets that are displayed in the flyout or vary the order in which they appear:

This code example changes the facet label heading tags from <h3> to <h2>:

This code example replaces the “x” in the close icon to a link with the word “Close”:

Customize the flyout’s open / close events

With the following hooks you can customize what happens on opening or closing the flyout:

You may add additional material to the flyout by including an HTML element on the page and assigning the facetwp-flyout-tpl class to it. With CSS, it will be buried behind the scenes automatically.

Adding a “content” placeholder inside of this element will cause the facets to be outputted automatically. Then add more material either above or below this placeholder, as appropriate. A complete illustration is as follows:

Within the facetwp-flyout-tpl HTML block, you are permitted to make use of shortcodes. Put this HTML block anywhere on the page if, for instance, you want the User Selections to appear at the top of the flyout, ahead of all the other aspects that it contains. With CSS, it will be hidden behind the scenes automatically:

You could wish to make more area in the flyout by extending and compressing the facets in an accordion-like manner if there are a lot of facets there.

The example that follows makes use of the headers marked with a h3 tag, which are already located above each facet, as expand/collapse buttons, and it toggles a class that has been expanded:

The following piece of CSS utilises the expanded class to display or conceal the facets, and it also inserts a plus sign and minus sign to the right of the headings: