Manually replace sort box with fSelect

test.html

<link href="path/to/fSelect.css" rel="stylesheet" type="text/css">
<script src="path/to/fSelect.js">
<script>
(function($) {
  $(document).on('facetwp-loaded', function() {
    $('.facetwp-sort-select').fSelect();
  });
})(jQuery);
</script>

@mgibbs189 this works but fires FWP.autoload(); twice on the sort change event and the fs:closed event. This can be fixed by removing the change event and then adding it again without FWP.autoload().

$( document ).off( 'change', '.facetwp-sort-select' ).on( 'change', '.facetwp-sort-select', function() {
    FWP.extras.sort = $( this ).val();
    FWP.soft_refresh = true;
} );

Better way to handle this? Maybe the fs:closed event that fires the autoload in front-facets.js can only autoload if that fselect is bound to a facet?

Maybe the fs:closed event that fires the autoload in front-facets.js can only autoload if that fselect is bound to a facet?

@jackgregory that's a good suggestion, would make sense to make sure the fSelect has a parent facetwp-facet element before firing :)

E.g.

    $(document).on('fs:closed', function(e, wrap) {
        var is_facet = $(wrap).closest('.facetwp-facet').length > 0;

        if (is_facet && ! wrap.classList.contains('multiple')) {
            FWP.autoload();
        }
    });