Size Facet Component

Owned by Jordan Kasper (Deactivated)
Last updated: Nov 02, 2022
3 min read

Overview

The Size Facet component displays a list of product sizes in a grid format.

Selector

The selector for this component is <hawksearch-size-facet>.

Data Model

The following data model is exposed to the Handlebars template:

interface SizeFacetValue extends FacetValue { visible: boolean; }
{ values: Array<SizeFacetValue>; showToggle: boolean; toggleText: string; expanded: boolean | undefined; }

For more information, see Search Models.

Event Binding Attributes

This component supports the following attributes which are common to all Facet Type Components:

Default Template

<div class="size-facet"> <div class="row row--tight size-facet__items"> {{#each values}} {{#if visible}} <div class="column column--3 size-facet__item{{attribute ' size-facet__item--selected' selected}}"> <div hawksearch-facet-value="{{value}}" class="size-facet__item__outer"> <div hawksearch-facet-value="{{value}}" class="size-facet__item__inner"> {{title}} </div> </div> <span class="size-facet__item__actions"> {{#if excluded}} <span hawksearch-facet-value-include="{{value}}" class="size-facet__item__actions__item" title="Include"> <hawksearch-icon name="plus"></hawksearch-icon> </span> {{else}} <span hawksearch-facet-value-exclude="{{value}}" class="size-facet__item__actions__item" title="Exclude"> <hawksearch-icon name="minus"></hawksearch-icon> </span> {{/if}} </span> </div> {{/if}} {{/each}} </div> {{#if showToggle}} <span hawksearch-facet-toggle class="link facet__toggle">{{toggleText}}</span> {{/if}} </div>