| Table of Contents |
|---|
Overview
The Search Results component displays information for an individual product or page.
...
| Info |
|---|
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:
| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Event Binding Attributes
Attribute Name | Attribute Value |
|---|---|
hawksearch-image |
...
Anchor elements with this attribute will be tracked when clicked.
Handlebars Helpers
Name | Parameter #1 | Parameter #2 |
|---|---|---|
currency |
|
|
number |
|
|
string |
|
|
These helper functions are intended to convert attributes from a Search Results Item, which are stored in arrays, into a format suited for presentation.
Default Template
| Code Block | ||||
|---|---|---|---|---|
| ||||
<div class='search-results-item search-results-item--{{type}}'>
{{#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> |