👍

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.

Settings

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: indicator 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

Implementation

Using the facet settings, render the list of facets using the facetsettings object. For each facet, display the available filters in the facet.attributes array using selection type.

<attribute>
  <title>Sale</title>
  <isselected>false</isselected>
  <nrofresults>5</nrofresults>
  <attributeid>1009</attributeid>
  <url><![CDATA[ ?tn_cid=1000-1009 ]]></url>
  <link><![CDATA[ https://demo.tweakwise.com/en/navigation/c1a12e92/1000?tn_cid=1000&tn_fk_campaign=Season%20Sale ]]></link>
  <children/>
</attribute>

{
  "title": "Sale",
  "isselected": false,
  "nrofresults": 5,
  "attributeid": 1009,
  "url": "?tn_cid=1000-1009",
  "link": "https://demo.tweakwise.com/en/navigation/c1a12e92/1000?tn_cid=1000&tn_fk_campaign=Season%20Sale",
  "children": null
}

Selection type

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 →

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

<navigation>
  <facets>
    <facet>
      <facetsettings>
        ...
        <selectiontype>link</issearchable>
        ...
      </facetsettings>
      ...
    </facet>
  </facets>
  ...
</navigation>

*Only available when facet source is category.

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

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 →.

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, we can return a value which can be used to position images or icons in front of your filter value.