How to preserve facet selections across pages

FacetWP automatically generates a permalink URL whenever you interact with facets. This allows you to bookmark the page with the facets in place.

However, when navigating to other pages on your site, the facet selections are lost. Fortunately, it’s possible to preserve the facets’ state across pages, by using cookies.

The following code preserves the facet choices in a cookie, and upon returning to the page, will reload the page with the active facet choices stored in the cookie.

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_action( 'wp_head', function() {
  ?>
  <script>
    (function($) {
      $(function() {

        // Optionally use the code only on a specific page, by checking the page URI
        // Only needed if you have multiple pages with facets
        if ( 'my/facetpage_uri' == FWP_HTTP.uri ) { // Replace  'my/facetpage_uri' with your page URI

          // After FacetWP reloads, store any updates into a cookie */
          $(document).on('facetwp-loaded', function() {
            var date = new Date();
            var facets = window.location.search;
            date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
            document.cookie = "facetdata=" + facets + "; expires=" + date.toGMTString() + "; path=/";
          });

          // When FacetWP first initializes, look for the "facetdata" cookie
          // If it exists, set window.location.search= facetdata
          $(document).on('facetwp-refresh', function() {
            if (!FWP.loaded) {
              var facets = window.location.search;
              var facetdata = readCookie('facetdata');
              if (null != facetdata && '' == facets && '' != facetdata && facets != facetdata) {
                document.cookie = 'facetdata=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
                window.location.search = facetdata;
              }
            }
          });

          // Cookie handler
          function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
              var c = ca[i];
              while (c.charAt(0) == ' ') c = c.substring(1, c.length);
              if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
          }
        }

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

See also

• The facetwp-refresh event
• The facetwp-loaded event
• The FacetWP URL