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

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>

That’s it! Everything below is totally optional.

JS functions

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

JS hooks

(function($) {

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


    /* modify each facet's wrapper HTML */
    FWP.hooks.addFilter('facetwp/flyout/facet_html', function(facet_html) {
        return facet_html;
    });


    /* modify the flyout wrapper HTML */
    FWP.hooks.addFilter('facetwp/flyout/flyout_html', function(flyout_html) {
        return flyout_html;
    });


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


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

})(jQuery);

HTML defaults

The flyout wrapper HTML (modify via the facetwp/flyout/flyout_html JS hook):

<div class="facetwp-flyout">
    <div class="facetwp-flyout-close">x</div>
    <div class="facetwp-flyout-wrap">
        <div class="facetwp-flyout-content">{content}</div>
    </div>
</div>

The HTML for each facet (modify via the facetwp/flyout/facet_html JS hook):

<div class="facetwp-flyout-facet">
    <h3>{label}</h3>
    <div class="flyout-facet-{name}"></div>
</div>