Skip to content

Instantly share code, notes, and snippets.

@gayathrics
Created April 13, 2018 17:45
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save gayathrics/16efc1cc164c09f1b63b7126a77f8b65 to your computer and use it in GitHub Desktop.
Save gayathrics/16efc1cc164c09f1b63b7126a77f8b65 to your computer and use it in GitHub Desktop.
use this snippet to customize the facetwp selections html markup
//reference: \wp-content\plugins\facetwp\assets\js\front.js - Generate the user selections
wp.hooks.addAction('facetwp/loaded', function () {
// add custom code here
var selections = '';
jQuery.each(FWP.facets, function (key, val) {
if (val.length < 1 || 'undefined' === typeof FWP.settings.labels[key]) {
return true; // skip this facet
}
var choices = val;
var facet_type = jQuery('.facetwp-facet-' + key).attr('data-type');
choices = wp.hooks.applyFilters('facetwp/selections/' + facet_type, choices, {
'el': jQuery('.facetwp-facet-' + key),
'selected_values': choices
});
if ('string' === typeof choices) {
choices = [{ value: '', label: choices }];
}
else if ('undefined' === typeof choices[0].label) {
choices = [{ value: '', label: choices[0] }];
}
var values = '';
jQuery.each(choices, function (indx, choice) {
//ensure every selected facet item is wrapped around a data-facet-[key] li element to leave other functionality intact
selections += '<li data-facet="' + key + '"><span class="facetwp-selection-value" data-value="' + choice.value + '">' + FWP.helper.escape_html(choice.label) + '</span></li>';
});
});
if ('' !== selections) {
selections = '<ul><li><span class="facetwp-selection-clearall" onclick="FWP.reset()">Clear All</span></li>' + selections + '</ul>';
}
//console.log(selections);
jQuery('.facetwp-selections').html(selections);
}, 12); //using a higher number will ensure this custom function executes after facetwp's default selections html function.
@ericmulder
Copy link

FacetWP hook are now starting with FWP instead of wp:

//reference: \wp-content\plugins\facetwp\assets\js\front.js - Generate the user selections
FWP.hooks.addAction('facetwp/loaded', function () {
    // add custom code here

    var selections = '';
    jQuery.each(FWP.facets, function (key, val) {
        if (val.length < 1 || 'undefined' === typeof FWP.settings.labels[key]) {
            return true; // skip this facet
        }
        var choices = val;
        var facet_type = jQuery('.facetwp-facet-' + key).attr('data-type');
        choices = wp.hooks.applyFilters('facetwp/selections/' + facet_type, choices, {
            'el': jQuery('.facetwp-facet-' + key),
            'selected_values': choices
        });

        if ('string' === typeof choices) {
            choices = [{ value: '', label: choices }];
        }
        else if ('undefined' === typeof choices[0].label) {
            choices = [{ value: '', label: choices[0] }];
        }
        var values = '';
        jQuery.each(choices, function (indx, choice) {
           //ensure every selected facet item is wrapped around a data-facet-[key] li element to leave other functionality intact
            selections += '<li data-facet="' + key + '"><span class="facetwp-selection-value" data-value="' + choice.value + '">' + FWP.helper.escape_html(choice.label) + '</span></li>';
        });

    });

    if ('' !== selections) {
        selections = '<ul><li><span class="facetwp-selection-clearall" onclick="FWP.reset()">Clear All</span></li>' + selections + '</ul>';
    }
    //console.log(selections);
    jQuery('.facetwp-selections').html(selections);

}, 12); //using a higher number will ensure this custom function executes after facetwp's default selections html function.

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