Mobile Flyout

0.7 (May 31, 2021) — Download from your account page

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

To see it in action, browse to our Cars demo then shrink your browser width until you see the purple “Show filters” button.

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;
    }
}

IMPORTANT: If using a link, make sure the href does NOT contain a hash (“#”). Some page builders add it automatically when creating a button or link element.

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

  • New automatically hide labels for empty facets
  • Improved asset versioning (to prevent browser caching issues)

0.6.1

  • Fixed some facet types were unresponsive in flyout

0.6

  • Important Flyout requires FacetWP 3.8+
  • Improved removed jQuery dependency
  • Improved desktop facets are no longer removed while the flyout is active

0.5

  • Improved ignore pager facets by default

0.4

  • New support for custom flyout content (see the "Adding extra content" section in the docs)
  • Improved modified CSS classes to allow for better style targeting