Last active
November 30, 2021 16:33
-
-
Save MWDelaney/7f3ff797041bac5ef9918112d6a43816 to your computer and use it in GitHub Desktop.
Replace FacetWP checkboxes with Bootstrap custom checkbox markup.
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
<?php | |
/** | |
* Replace FacetWP default HTML output for "Checkboxes" with Bootstrap custom checkbox markup | |
*/ | |
add_filter('facetwp_facet_html', function ($output, $params) { | |
// Check that this facet is a "checkboxes" type facet before proceeding. | |
if ('checkboxes' == $params['facet']['type']) { | |
// Initialize variables | |
$output = ''; | |
$items = []; | |
// Get the selected values for the facet | |
$selected_values = $params['selected_values']; | |
// Get all the values for the facet | |
$values = $params['values']; | |
// Loop through the values and create items, marking them as "checked" or "disabled" as needed | |
foreach ($values as $value) { | |
// Write the markup for each item | |
$items[] = sprintf( | |
'<div class="custom-control custom-checkbox"> | |
<input type="checkbox" class="facetwp-checkbox custom-control-input %2$s %4$s" id="%1$s" data-value="%1$s" %2$s %4$s> | |
<label class="custom-control-label" for="%1$s">%3$s</label> | |
</div>', | |
$value['facet_value'], // The facet value | |
in_array($value['facet_value'], $selected_values) ? 'checked' : '', // If this item is selected, add the "checked" class and attribute | |
$value['facet_display_value'], // The facet display value | |
($value['counter']) ? '' : 'disabled', // Disable the item if its count is zero | |
); | |
} | |
} | |
// Write the markup for the whole facet | |
$output = sprintf( | |
'%s', | |
implode($items), | |
); | |
// Return the whole darn thing | |
return $output; | |
}, 10, 2); |
Did you manage to find a fix?
You can override the FacetWP hook for the selections. We had a slightly different markup for the checkboxes, so you will have the adjust the code according to your markup.
FWP.hooks.addFilter('facetwp/selections/checkboxes', function(output, params) {
var choices = [];
params.selected_values.forEach(function(value) {
var $item = params.el.find('.facetwp-checkbox[data-value="' + value + '"]');
if ($item.len()) {
const label = $item.nodes[0].getAttribute('data-label')
choices.push({
value,
label
});
}
});
return choices;
});
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This seems to somehow interfere with using
echo facetwp_display( 'selections' )
to list all active selections. The listed selections for checkbox facets no longer print the selected values from checkboxes using this filter. I assume it has something to do with retrieving all the selected values.