...
The aim of this article is to demonstrate how to enable mobile users to search while using their mobile devicesthe 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 Tо 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.
...
| Code Block |
|---|
<input type="button" value="Search" id="search-btn"/> |
Place this script at the bottom of you widget template.
There are two versions of the script. One is for the Hawksearh widget the other for the HawksearchBox widget.
1.Hawksearch widget
| Code Block |
|---|
<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) {
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
| Code Block |
|---|
<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 url = window.location.href.split('?')[0];} var query = "?keyword=" + keyword; url += query; location.replace(url); } }); searchBox.addEventListener('input', function () { keyword = searchBox.value; }); }); </script> |
| Note |
|---|
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:
| Code Block | ||
|---|---|---|
| ||
@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" style="display:flex"/>
</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>
} |
...
| 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 == "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 style="btn btn-secondary" display:flex"/>
</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>
} |