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
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 |
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
Current widget template
Examples
Here are the current default widget templates for the HawksearchBox and HawksearchResults.
HawksearchBox
@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 if (!SystemManager.IsDesignMode)
{
// ***** Start React template *******
@Html.Script(Url.WidgetContent("assets/build/js/vendor.bundle.js"), "bottom", false)
@Html.Script(Url.WidgetContent("assets/build/js/main.js"), "bottom", false)
<div data-component="react-search-box"
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-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>
// ***** End React template *******
// ***** Start 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)
<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-tracking-events="@Model.TrackingEvents"
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>*@
// ***** End Vue template *******
}
Hawksearch Results
@model HawksearchWidgets.Mvc.ViewModels.Hawksearch.SearchViewModel
@using Telerik.Sitefinity.Frontend.Mvc.Helpers
@using Telerik.Sitefinity.Services
@using Telerik.Sitefinity.Web
@if (Model.Version == "V2L" || Model.Version == "V3L" || Model.Version == "V4L")
{
<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"> </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 if (!SystemManager.IsDesignMode)
{
if (Model.Languages.Length > 1 && Model.IsMultilingualEnabled)
{
<div>
<span>@Html.Resource("ChangeResultsLanguageLabel", "HawkWidgetsResources") </span>
@for (var i = 0; i < Model.Languages.Length; i++)
{
var language = Model.Languages[i];
var languageUrl = string.Format("{0}?language={1}", Model.UrlPath, language.Name);
<a href="@languageUrl">@language.DisplayName</a>
if (i < Model.Languages.Length - 2)
{
<span>, </span>
}
else if (i == Model.Languages.Length - 2)
{
<span> @Html.Resource("OrLabel", "HawkWidgetsResources") </span>
}
}
</div>
}
// ***** Start React template *******
@Html.StyleSheet(Url.WidgetContent("assets/dist/react-vanilla.css"), "head")
@Html.Script(Url.WidgetContent("assets/build/js/vendor.bundle.js"), "bottom", false)
@Html.Script(Url.WidgetContent("assets/build/js/main.js"), "bottom", false)
<div data-component="react-app"
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()"
data-current-culture="@Model.CurrentCulture">
</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>
// ***** End React template *******
// ***** Start 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)
<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()"
data-current-culture="@Model.CurrentCulture">
<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="" v-on:click="onClick">
<h3>
<template v-if="link">
<a :href=link>{{ title }}</a>
</template>
<template v-else>
{{ title }}
</template>
</h3>
<p>
<strong class="">{{ 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> *@
// ***** End Vue template *******
}