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>

Hawksearch Handlebars UI

Size Facet Component

Analytics

Overview

Selector

Data Model

Event Binding Attributes

Default Template

Related content