Skip to content

Instantly share code, notes, and snippets.

@remcokalf
Last active July 29, 2022 15:18
Show Gist options
  • Save remcokalf/ad01bebb82b36ffab13321152c095e19 to your computer and use it in GitHub Desktop.
Save remcokalf/ad01bebb82b36ffab13321152c095e19 to your computer and use it in GitHub Desktop.
Fixes for dropdowns facets and sortbox with .chosen() in FacetWP 3.8.0 - 3.8.2 because Facetwp fUtil library did not pick up jQuery.trigger change events from chosen() in these FacetWP versions. This was fixed in FacetWP 3.8.3+. Check this page for current versions of FacetWP: https://gist.facetwp.com/gist/use-chosen-js-with-facetwp-dropdowns-or…
(function ($) {
$(document).on('facetwp-loaded', function () {
// Facetwp Dropdowns to chosen dropdows
$('.facetwp-dropdown option:first-child').text('');
$('.facetwp-dropdown').attr('data-placeholder', 'All');
$('.facetwp-dropdown').chosen({disable_search_threshold: 50, allow_single_deselect: true});
// Facetwp Sort box to chosen dropdows
$('.facetwp-sort-select option:first-child').text('');
$('.facetwp-sort-select').attr('data-placeholder', 'Sort by');
$('.facetwp-sort-select').chosen({disable_search_threshold: 50, allow_single_deselect: true});
// Hack to get chosen dropdowns working with Facetwp 3.8+
// Needed because fUtil in Facetwp 3.8 is not picking up jQuery.trigger events.
$(document).on('change', '.facetwp-dropdown', function (e) {
var $facet = $(this).closest('.facetwp-facet');
var facet_name = $facet.attr('data-name');
if ('' !== $(this).val()) {
FWP.frozen_facets[facet_name] = 'soft';
}
FWP.autoload();
e.stopImmediatePropagation(); //without this, there is an event loop after changing facet selections because change events from facetwp are picked up here
});
// Hack to get sort dropdowns working with Facetwp 3.8+
// Needed because fUtil in Facetwp 3.8 is not picking up jQuery.trigger events.
$(document).on('change', '.facetwp-sort-select', function (e) {
FWP.extras.sort = $(this).val();
FWP.soft_refresh = true;
FWP.autoload();
e.stopImmediatePropagation(); //maybe not needed with sortbox
});
// Optional: hide dropdown facet if only one option left by interacting facet selections
$('.facetwp-type-dropdown select').each(function () {
if ($(this).children('option').length == 1) {
$(this).closest('.facetwp-type-dropdown').hide();
} else {
$(this).closest('.facetwp-type-dropdown').show();
}
});
});
})(jQuery);
@KristapsF
Copy link

Thank you!!!

@remcokalf
Copy link
Author

remcokalf commented Mar 25, 2022

Note for anyone who uses this: The above is only for specific FacetWP versions:

There are 2 'Hack' parts in the code, to have fUtil pick up jQuery.trigger events. Chosen.js and Select2 use jQuery.trigger, which doesn’t fire native DOM events. fUtil did not pick up those in FacetWP 3.8.0 - 3.8.2.
This was fixed in FacetWP 3.8.3 and upward: if jQuery is present, then it uses its built-in event handling. So for FacetWP v3.8.3+ these 2 parts in the code are not necessary anymore.

For a better and current example, working with the latest FacetWP version, which also shows how to use Chosen.js for FacetWP's Sort facet and Pager facets, see: https://gist.facetwp.com/gist/use-chosen-js-with-facetwp-dropdowns-or-sort-pager-facets/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment