Class SearchResultsItemComponent

The Search Results Item component displays information for an individual product or page.

Tag

The tag for this component is <hawksearch-search-results-item>.

*Note: This component should only be used within the context of the Search Results List component.

Event-Binding Attributes

Name	Value
hawksearch-image

Image elements with this attribute will have their src value replaced with a placeholder image URL if the image fails to load.

Name	Value
hawksearch-link

Anchor elements with this attribute will be tracked when clicked.

Default Template

The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.

<div class="search-results-list__item search-results-list__item--{{type}}">
    {{#if pinned}}
        <span class="search-results-list__item__pin">
            <hawksearch-icon name="star"></hawksearch-icon>
        </span>
    {{/if}}
    {{#if (eq type "product")}}
        {{#if (lt salePrice price)}}
            <span class="search-results-list__item__sale-indicator">{{strings.sale}}</span>
        {{/if}}
        <a hawksearch-link href="{{url}}" class="search-results-list__item__image" aria-label="{{title}}">
            <img hawksearch-image src="{{imageUrl}}" alt="" />
        </a>
        <div class="search-results-list__item__title">
            <a hawksearch-link href="{{url}}">{{title}}</a>
        </div>
        {{#if rating}}
            <hawksearch-rating rating="{{rating}}"></hawksearch-rating>
        {{/if}}
        {{#unless (eq price undefined)}}
            <div class="search-results-list__item__price" itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
                {{#if (lt salePrice price)}}
                    <span class="search-results-list__item__price__original">{{currency price}}</span>
                    <span class="search-results-list__item__price__current" itemprop="price">{{currency salePrice}}</span>
                {{else}}
                    <span class="search-results-list__item__price-__current" itemprop="price">{{currency price}}</span>
                {{/if}}
            </div>
        {{/unless}}
        <hawksearch-variant-selector></hawksearch-variant-selector>
    {{else}}
        <div class="row">
            {{#if imageUrl}}
                <div class="column column--12 column-sm--4">
                    <a hawksearch-link href="{{url}}">
                        <img hawksearch-image src="{{imageUrl}}" alt="" />
                    </a>
                </div>
            {{/if}}
            <div class="column column--12 column-sm--8 flex-align-self-sm-center">
                <div class="search-results-list__item__title">
                    <a hawksearch-link href="{{url}}">{{title}}</a>
                </div>
                {{#if description}}
                    <p>{{description}}</p>
                {{/if}}
            </div>
        </div>
    {{/if}}
</div>
Copy