Coveo for Sitecore – Change Global Search Page URI

We implemented global search for one of the websites that serves content in ~30 languages. We used Coveo Global Searchbox component of Coveo for Sitecore Hive and added it into the header section of the website. It is easy to insert and configure this component: https://docs.coveo.com/en/2329/coveo-for-sitecore-v5/insert-and-configure-a-global-search-box

Challenge:

As it is a multilingual website, the requirement was to navigate to the language specific search page when the user searches for any term using global search box. There is a field named Search Page URI on data-source item of Coveo Global Searchbox component to configure the search page item. But, this field is shared so we cannot configure a search page for each language. It will be same for all language versions.

[Image Source: https://docs.coveo.com/en/assets/images/c4sc-v5/SXAGlobalSearchboxSearchPageURI.png ]

Solution:

To achieve the requirement, we changed the search page URI dynamically using initSearchbox function:

You can refer to the following articles to get more information regarding this function:
https://coveo.github.io/search-ui/globals.html#initsearchbox
https://docs.coveo.com/en/294/javascript-search-framework/create-a-standalone-search-box#embedded-in-a-normal-page

We implemented it in the following way:

Step 1:

Added a field in Sitecore to configure the language specific search page. This field is not shared so we can configure the search page for each language.

Step 2:

Added a div element in the Header component. This div has the data attribute named data-url. The value of this data attribute is the URL of search page rendered by the SearchPageUrl property of the ViewModel. In the controller, we fetched value of the field added in Sitecore (step 1) and assigned it to SearchPageUrl property.

<div id="SearchPageUrl" style="display: none" data-url="@Model.SearchPageUrl"></div>

Step 3:

Added the following script block at the end of body tag in layout file:

<script>
    var searchPageUrl = document.getElementById("SearchPageUrl");
    if (searchPageUrl !== null && searchPageUrl !== undefined) {
        var searchBox = Coveo.$$(document).find("#GlobalSearchBox");
        Coveo.initSearchbox(searchBox, searchPageUrl.getAttribute("data-url"));
    }
</script>

The initSearchbox function used in the above script will initialize the global search box to redirect the search requests to the language specific search page.