Prerequisite
Install the Hawksearch Connector: Installing the Connector
Goal
The aim of this article is to demonstrate how to enable mobile users to search while the Hawksearch widgets are placed on a Hybrid template.
Overview
Due to limitations in Sitefinity while using the Hawksearch widgets on a Hybrid page while on mobile searching doesn’t work correctly. It simply redirects you to the next input on the page. The overcome this problem we have developed a simple mechanism which provides the users with a button to use while searching. In order for this button to submit the search request a script is needed. Below you will find both the code for the button and the script sample as well as ready to use examples.
This fix applies to the Vue template only.
Script and Button
You need to place this button under the search-box component. For further clarity you can look at the examples at the end of this article.
<input type="button" value="Search" id="search-btn"/>
There are two versions of the script. One is for the Hawksearh widget the other for the HawksearchBox widget.
1.Hawksearch widget
<script>
window.addEventListener("load", function (event) {
var keyword;
var searchButton = document.getElementById('search-btn');
var searchBox = document.getElementsByClassName('hawk__searchBox__searchInput')[0].children[0];
searchButton.addEventListener('click', function () {
if (keyword && keyword.length > 0) {
var url = window.location.href.split('?')[0];
var query = "?keyword=" + keyword;
url += query;
location.replace(url);
}
});
searchBox.addEventListener('input', function () {
keyword = searchBox.value;
});
});
</script>
2. HawksearchBox widget
<script>
window.addEventListener("load", function (event) {
var keyword;
var searchButton = document.getElementById('search-btn');
var searchBox = document.getElementsByClassName('hawk__searchBox__searchInput')[0].children[0];
var model = @Html.Raw(Json.Encode(Model));
var resultsUrl = model.ResultsUrl;
searchButton.addEventListener('click', function () {
if (keyword && keyword.length > 0) {
var url = window.location.href.split('?')[0];
if (resultsUrl && resultsUrl.length > 0) {
url = 'http://' + window.location.host + resultsUrl;
}
var query = "?keyword=" + keyword;
url += query;
location.replace(url);
}
});
searchBox.addEventListener('input', function () {
keyword = searchBox.value;
});
});
</script>
Choose the script according to which search box you are using - the separate box widget or the build in search box in the results widget.
Ready to use examples
Hawksearch widget:
@model HawksearchWidgets.Mvc.ViewModels.Hawksearch.SearchViewModel
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Services
@using Telerik.Sitefinity.Web
@using Newtonsoft.Json
@using QueryStringHelper = HawksearchWidgets.Mvc.Helpers.QueryStringHelper;
@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>
@{
var queryParameters = HttpContext.Current.Request.QueryString;
for (var i = 0; i < Model.Languages.Length; i++)
{
var language = Model.Languages[i];
var languageQuery = QueryStringHelper.Get(queryParameters, language);
<a href="@languageQuery">@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>
}
@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-current-culture="@Model.CurrentCulture"
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>
<input type="button" value="Search" id="search-btn"/>
</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>
window.addEventListener("load", function (event) {
var keyword;
var searchButton = document.getElementById('search-btn');
var searchBox = document.getElementsByClassName('hawk__searchBox__searchInput')[0].children[0];
searchButton.addEventListener('click', function () {
if (keyword && keyword.length > 0) {
var url = window.location.href.split('?')[0];
var query = "?keyword=" + keyword;
url += query;
location.replace(url);
}
});
searchBox.addEventListener('input', function () {
keyword = searchBox.value;
});
});
</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>
}
HawksearchBox widget:
@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" style="display:flex">
<search-box search-page="@Model.ResultsUrl"></search-box>
<input type="button" value="Search" id="search-btn" class="btn btn-secondary" />
</div>
</div>
</div>
</div>
<script>
window.addEventListener("load", function (event) {
var keyword;
var searchButton = document.getElementById('search-btn');
var searchBox = document.getElementsByClassName('hawk__searchBox__searchInput')[0].children[0];
var model = @Html.Raw(Json.Encode(Model));
var resultsUrl = model.ResultsUrl;
searchButton.addEventListener('click', function () {
if (keyword && keyword.length > 0) {
var url = window.location.href.split('?')[0];
if (resultsUrl && resultsUrl.length > 0) {
url = 'http://' + window.location.host + resultsUrl;
}
var query = "?keyword=" + keyword;
url += query;
location.replace(url);
}
});
searchBox.addEventListener('input', function () {
keyword = searchBox.value;
});
});
</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>
}