Gravatar for

Question by Thom Howard, Jul 12, 2018 8:41 PM

Using facets "Filter" button in all screen sizes

Instead of displaying facets in the left column in full screen view, we want to have the "Filter" button that appears on smaller screens appear all the time. How can we set that as the default for a specific search interface?

This is Sitecore Hive.



1 Reply
Gravatar for

Answer by Jean-François L'Heureux, Jul 13, 2018 10:45 AM

This facet filters button appears on small screens using responsive CSS screen size breakpoints and some JavaScript code.

First, 2 CSS classes are added on the `CoveoSearchInterface` element: `coveo-small-interface coveo-small-facets`.

Then, with JavaScript, the normally empty:

<div class="coveo-dropdown-header-wrapper"></div>

Is filled with the filters button:

<div class="coveo-dropdown-header-wrapper"><a class="coveo-facet-dropdown-header coveo-dropdown-header"><p>Filters</p></a></div>

And JavaScript code also ensures facets are hidden by default with an additional style attribute:

<div class="coveo-facet-column" style="display: none;">…</div>

By knowing that, I would say it would be pretty difficult to have the facets always hidden under a the out of the box responsive facet button.

However, one of our customer implemented a custom solution to hide facets when the screen size is small for mobile phones. They have their own Filters button which shows all facets in a layer on top of the search results. Users can then click on any facet values until done with filtering. They then click the "Apply" button which only hides the facets and shows the search results that were already updated under. You can check their website to find inspiration:

Ask a question