X Buy Features Demo (Cars) Demo (Power Plants) Demo (Map) Showcase Add-ons Docs Changelog

Flyout

This add-on generates a flyout sidebar which can help with mobile support.

Usage

Add a button or link with the CSS class of facetwp-flyout-open to trigger the flyout.

<button class="facetwp-flyout-open">Filter</button>

If you want to hide the button for desktop users, add this into your style.css:

@media (min-width: 780px) {
    .facetwp-flyout-open {
        display: none;
    }
}

That’s it! Everything below is totally optional.

JS functions

FWP.flyout.open(); // open the flyout
FWP.flyout.close(); // close it

JS hooks

(function($) {

    FWP.hooks.addFilter('facetwp/flyout/facets', function(facets) {
        return ['facet3', 'facet1', 'facet2']; // change the facet display order
    });


    FWP.hooks.addAction('facetwp/flyout/open', function() {
        // flyout opened
    });


    FWP.hooks.addAction('facetwp/flyout/close', function() {
        // flyout closed
    });

})(jQuery);

Adding extra content

To add extra flyout content, add a .facetwp-flyout-tpl HTML element on the page. It will automatically get hidden with CSS.

Within this element, add a {content} placeholder to automatically output the facets. Then add additional content above or below this placeholder. Here’s a full example:

<div class="facetwp-flyout-tpl">
  This text appears above the facets!
  {content}
  This text goes below the facets.
</div>

Changelog

0.4

* Added support for custom flyout content (see the “Adding extra content” section in the docs)

* Modified CSS classes to allow for better style targeting