Selected Facets Component
- Jordan Kasper (Deactivated)
Owned by Jordan Kasper (Deactivated), created
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 |
|---|---|
hawksearch-facet-field |
|
hawksearch-facet-value |
|
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>