Hawksearch widgets on Hybrid page template in mobile resolution

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. 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.

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:

HawksearchBox widget: