Overview

The Featured Items Content Item component displays information for an individual product or page.

This component should only be used within the context of the Featured Items Content component.

Selector

The selector for this component is <hawksearch-featured-items-content-item>.

Data Model

The SearchResultsItem object is made available to the Handlebars template:

Event Binding Attributes

Attribute Name	Attribute Value

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

Attribute Name	Attribute Value
hawksearch-link

Anchor elements with this attribute will be tracked when clicked.

Handlebars Helpers

Name	Parameter #1	Parameter #2

Name	Parameter #1	Parameter #2
currency	`string` or `Array<string>` (value)	`number` (default value, optional)
number	`string` or `Array<string>` (value)	`number` (default value, optional)
string	`string` or `Array<string>` (value)	`string` (default value, optional)

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

<div class="featured-items-content__item featured-items-content__item--{{type}}">
    {{#if pinned}}
        <span class="featured-items-content__pin">
            <hawksearch-icon name="star"></hawksearch-icon>
        </span>
    {{/if}}
    {{#if (lt salePrice price)}}
        <span class="featured-items-content__sale-indicator">Sale</span>
    {{/if}}
    {{#if (eq type "product")}}
        <a hawksearch-link href="{{url}}" class="featured-items-content__item__image">
            <img hawksearch-image src="{{imageUrl}}" alt="" />
        </a>
    {{/if}}
    <div class="featured-items-content__item__title">
        <a hawksearch-link href="{{url}}">{{title}}</a>
    </div>
    {{#unless (eq salePrice undefined)}}
        <div class="featured-items-content__item__price">
            {{#if (lt salePrice price)}}
                <span class="featured-items-content__item__price__original">{{currency price}}</span>
                <span class="featured-items-content__item__price__current">{{currency salePrice}}</span>
            {{else}}
                <span class="featured-items-content__item__price-__current">{{currency salePrice}}</span>
            {{/if}}
        </div>
    {{/unless}}
</div>

Hawksearch Handlebars UI

Featured Items Content Item Component