Fix for Facet WP - enable the use of multiple instances of the same facet on a single page

facewp-multi-filter.js

/* Example shows how to do it with checkboxes */

$(document).on('facetwp-loaded', function {
  /* deregister the click handler for the filter(s) you're targeting */
  $(document).off( 'click', '.facetwp-type-checkboxes .facetwp-checkbox:not(.disabled)');

  /* register our own */
  $(document).on('click', '.facetwp-type-checkboxes .facetwp-checkbox:not(.disabled)', my_custom_handle_facet_click );
} );

/* What the click handler does largely depends on what the original method does.
 * Each facet type has it's own click handler.
 * lookup the original methods in /facetwp/assets/js/src/front-facets.js 
 */
function my_custom_handle_facet_click(){
  /* Get the checkbox that's been clicked */
  var $target = $(this);
  /* Find any other instances of this checkbox on the page */
  var value = $target.data('value');
  var $allTargets = $(`[data-value=${value}]`);
  /* Toggle the 'checked' class on ALL of them (necessary for FWP to not have a fit) */
  $allTargets.toggleClass('checked');
  /* Proceed with the usual FWP behaviour */
  window.FWP.autoload();
}

Facet WP doesn't support having multiple instance of the same facet on a single page. An example of this might be having the same list of filters above and below a listing of posts.

The issue arrises from the facet that facetWP pulls values out the DOM when doing a refresh, and last value in the DOM wins - so clicking the lower buttons would update the top ones, but the top ones would do nothing...

We need to find all the filters selected / matching and add 'checked' to them, before calling autoload/refresh.

In case search engines have brought you here...

This approach is no longer needed in 2021 - Facet WP now handles duplicate filters on the page natively!