Example: Overriding the Popular searches component to add a custom label

Goal

The aim of this article is to demonstrate how to override the SearchSuggestion and PopularSearches component in order to customize the popular searches label.

Prerequisite

Configured Hawksearch results widget using the Vue template

Configuring Hawksearch results widget

Enable Vue.js for Hawksearch results widget

This customization is available for versions x.xxxx.xx.33 and above of the connector.

Components override

In order to customize the popular searches label you need to first add that component to the SearchSuggestions component. Here on line 14 we add the needed component.

 <script id="vue-hawksearch-search-suggestions" type="x-template">
            <div class="hawk-autosuggest-menu">
                 <template v-if="fieldFocused && (loadingSuggestions || suggestions)">
                    <ul class="hawk-dropdown-menu hawk-autosuggest-menu__list hawk-autosuggest-outer-list">
                        <template v-if="loadingSuggestions">
                            <li class="hawk-autosuggest-menu__item">{{ $t('Loading') }}...</li>
                        </template>
                        <template v-else-if="suggestions.Products.length">
                            <ul class="hawk-autosuggest-inner-list">
                                <h3>Results</h3>
                                <suggestion-item v-for="item in suggestions.Products" :item="item" :key="item.Results.DocId" v-on:itemselected="onItemSeleted"></suggestion-item>
                            </ul>
                            <div class="autosuggest-inner-container" v-if="suggestions.Categories.length || suggestions.Popular.length || suggestions.Content.length">
                                <popular-container :suggestions="suggestions"></popular-container>
                            </div>
                        </template>
                        <template v-else>
                            <li class="hawk-autosuggest-menu__item">{{ $t('No Results') }}</li>
                        </template>
                    </ul>
                 </template>
            </div>
 </script>

After the component is in use we can now override its template to display a custom label. Here on line 3, we add the custom label

        <script id="vue-hawksearch-popular-container" type="x-template">
                <div v-if="suggestions && suggestions.Popular && suggestions.Popular.length">
                    <h3>Popular searches</h3>
                    <li v-for="popular in suggestions.Popular" :key="popular.Value" class="autosuggest-menu__item">
                        <div v-html="popular.Value"></div>
                    </li>
                </div>
        </script>

Ready-to-use example

The code snippet below demonstrates a fully functional HawksearchBox widget with the component override included in it.

@model HawksearchWidgets.Mvc.ViewModels.HawksearchBox.SearchBoxViewModel
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Modules.Pages
@using Telerik.Sitefinity.Services
@using Newtonsoft.Json

