Class RecommendationsItemComponent

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

Tag

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

*Note: This component should only be used within the context of the Recommendations 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="recommendations__item">
    {{#if pinned}}
        <span class="recommendations__item__pin">
            <hawksearch-icon name="star"></hawksearch-icon>
        </span>
    {{/if}}
    {{#if (lt salePrice price)}}
        <span class="recommendations__item__sale-indicator">{{strings.sale}}</span>
    {{/if}}
    <a hawksearch-link href="{{url}}" class="recommendations__item__image" aria-label="{{title}}">
        <img hawksearch-image src="{{imageUrl}}" alt="" />
    </a>
    <div class="recommendations__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="recommendations__item__price" itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
            {{#if (lt salePrice price)}}
                <span class="recommendations__item__price__original">{{currency price}}</span>
                <span class="recommendations__item__price__current" itemprop="price">{{currency salePrice}}</span>
            {{else}}
                <span class="recommendations__item__price-__current" itemprop="price">{{currency price}}</span>
            {{/if}}
        </div>
    {{/unless}}
    <hawksearch-variant-selector></hawksearch-variant-selector>
</div>
Copy