Overview

The Selected Facets component displays a list of facets that have been selected by the user.

Selector

The selector for this component is <hawksearch-selected-facets>.

Data Model

The following data model is exposed to the Handlebars template:

{
  facets: Array<SelectedFacet>;
  selections: Array<{
    field: string;
    title: string;
    selectionTitle: string;
    selectionValue: string;
    excluded: boolean;
  }>;
}

For more information, see Selected Facets.

Event Binding Attributes

Attribute Name	Attribute Value

Attribute Name	Attribute Value
hawksearch-facet-field	`string`
hawksearch-facet-value	`string`

When an element with both of these attributes is clicked, that facet selection will be removed and the search results will be updated.

Default Template

<div class="flex-gap flex-gap--xs selected-facets">
    {{#each selections}}
        <span class="selected-facets__item">
            <span class="selected-facets__item__field">{{title}}</span>
            <span class="selected-facets__item__value{{attribute ' selected-facets__item__value--excluded' excluded}}">{{selectionTitle}}</span>
            <a hawksearch-facet-field="{{field}}" hawksearch-facet-value="{{selectionValue}}" class="selected-facets__item__remove">
                <hawksearch-icon name="cross" size="0.9em"></hawksearch-icon>
            </a>
        </span>
    {{/each}}
</div>

Hawksearch Handlebars UI

Selected Facets Component

Analytics

Overview

Selector

Data Model

Event Binding Attributes

Default Template

Related content