@if (Model.Version == "V2L" || Model.Version == "V3L" || Model.Version == "V4L")
{
    <div class="site-search">
        <input type="hidden" value="@Model.Index">
        <input type="hidden" value="@Model.ResultsUrl" data-search-page="@Model.ResultsUrl">

        <div>
            <input class="site-search-input" placeholder="@Html.HtmlSanitize(Html.Resource("ImLookingFor", "HawkWidgetsResources"))" type="text" id="txtSiteSearch">
            <button class="site-search-btn" id="btnSiteSearch">
                <span class="visually-hidden">@Html.HtmlSanitize(Html.Resource("SubmitButtonText"))</span>
                <svg class="icon icon-search-01">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search-01"></use>
                </svg>
            </button>
        </div>
    </div>

    //string hawkCssUrl = Hawksearch.Helpers.HawksearchApiHelper.GetHawksearchUrl().Replace("http://", "https://") + "/includes/hawksearch.css";
    @*@Html.StyleSheet(hawkCssUrl, "head", false)*@
    @Html.Script(ScriptRef.JQuery, "top", false)

    if (!SystemManager.IsDesignMode)
    {
	    @Html.Script(Url.WidgetContent("Mvc/Scripts/polyfills.js"), "top", false)
        @Html.Script(Url.WidgetContent("Mvc/Scripts/hawksearch-init.js"), "head", false)
        @Html.Script(Url.WidgetContent("Mvc/Scripts/hawksearch.js"), "head", false)
        @Html.Script(Url.WidgetContent("Mvc/Scripts/hawksearch-autosuggest.js"), "bottom", false)
        @Html.Script(Url.WidgetContent("Mvc/Scripts/hawksearchbox.js"), "bottom", false)
    }
}
else
{

        @Html.Script(Url.WidgetContent("assets/build/js/vendor.bundle.js"), "bottom", false)
        @Html.Script(Url.WidgetContent("assets/build/js/main.js"), "bottom", false)

        @Html.StyleSheet(Url.WidgetContent("assets/build/css/vendor.css"), "head")
        @Html.StyleSheet(Url.WidgetContent("assets/build/css/main.css"), "head")
        @Html.StyleSheet(Url.WidgetContent("assets/dist/vue-hawksearch.css"), "head")
        @Html.StyleSheet(Url.WidgetContent("assets/dist/vue-hawksearch-override.css"), "head")

        <div data-component="vue-app-searchbox"
             data-client-guid="@Model.ClientId"
             data-hawksearch-tracking-api="@Model.TrackingUrl"
             data-hawksearch-base-api="@Model.HawksearchBaseAPI"
             data-hawksearch-search-api="@Model.HawksearchSearchingAPI"
             data-hawksearch-autocomplete-api="@Model.AutocompleteUrl"
             data-search-page="@Model.ResultsUrl"
             data-show-searchbox="True"
             data-json-params="@Model.Data"
             data-index-name="@Model.Index"
             data-current-culture="@Model.CurrentCulture">

            <div class="hawk">
                <div class="hawk__header">
                    <div data-component="hawksearch-field">
                        <search-box search-page="@Model.ResultsUrl"></search-box>
                    </div>
                </div>
            </div>
        </div>

        <script id="vue-hawksearch-search-suggestions" type="x-template">
            <div class="hawk-autosuggest-menu">
                 <template v-if="fieldFocused && (loadingSuggestions || suggestions)">
                    <ul class="hawk-dropdown-menu hawk-autosuggest-menu__list hawk-autosuggest-outer-list">
                        <template v-if="loadingSuggestions">
                            <li class="hawk-autosuggest-menu__item">{{ $t('Loading') }}...</li>
                        </template>
                        <template v-else-if="suggestions.Products.length">
                            <ul class="hawk-autosuggest-inner-list">
                                <h3>Results</h3>
                                <suggestion-item v-for="item in suggestions.Products" :item="item" :key="item.Results.DocId" v-on:itemselected="onItemSeleted"></suggestion-item>
                            </ul>
                            <div class="autosuggest-inner-container" v-if="suggestions.Categories.length || suggestions.Popular.length || suggestions.Content.length">
                                <popular-container :suggestions="suggestions"></popular-container>
                            </div>
                        </template>
                        <template v-else>
                            <li class="hawk-autosuggest-menu__item">{{ $t('No Results') }}</li>
                        </template>
                    </ul>
                 </template>
            </div>
        </script>

        <script id="vue-hawksearch-popular-container" type="x-template">
                <div v-if="suggestions && suggestions.Popular && suggestions.Popular.length">
                    <h3>Popular searches</h3>
                    <li v-for="popular in suggestions.Popular" :key="popular.Value" class="autosuggest-menu__item">
                        <div v-html="popular.Value"></div>
                    </li>
                </div>
        </script>

        <script data-translations="vue-translations" type="application/json">
            {
            "Narrow Results": "@Html.HtmlSanitize(Html.Resource("NarrowResults", "HawkWidgetsResources"))",
            "Search Results": "@Html.HtmlSanitize(Html.Resource("SearchResults", "HawkWidgetsResources"))",
            "Search Results for": "@Html.HtmlSanitize(Html.Resource("SearchResultsFor", "HawkWidgetsResources"))",
            "Sort By": "@Html.HtmlSanitize(Html.Resource("SortBy", "HawkWidgetsResources"))",
            "Enter a search term": "@Html.HtmlSanitize(Html.Resource("EnterKeyword", "HawkWidgetsResources"))",
            "Quick Lookup": "@Html.HtmlSanitize(Html.Resource("QuickLookup", "HawkWidgetsResources"))",
            "Clear All": "@Html.HtmlSanitize(Html.Resource("ClearAll", "HawkWidgetsResources"))",
            "Clear": "@Html.HtmlSanitize(Html.Resource("Clear", "HawkWidgetsResources"))",
            "No Results": "@Html.HtmlSanitize(Html.Resource("NoResults", "HawkWidgetsResources"))",
            "Loading": "@Html.HtmlSanitize(Html.Resource("Loading", "HawkWidgetsResources"))",
            "You've Selected": "@Html.HtmlSanitize(Html.Resource("YouSelected", "HawkWidgetsResources"))",
            "response_error_generic": "An error occurred while searching for your results. Please contact the site administrator."
            }
        </script>  
}