Facet - AFS

AFS Integration Guide

Product
AFS
AFS_Version
7.7
Category
Reference Guide

This widget displays the facets to refine the search results. includeList and excludeList are exclusive. When both includeList and excludeList are present and non empty excludeList is ignored.

  • Display all the facets

<div class="AFSWidget" title="Facet">
</div>

  • Display all but some facets

To show all the facets but those with ID X, Y, and Z, we list the ID of facets to hide in the excludeList parameter.

<div class="AFSWidget" title="Facet">
<script type="application/json">
{
"excludeList": ["X", "Y", "Z"]
}
</script>
</div>

  • Display a subset of all available facets

To only show the facets with ID A, B, and C, set the includeList parameter to the IDs of facets to show, like so:

<div class="AFSWidget" title="Facet">
<script type="application/json">
{
"includeList": ["A", "B", "C"]
}
</script>
</div>

  • disableSearchThreshold parameter

Display a text box to filter out the values of a facet only when the number of values exceeds this threshold.

Example: for example say disableSearchThresold is set to 15 in a facet configuration. The text box to filter out this facet's values is disabled/hidden when there are 15 values or less. Conversely, it is enabled/displayed when there is more than 15 values.

<div class="AFSWidget" title="Facet">
<script type="application/json">
{
"disableSearchThreshold": 15
}
</script>
</div>

  • showSelectedValues parameter

It is a boolean whose default value is false, that is once a value has been selected it is removed from the list of available values and added to the list of currently selected values.

The following example illustrates what happens when we select "French":

To prevent the facets' selected values from being hidden, set showSelectedValues to true like so:

<div class="AFSWidget" title="Facet">
<script type="application/json">
{
"showSelectedValues": true
}
</script>
</div>

Note that, as of today, this parameter only applies to flat facets. Selected values of a non flat tree facet (a facet whose depth is more than 1) are always hidden, even when this option is set to true.

  • showSelectionHeader parameter

It is a list that contains the currently selected facet's value(s) (Novotel, Pullman, Mercure in our example). Click on a value in this list to de-select it. Configuration example:

<div class="AFSWidget" title="Facet">
<script type="application/json">
{
"showSelectionHeader": false
}
</script>
</div>

  • collapsible, collapsedByDefault and outsideClickTogglePanel parameters

If this parameter is set to true, a click on the facet header will change the facet state. A facet carry the CSS class name AFSW-facet. If the facet is collapsible and its header is clicked, its state will change receiving a new CSS class name that can be AFSW-facet-expanded or AFSW-facet-collapsed.

If the outsideClickTogglePanel parameter is set to true, then the collapsed facet state can be restored clicking anywhere in the page but the facet itself. This allows to style the facet as a pop-up.

Facet styled as popup

Admitting that the collapsedByDefault parameter is set to true, and an existing Category facet header was clicked, the DOM would be like below.

Facet DOM example

It is now easy to display facets as wanted with some CSS. For example, simply toggling the facet visibility would be achieved like this:

.AFSW-facet-expanded .AFSW-facet-content {
display: block;
}

.AFSW-facet-collapsed .AFSW-facet-content {
display: none;
}

The use of CSS class names allows to fully customize the display behavior leveraging all the new CSS capabilities (animations, transitions, …)

Facet - Display the facets to refine the search results

Parameter

Type

Card

Default

Description

includeList

String

Optional

[ ]

Facets to show (comma separated list of facet ids). Default is an empty array.

excludeList

String

Optional

[ ]

Facets to hide (comma separated list of facet ids). Default is an empty array.

disableSearchThreshold

Integer

Optional

15

Display a text box to filter out the values of a facet only when the number of values exceeds this threshold.

showSelectedValues

Boolean

Optional

false

To prevent the facets' selected values from being hidden, set showSelectedValues to true.

showSelectionHeader

Boolean

Optional

true

Enable or disable a list that contains the currently selected facet's value(s).

collapsible

Boolean

Optional

true

Indicates if the facet headers can collapsed the facet when clicked.

collapsedByDefault

Boolean

Optional

false

Indicates if the facets have to be displayed collapsed when loaded.

outsideClickTogglePanel

Boolean

Optional

false

Indicates if the click has to be monitored to change the component state. See tip below.

updateHeaderWithSelection

Boolean

Optional

false

Indicates if the facet header has to change its value to display selected items (can be useful if the facet is used as a popup).

At integration time, the component can be styled as a pop-up. The click on the main button toggles the presence of a CSS class on the component top-level container, allowing to update the panel visibility.
If styled as a pop-up, the outsideClickTogglePanel option can be useful to change the component state when a click occurs outside of the component panel, by removing the previously mentioned CSS class.

More facet customization can be achieved configuring Facet Descriptors.