Facets

👍
Definition
Faceted search, also known as faceted filtering or faceted navigation, is a function in online shops that helps users refine results by applying filters from product attributes. Filters enable one-dimensional narrowing of results, for example by brand or color. Faceted search, on the other hand, includes multiple filters simultaneously, allowing users to apply several product characteristics at the same time, in this case, brand and color. This makes faceted search especially helpful for large assortments with many product characteristics.

The implementation of a facet should be done using the configuration in the facetsettings object:

title: the title that is displayed on top of the facet
urlkey: the key that is used to identify the facet, we recommend using this slug in your URL structure.
iscollapsible and iscollapsed:
- iscollapsible: indicators if the facet should be allowed to collapse
- iscollapsed: controls the default collapsed state of the facet
nrofshownattributes, expandtext and collapsetext, see Limiting filters
showselectedfirst: indicator if the selected filters should appear on top of the list (we do this for you)
ismultiselect and multiselectlogic, see Multiselect
selectiontype see Selection type
isnrofresultsvisible: indicator to show the preview of the number of results when selecting a filter
isinfovisible and infotext, see Hints and tooltips
issearchable, searchplaceholder and searchnoresultstext, see Search within filters →.
prefix and postfix: see Formatting
cssclass: see Formatting
source, see Sources
imagetag: see Imagetag

Limiting filters

Sometimes there are too many filtering options within a facet to display them all.

You may need to limit the list and add a "show more" link.

nrofshownattributes: indicator what amount of filters should be visible in this facet
expandtext: option to show a "show more" link
collapsetext: option to replace the "show more" with a "show less" link that will hide the previously options again.

Another popular way to achieve a similar result is to offer search within a facet. See Search within filters →.

Selection type

{
  "navigation": {
    "facets": [
      {
        "facetsettings": {
          //...
          "selectiontype": true, // Type of selection for this facet
          //...
        }
      }
    ]
  }
}

<navigation>
  <facets>
    <facet>
      <facetsettings>
        ...
        <selectiontype>Type of selection for this facet. This could be checkbox, slider, tree or link</issearchable>
        ...
      </facetsettings>
      ...
    </facet>
  </facets>
  ...
</navigation>

Available selection types:

checkbox: filter results with multi-select checkbox
link: filter results with single-select links
tree: filter results with single-select links in a tree structure*
color: filter results using color swatches, see Color swatches →.
slider: filter results using linear slider, see Slider →

*Only available when facet source is category.

Multiselect

About multiselect.

See Selection type.

Hints and tooltips

If a facet needs more explanation or help text, infotext can be used to display a hint.

isinfovisible: indicator if the facet should display a hint
infotext: the hint text to display

Formatting

prefix and postfix give the option to add prefix or postfixes to facets or filters. Mainly used in filtertype slider, where they indicate the bounds labels. For example: a price slider can have a currency prefix or a "number of monkeys" slider might have a "monkeys" postfix.

With faceted navigation, facets are usually rendered in a generic way. Add the value of cssclass to your facet.

Sources

Possible values are FEED, AFGELEID or CATEGORY.

This can be used to determine if a facet is actually a special type of category facet, see Categories →.

Imagetag

The imagetag can be used to map a facet+filter combination to something in your back-end. For example to create a fancier look for your filter value:

The value of this tag is following a naming convention, positioned between square brackets, consisting of urlkey, dash (-) and the lowercased attribute title: [{urlkey}-{lower(title)}].

Examples

[glasses-shape-rectangle]
[color-indigo blue]
[theme-star wars]
[size-xl]
[category-sneakers]

Good to know: Tweakwise does not store or provide images or icons, Tweakwise can return a value which can be used to position images or icons in front of your filter value.

👍Definition