Insights

Coveo for Sitecore: Omnibox Customization

Sitecore Developer
Valtech

May 09, 2019

Using the Coveo component in Sitecore to create a customized omnibox.

For a recent project, I needed to create a customized omnibox that included result items, grouped in categories (Based on Page Templates), and a View All button that redirected the users to the search page.

In order to implement that, I needed to get some labels and categories from Sitecore and send it to the JavaScript part of the component. Therefore, I copied the Coveo Component to a new place in Sitecore, where we kept our project’s renderings.image001.png

I also copied the cshtml file from this path: “{root-directory}:\inetpub\wwwroot\{project-name}\Views\Coveo Hive\Results List\Coveo Omnibox Result List.cshtml” to the area folder that we kept our project’s cshtml files. Then I changed the View path of the Coveo View Rendering to the new path, and put the newly created component on the page. Then I could play with the file, and add as many elements as I wanted to it. In my case, I retrieved labels and template names (categories) from Sitecore, and put them as hidden fields in the cshtml file, so I could use them later in my JavaScript file.image002.png

The rest of the functionalities were added to the JavaScript file. I first needed to find out when the omnibox was being populated. In order to do so, I targeted the search interface and added an event listener to it. So when “populateOmnibox” event was triggered, this handler would work.

Screen Shot 2019-06-13 at 9.56.49 AM.png

Then I had to get the omnibox object (the object that kept the search result). The code for that was as follows:

Screen Shot 2019-06-13 at 9.57.03 AM.png

After that I had to find out the query expression and run it at the javascript side of the page.

Screen Shot 2019-06-13 at 9.57.12 AM.png

Then I had to predefine a deferrer and push it to the rows of the omnibox object, so that after the search results are back and the deferrer got resolved by the search results, the results could be added to the omnibox object rows, and my newly created rows could be populated. Here is the code for that:

Screen Shot 2019-06-13 at 9.57.20 AM.png

The next thing that I needed was a javascript code that built the query and ran it. The code was as the following:

Screen Shot 2019-06-13 at 9.57.47 AM.png

The next step was tricky, because the result of the search function was a promise, and it had to be deferred. Since I had nothing but pure JavaScript and the basic JQuery functions, I used the following code to defer the result of the search:

Screen Shot 2019-06-13 at 9.58.07 AM.png

I then needed to use the results values to populate the omnibox. To do so I created a simple HTML element and added that to the omnibox object.

Screen Shot 2019-06-13 at 9.58.20 AM.png

Then I had to create an object using the HTML element and add it to the deferrer, so it can be pushed to the omnibox.

Screen Shot 2019-06-13 at 10.27.07 AM.png

The full code would look like this:

 

Screen Shot 2019-06-13 at 9.56.29 AM.png

Meet The Challenges Of Today's Digital Economy

Ready to take that first step and rise to your digital potential? Contact Valtech today.
Talk to us