Goal

The purpose of this article is to provide you with the necessary information in order to successfully migrate your widget templates from version x.xxxx.x.29 or earlier to version x.xxxx.x.30 and above of the Hawksearch Connector.

Prerequisite

Info
Configure Connector - Configure Hawksearch

Steps to migrate

With the introduction of this version the Hawksearch connector no longer uses Lucene and Elastic in it’s terminology or source code. These terms were replaced with corresponding version which are:

Hawksearch Version	Corresponding meaning
V2L	Clients on the first version of Hawksearch
V3L	Clients on Older Lucene Template
V4L	Latest Version with Lucene
V4	Elastic Search Version

Info
In order to address these changes a configuration dropdown with the above mentioned versions has been added to the Hawksearch configuration. You can find it under Administration → Settings → Advanced settings → Hawksearch.

The SearchBoxViewModel and the SearchViewModel which transfer the information to the widget templates no longer contain a property bool IsElastic {get; set;}. The view models now contain the following property string Version {get; set;} which holds the version which has been specified in the advanced settings. Please migrate to the new Version property and use it to do the necessary checks.

Previous widget template

Image Removed

Image Added

Current widget template

Image Removed

Image Added

Examples

Here are the current default widget templates for the HawksearchBox and HawksearchResults.

HawksearchBox

Code Block

@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 != "V4")
{
    <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
{
    // React template

    if (!SystemManager.IsDesignMode)
    {
        @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/react-hawksearch.css"), "head")
        @Html.StyleSheet(Url.WidgetContent("assets/dist/react-hawksearch-override.css"), "head")
    }

    <div data-component="react-search-box-bootstrap"
         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-json-params="@Model.Data"
         data-search-page="@Model.ResultsUrl"
         data-index-name="@Model.Index"
         data-current-culture="@Model.CurrentCulture">
    </div>

    <script data-translations="react-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"))"
        }
    </script>

    // ***************************************************************************

    // Vue template

        @* @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 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>  *@
}

Hawksearch Results

Code Block

@model HawksearchWidgets.Mvc.ViewModels.Hawksearch.SearchViewModel
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Services
@using Newtonsoft.Json

