Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

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:

Attribute Name

Attribute Value

hawksearch-facet-value

string (if applicable)

When a checkbox input element with this attribute is checked or unchecked, the value of that element will be added or removed from the search request as appropriate.

For non-input elements, the attribute value will be used instead of a form element value.

Attribute Name

Attribute Value

hawksearch-facet-value-exclude

string

When an element with this attribute is clicked, search results with the corresponding attribute value will be excluded from search results.

Attribute Name

Attribute Value

hawksearch-facet-value-include

string

When an element with this attribute is clicked, search results with the corresponding attribute value will no longer be excluded from search results.

Elements with this attribute value should only be displayed for facet values that are excluded.

Attribute Name

Attribute Value

hawksearch-facet-value-toggle

When an element with this attribute is clicked, child facet values will be displayed or hidden as appropriate.

This attribute should only be used for facets that support nested values.

Attribute Name

Attribute Value

hawksearch-facet-toggle

When an element with this attribute is clicked, facet values beyond the toggle threshold will be displayed or hidden as appropriate.

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}}
        <a hawksearch-facet-toggle class="facet__toggle">{{toggleText}}</a>
    {{/if}}
</div>
  • No labels