Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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 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
languagec#
@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">&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 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
languagec#
@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>

}