Class RecommendationsComponent

The Recommendations component displays a list of products determined by the rules configured in the HawkSearch admin.

Tag

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

Attributes

Name	Value	Required
widget-id	string	Yes

This attribute specifies which recommendation configuration created in the HawkSearch admin is retrieved from the API.

Event-Binding Attributes

Name	Value
hawksearch-carousel

This attribute should be placed on the element that contains each individual item element of a carousel. This is used to bind touch events.

Name	Value
hawksearch-carousel-item	number

When an element with this attribute is clicked, the carousel will move to display the range of items starting with the given index. This is typically used within pagination for the carousel.

Name	Value
hawksearch-next

When an element with this attribute is clicked, the carousel will display the next range of items.

Name	Value
hawksearch-previous

When an element with this attribute is clicked, the carousel will display the previous range of items.

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">
    {{#if headingEnabled}}
        <h2 class="heading recommendations__heading">{{title}}</h2>
    {{/if}}
    <div class="recommendations__content">
        {{#if (and carousel buttonsEnabled)}}
            <a hawksearch-previous class="recommendations__button recommendations__button--previous" title="{{strings.previous}}">
                <hawksearch-icon name="chevron-left"></hawksearch-icon>
            </a>
        {{/if}}
        <div class="recommendations__carousel">
            <div hawksearch-carousel class="recommendations__list{{attribute ' recommendations__list--carousel' carousel}}" style="left: {{carouselPosition}};">
                {{#each items}}
                    <div class="recommendations__carousel__item" style="width: {{@root.itemWidth}};">
                        <hawksearch-recommendations-item widget-id="{{@root.id}}" request-id="{{@root.requestId}}"></hawksearch-recommendations-item>
                    </div>
                {{/each}}
            </div>
            {{#if (and carousel paginationEnabled)}}
                <div class="recommendations__pagination">
                    {{#each paginationItems}}
                        <span
                            hawksearch-carousel-item="{{@index}}"
                            class="recommendations__pagination__item{{attribute ' recommendations__pagination__item--selected' selected}}"
                            title="{{title}}"
                        ></span>
                    {{/each}}
                </div>
            {{/if}}
        </div>
        {{#if (and carousel buttonsEnabled)}}
            <a
                hawksearch-next
                class="recommendations__button recommendations__button--next{{attribute ' recommendations__button--disabled' (eq nextEnabled false)}}"
                title="{{strings.next}}"
            >
                <hawksearch-icon name="chevron-right"></hawksearch-icon>
            </a>
        {{/if}}
    </div>
</div>
Copy