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

First, download and install the add-on plugin, and activate it.

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

Button example:

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

Link example:

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

If you want to hide the button/link for desktop users, add the following into your style.css. This hides the fly-out button/link on window/device widths above 779px (adjust the width as needed):

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

Facet headings / labels

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

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

.flyout-row h3 {
  display: none;
}

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

Note: These headings are translatable with the facetwp_i18n hook.

JS functions

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

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

JS hooks

The following hooks are available to customize the flyout’s content and behavior:

Customize the facets and facet order

By default, the flyout shows all facets that are on the page itself, in the same order.

If you want to limit the facets shown in the flyout, or change their order, just pass the desired (or all) facet names in an array:

<?php
  add_action( 'wp_head', function() {
  ?>
    <script>
      (function($) {
        $(function() {
          if ('object' != typeof FWP) return;

          /* Choose which facets to display in the flyout, and/or change the facet display order */
          FWP.hooks.addFilter('facetwp/flyout/facets', function(facets) {
            return ['facet_name3', 'facet_name1', 'facet_name2'];
          });
       });
      })(jQuery);
    </script>
  <?php
}, 100 );

Modify each facet’s HTML

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

<?php
  add_action( 'wp_head', function() {
  ?>
    <script>
      (function($) {
        $(function() {
          if ('object' != typeof FWP) return;

          /* Modify each facet's wrapper HTML */
          FWP.hooks.addFilter('facetwp/flyout/facet_html', function(facet_html) {
            return facet_html.replace('<h3>{label}</h3>', '<h2>{label}</h2>'); // Example: replace <h3> facet label tags with <h2>
          });

        });
      })(jQuery);
    </script>
  <?php
}, 100 );

Modify the flyout wrapper HTML

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

<?php
  add_action( 'wp_head', function() {
  ?>
    <script>
      (function($) {
        $(function() {
          if ('object' != typeof FWP) return;

          /* Modify the flyout wrapper HTML */
          FWP.hooks.addFilter('facetwp/flyout/flyout_html', function(flyout_html) {
            return flyout_html.replace(' <div class="facetwp-flyout-close">x</div>', ' <div class="facetwp-flyout-close"><a>Close</a></div>'); // Example: replace close icon "x" with "Close" link
          });

        });
      })(jQuery);
    </script>
  <?php
}, 100 );

Customize the flyout’s open / close events

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

<?php
  add_action( 'wp_head', function() {
  ?>
    <script>
      (function($) {
        $(function() {
          if ('object' != typeof FWP) return;

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

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

        });
      })(jQuery);
    </script>
  <?php
}, 100 );

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

See also