Gravatar for slangevin@coveo.com

Question by Simon, Mar 2, 2016 3:33 PM

Using Radio Button instead of Checkboxes for Facets

I have two facets set in the coveo search sublayout and I would need to change one of them in order to use radio buttons. I created the following script that runs after initialization:

$('.CoveoFacet[data-title="Age"] input[type="checkbox"]').attr('type','radio');

The problem is that coveo changes them back to checkboxes when running queries or changing facet filters.

Is there a way to do this change? so one of the facet always use radio buttons.

Another problem I am having is when I select one facet, it only shows that filter. Since I am using radio buttons, I need all of them to stay selectable.

1 Reply
Gravatar for slangevin@coveo.com

Answer by Simon, Mar 2, 2016 3:34 PM

JS UI facets are really designed to act as checkboxes (multi-select, etc.) and their implementation as such is pretty complex. Just changing the input to radio will not magically make them behave like radio buttons (with single select, etc.) So I don't think this is the proper road to take -- even if it worked it'd be very fragile.

Instead, you might want to consider coding your own piece of UI that fetches the list of possible values using a GroupBy request, displays them as radio buttons, and outputs the proper filter when a query is performed. To achieve this you need to listen for the buildingQuery (to add the group by requests + filters) and querySuccess events (to process the results and update your UI).

Also, to get proper radio button behavior you'll want to use the queryOverride option on the GroupBy request to have the GroupBy execute on a query without the filter generated by your facet. Otherwise when a filter is applied you'll only get an entry for the selected value.

queryOverride contains a query expression like what you'd put in the query box, or indeed like the value for the q query string argument.

Doing this won't affect at all the other facets, since they use their own group by requests (which are part of the same query).

Ask a question