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.