Search Results Item Component
- Jordan Kasper (Deactivated)
Owned by Jordan Kasper (Deactivated), created
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-search-results-item>.
Data Model
The SearchResultsItem object is made available to the Handlebars template:
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" aria-label="{{title}}">
<img hawksearch-image src="{{imageUrl}}" alt="" />
</a>
{{/if}}
<div class="search-results-item__title">
<a hawksearch-link href="{{url}}">{{title}}</a>
</div>
{{#unless (eq type "product")}}
{{#if description}}
<p>{{description}}</p>
{{/if}}
{{/unless}}
{{#unless (eq salePrice undefined)}}
<div class="search-results-item__price" itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
{{#if (lt salePrice price)}}
<span class="search-results-item__price__original">{{currency price}}</span>
<span class="search-results-item__price__current" itemprop="price">{{currency salePrice}}</span>
{{else}}
<span class="search-results-item__price-__current" itemprop="price">{{currency salePrice}}</span>
{{/if}}
</div>
{{/unless}}
</div>