HawkSearch WebsiteHawkSearch DashboardHawkSearch User Guide
Guides

Rapid UI Overrides

Suggest Edits

Description

This page highlights how to override the default Rapid UI markup as well as include custom functions.

How to override default markup and create custom components:

Define the components object as part of your HawkSearch.config as needed. The component you are overriding will be the name of the default component tag, minus the prefix hawksearch- (ex. https://handlebars-ui.hawksearch.com/latest/classes/Components.PaginationComponent.html would be 'pagination')

HawkSearch.init({
    clientId: '',
    components: {
        'search-results-item': {
            template: 'custom-search-results-item' // the template string here must match the template ID you have defined in your markup
        }
    }
});

Copy the default markup from the base component page you are wanting to override and add it within your HTML page. Adapt as necessary for your needs (ex. https://handlebars-ui.hawksearch.com/latest/classes/Components.SearchResultsItemComponent.html). Here we have removed the rating and pinned markup in the Search Results Item component

<template id="custom-search-results-item">
    <div class="search-results-list__item search-results-list__item--{{type}}">
        {{#if (eq type "product")}}
            {{#if (lt salePrice price)}}
                <span class="search-results-list__item__sale-indicator">{{strings.sale}}</span>
            {{/if}}
            <a hawksearch-link href="{{url}}" class="search-results-list__item__image" aria-label="{{title}}">
                <img hawksearch-image src="{{imageUrl}}" alt="" />
            </a>
            <div class="search-results-list__item__title">
                <a hawksearch-link href="{{url}}">{{title}}</a>
            </div>
            {{#unless (eq price undefined)}}
                <div class="search-results-list__item__price" itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
                    {{#if (lt salePrice price)}}
                        <span class="search-results-list__item__price__original">{{currency price}}</span>
                        <span class="search-results-list__item__price__current" itemprop="price">{{currency salePrice}}</span>
                    {{else}}
                        <span class="search-results-list__item__price-__current" itemprop="price">{{currency price}}</span>
                    {{/if}}
                </div>
            {{/unless}}
            <hawksearch-variant-selector></hawksearch-variant-selector>
        {{else}}
            <div class="search-results-list__item__title">
                <a hawksearch-link href="{{url}}">{{title}}</a>
            </div>
            {{#if description}}
                <p>{{description}}</p>
            {{/if}}
        {{/if}}
    </div>
</template>

You could also hide a specific component without having to add any additional style or scripts, by setting up an empty string as the component's template as below:

HawkSearch.init({
    clientId: '',
    components: {
        'query-suggestions': {
            template: '' // the template will be null, therefore a <query-suggestions /> component won't be rendered in your UI
        }
    }
});

How to add custom functions to your components:

Within your customized markup, you can also define custom functions that go into your template markup. The following example takes a custom attribute called file_type to render a custom font package icon (ex. Fontello, not included) to be passed into a custom function called checkFileType

<template id="custom-search-results-item">
    <div class="search-results-list__item search-results-list__item--{{type}}">
        {{#checkFileType attributes.file_type}}
            <span class="search__product__icon">{{this}}</span>
        {{/checkFileType}}
        {{#if (eq type "product")}}
            {{#if (lt salePrice price)}}
                <span class="search-results-list__item__sale-indicator">{{strings.sale}}</span>
            {{/if}}
            <a hawksearch-link href="{{url}}" class="search-results-list__item__image" aria-label="{{title}}">
                <img hawksearch-image src="{{imageUrl}}" alt="" />
            </a>
            <div class="search-results-list__item__title">
                <a hawksearch-link href="{{url}}">{{title}}</a>
            </div>
            {{#unless (eq price undefined)}}
                <div class="search-results-list__item__price" itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
                    {{#if (lt salePrice price)}}
                        <span class="search-results-list__item__price__original">{{currency price}}</span>
                        <span class="search-results-list__item__price__current" itemprop="price">{{currency salePrice}}</span>
                    {{else}}
                        <span class="search-results-list__item__price-__current" itemprop="price">{{currency price}}</span>
                    {{/if}}
                </div>
            {{/unless}}
            <hawksearch-variant-selector></hawksearch-variant-selector>
        {{else}}
            <div class="search-results-list__item__title">
                <a hawksearch-link href="{{url}}">{{title}}</a>
            </div>
            {{#if description}}
                <p>{{description}}</p>
            {{/if}}
        {{/if}}
    </div>
</template>

After your HawkSearch.config object, register a new helper by adding it to the hawksearch:initialized event listener. This example returns markup using font based icons from your custom font package, to show a different icon for a different file type, based on the file_type value stored within HawkSearch

addEventListener('hawksearch:initialized', (event) => {
    HawkSearch.handlebars.registerHelper('checkFileType', function(file_type) {
        if (file_type) {
            let markup = '<i class="';
            if (file_type === 'pdf') {
                markup += 'icon-pdf';
            } else if (file_type === 'doc' || file_type === 'docx') {
                markup += 'icon-word';
            } else if (file_type === 'xls' || file_type === 'xlsx') {
                markup += 'icon-excel';
            } else {
                markup += 'icon-generic-document';
            }
            return markup + '"></i>';
        } else {
            return null;
        }
    });
});

How to Force all returned search results to be of type Product or Item

There are typically two types of search results that most HawkSearch customers leverage: Products (sometimes called items) and Content (usually associated with blogs or PDF files for example). They typically are returned with two different search result layouts - a card layout for items and a list layout for content. Although there are many ways to address these layout options, one simple example to force all results to be like an item is within the HawkSearch.config, in the search section add itemTypes as below:

search: {
  url: window.location.pathname,
    itemTypes: {
      default: "product"
    }
},

📘

Reference Use Only

You only need to override the components whose markup you wish to change. By passing in your custom template id as part of your HawkSearch.config.components object, it will use the remaining default component markup. If you are overriding a component which references another component, you can simply leave it as is within your custom template (the above example continues to utilize the default hawksearch-variant-selector markup)

Updated 7 months ago