Overview
The Search Results component displays information for an individual product or page.
This component should only be used within the context of the Search Results List component.
Selector
The selector for this component is <hawksearch-results-item>.
Data Model
The SearchResultsItem object is made available to the Handlebars template:
type SearchResultsItemType = 'content' | 'product';
interface SearchResultsItem {
attributes?: {
[key: string]: Array<string>;
};
description?: string;
id: string;
imageUrl?: string;
pinned: boolean;
price?: number;
salePrice?: number;
score: number;
title: string;
type: SearchResultsItemType;
url: string;
visible: boolean;
}
Event Binding Attributes
Attribute Name | Attribute 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.
Attribute Name | Attribute Value |
|---|---|
hawksearch-link |
Anchor elements with this attribute will be tracked when clicked.
Default Template
<div class="search-results-item search-results-item--{{type}}">
{{#if pinned}}
<span class="search-results-item__pin">
<hawksearch-icon name="star"></hawksearch-icon>
</span>
{{/if}}
{{#if (lt salePrice price)}}
<span class="search-results-item__sale-indicator">Sale</span>
{{/if}}
{{#if (eq type "product")}}
<a hawksearch-link href="{{url}}" class="search-results-item__image">
<img hawksearch-image src="{{imageUrl}}" alt="" />
</a>
{{/if}}
<div class="search-results-item__title">
<a hawksearch-link href="{{url}}">{{title}}</a>
</div>
{{#unless (eq salePrice undefined)}}
<div class="search-results-item__price">
{{#if (lt salePrice price)}}
<span class="search-results-item__price__original">{{currency price 0}}</span>
<span class="search-results-item__price__current">{{currency salePrice 0}}</span>
{{else}}
<span class="search-results-item__price-__current">{{currency salePrice 0}}</span>
{{/if}}
</div>
{{/unless}}
</div>