@if (Model.Version != "V4")
{
    <div data-role="hawk-results" class="row hs-wrap" style="display: none;">
        <div class="col-md-3 hs-col-3">
            <div id="hawkbannerlefttop"></div>
            <div id="hawkfacets"></div>
            <div id="hawkbannerleftbottom"></div>
            <input type="hidden" name="search-term" value="@Model.Keyword" />
        </div>
        <div role="main" class="col-md-9 hs-col-9" id="main-content">
            <div id="hawktitle"></div>
            <div class="right-bg">
                <div id="hawkbannertop"></div>
                <div id="hawktoptext"></div>
                <div id="hawkrelated"></div>
                <div id="hawktoppager"></div>
                <div id="hawktoptext"></div>

                <div id="hawkitemlist" class="item-list horizontal resource-listing clearfix">
                </div>

                <div id="hawkbottompager"></div>
                <div class="clear">&nbsp;</div>
            </div>
        </div>
    </div>

    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)
    }
}
else
{
    // React template

    @*if (!SystemManager.IsDesignMode)
        {
            @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/react-hawksearch.css"), "head")
            @Html.StyleSheet(Url.WidgetContent("assets/dist/react-hawksearch-override.css"), "head")
        }

        <div data-component="react-app-bootstrap"
            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-tracking-events="@Model.TrackingEvents"
            data-index-name="@Model.HawksearchIndexName"
            data-json-params="@Model.Data"
            data-show-searchbox="@Model.ShowSearchBox.ToString()">
        </div>

        <script data-translations="react-mappings" type="application/json">
            {
            "Telerik.Sitefinity.Events.Model.Event": "@Html.HtmlSanitize(Html.Resource("EventTypeDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.Libraries.Model.Image": "@Html.HtmlSanitize(Html.Resource("ImageTypeDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.Libraries.Model.Video": "@Html.HtmlSanitize(Html.Resource("VideoTypeDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.Libraries.Model.Document": "@Html.HtmlSanitize(Html.Resource("DocumentTypeDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.News.Model.NewsItem": "@Html.HtmlSanitize(Html.Resource("NewsItemDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.Blogs.Model.BlogPost": "@Html.HtmlSanitize(Html.Resource("BlogPostDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.Lists.Model.ListItem": "@Html.HtmlSanitize(Html.Resource("ListItemDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.Pages.Model.PageNode": "@Html.HtmlSanitize(Html.Resource("PageNodeDisplayName", "HawkWidgetsResources"))"
            }
        </script>

        <script data-translations="react-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>*@

    // ***************************************************************

    // Vue template

    @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-spa"
         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-tracking-events="@Model.TrackingEvents"
         data-index-name="@Model.HawksearchIndexName"
         data-json-params="@Model.Data"
         data-hawksearch-recommendation-api=""
         data-widget-guid=""
         data-show-searchbox="@Model.ShowSearchBox.ToString()">

        <div class="hawk">
            @if (Model.ShowSearchBox)
            {
                <div class="hawk__header">
                    <div data-component="hawksearch-field">
                        <search-box></search-box>
                    </div>
                </div>
            }

            <div class="hawk__body">
                <div data-component="hawksearch-facets">
                    <facet-list></facet-list>
                </div>

                <div data-component="hawksearch-results">
                    <results></results>
                </div>
            </div>
        </div>
    </div>

    <script id="vue-hawksearch-result-item" type="x-template">
        <div class="media-body sf-media-body" v-on:click="onClick">
            <h3>
                <template v-if="link">
                    <a :href=link>{{ title }}</a>
                </template>
                <template v-else>
                    {{ title }}
                </template>
            </h3>
            <p>
                <strong class="sfHighlight">{{ title }}</strong>
                <span>{{ content }}</span>
            </p>
            <a :href="link">{{ link }}</a>
        </div>
    </script>

    <script data-translations="vue-mappings" type="application/json">
        {
        "Telerik.Sitefinity.Events.Model.Event": "@Html.HtmlSanitize(Html.Resource("EventTypeDisplayName", "HawkWidgetsResources"))",
        "Telerik.Sitefinity.Libraries.Model.Image": "@Html.HtmlSanitize(Html.Resource("ImageTypeDisplayName", "HawkWidgetsResources"))",
        "Telerik.Sitefinity.Libraries.Model.Video": "@Html.HtmlSanitize(Html.Resource("VideoTypeDisplayName", "HawkWidgetsResources"))",
        "Telerik.Sitefinity.Libraries.Model.Document": "@Html.HtmlSanitize(Html.Resource("DocumentTypeDisplayName", "HawkWidgetsResources"))",
        "Telerik.Sitefinity.News.Model.NewsItem": "@Html.HtmlSanitize(Html.Resource("NewsItemDisplayName", "HawkWidgetsResources"))",
        "Telerik.Sitefinity.Blogs.Model.BlogPost": "@Html.HtmlSanitize(Html.Resource("BlogPostDisplayName", "HawkWidgetsResources"))",
        "Telerik.Sitefinity.Lists.Model.ListItem": "@Html.HtmlSanitize(Html.Resource("ListItemDisplayName", "HawkWidgetsResources"))",
        "Telerik.Sitefinity.Pages.Model.PageNode": "@Html.HtmlSanitize(Html.Resource("PageNodeDisplayName", "HawkWidgetsResources"))"
        }
    </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>

}

Versions Compared

Old Version 7

New Version 8

Key

Goal

Prerequisite

Steps to migrate

Previous widget template

Current widget template

Examples

HawksearchBox

Hawksearch Results

Page Comparison

Versions Compared

Old Version 7

New Version 8

Key

Goal

Prerequisite

Steps to migrate

Previous widget template

Current widget template

Examples

HawksearchBox

Hawksearch Results