Skip to content

Instantly share code, notes, and snippets.

@MWDelaney
Last active November 30, 2021 16:33
Show Gist options
  • Save MWDelaney/7f3ff797041bac5ef9918112d6a43816 to your computer and use it in GitHub Desktop.
Save MWDelaney/7f3ff797041bac5ef9918112d6a43816 to your computer and use it in GitHub Desktop.
Replace FacetWP checkboxes with Bootstrap custom checkbox markup.
<?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);
@anton-papaja
Copy link

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.

@AurelianSpodarec
Copy link

Did you manage to find a fix?

@maritter
Copy link

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