...
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 | ||
---|---|---|
| ||
@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" classstyle="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> } |