Last active
July 29, 2022 15:18
-
-
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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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/