Checkbox facets and enhanced faceted navigation

Managed by | Updated .

Background

The faceted navigation functionality available with Funnelback is great until you need to start changing the formatting of it, need to support checkbox facets or to sort or rename your facets.

A small package has been developed that extend the faceted navigation functionality, providing much more control over the templating of facets as well as adding support for checkbox faceting and sort/rename functionality.  An applied facets control is also provided.

Checkbox facets

Checkbox facets allow a user to select multiple categories from within a single facet (eg. cars that have a colour of blue or green).  

Limitations

When using checkbox facets in Funnelback, there are a number of limitations:

  • Checkbox facets cannot display count estimates.  If you enabled checkboxes you don't get any counts.
  • Checkbox facets do not support sub-facets. Any hierarchical facets that are defined within the faceted navigation configuration will only display the top level of the hierarchy.
  • Checkbox facets should not be used with Gscope based facets. When using gscope based facets the categories are not combined in a sensible way if checkbox facets are enabled.
  • Checkbox facets have a fixed logic. Categories selected with a facet are ORed, categories selected in different facets are ANDed.  This behaviour can not currently be changed.

If you can work within these limitations, then deployment of checkbox facets is not too difficult.

Code

The code required for this additional functionality is available from the Funnelback GitHub site:

Usage examples

Link Facet

Standard default behaviour.

Hierarchical Facet

Useful for nested categories, where only one section or level is able to be selected at any one time.  Current lowest-level in hierarchy shows category counts.

Example output below shows an expanded 'Category' facet, with three levels.  Only the lowest available level is shown indented to prevent reduced horizontal screen real estate.  The currently-selected level is highlighted.

Multi-Select Link Facet

Markup renders as a link with a pseudo-checkbox styling.

  • Clicking the 'Clear Selected' link unchecks all categories in the facet
  • Checking or unchecking a category generates a new search query.
  • Categories within the facet are ORed together.
  • Checking one or more categories produces a 'Clear Selected' link

Multi-Select Checkbox Facet

Markup renders as checkbox and label tags.  Checking or unchecking a category generates a new search query.

Multi-Select Checkbox Two-Step Facet

Two-step submission process - user checks (or unchecks) one or more categories within a facet, then submits the for manually.

Single Checkbox Facet

Scenarios:

  • User wants to include / exclude archived content
  • User wants to include / exclude 'Available', 'On Sale' content

Inline Breadbox

Scenarios:

  • This control is useful on most faceted navigation and provides the user with immediate feedback on what facets are currently applied, with the ability to remove them directly.

Stacked Breadbox

Scenarios:

  • Mobile search

Live examples

Was this artcle helpful?

Tags
Type: Keywords:
Features: Frontend > Faceted navigation

Comments