Inserting and Configuring a Global Search Box Using the Coveo for Sitecore Hive Framework

A global search box will be present on most, if not all of your pages and will redirect the search queries to the search interface.

Coveo for Sitecore Hive offers a Coveo Global Search Box component.

It can be used in and out of the search results page. This article explains how to use it in both scenarios.

Prerequisite : Coveo Search Resources

For the search box to work properly, you need to include the Coveo Search Resources component on every pages that will host the search box.

Scenario 1: Different Search Boxes in and out of the Search Results Page

The Coveo Search Interface component contains a placeholder for a Coveo Search Box. Inserting a search box in the search interface using that placeholder will connect the box to the the search interface and the results list within it.

However, you cannot use this local search box outside of the search interface, hence the need for two search boxes.

Search Box Global Search Box

The local search box is a basic control on a search interface. If you have not done it already, follow the Getting Started Tutorial. If you have successfully completed the tutorial, you should have a search box in your search interface that drives the Coveo Results List.

  1. In the page header of the pages that will have a global searchbox, except the one used to display the search results, insert a Coveo Global Searchbox rendering.

  2. Create or select a data source for the Global Searchbox. Validate that the SearchPageUri parameter is set using the Coveo Edit Datasource button on the Global Searchbox.

You should now have a search box that redirects to the given search page URI. Once you reach the search results page, the local search box can be used for new queries.

Scenario 2: Same Search Box in and out of the Search Results Page

You might want to include a search box in the header of all of your pages which can also be used as the search box of a Search Interface.

To connect the global search box to the search interface in the results page, the search interface needs to understand that the search box is an external component. An external component is linked to the search interface without being inserted within one of its placeholders.

Inserting the Global Search Box inside of an External Component Section

  1. In your page header, insert the External Components Section rendering, located in the Sections folder.
  2. Create or select a data source for the External Components Section.
  3. In the External Components Section, select the External Components placeholder and insert a new rendering.
  4. Select the Global Search Section, and select Next. This will add placeholders for you to insert the search box and related components.

    Global Search Section

  5. Select the Global Searchbox placeholder and insert a new rendering.
  6. Select the Coveo Global Searchbox rendering.

    Global Search Box Rendering

  7. Create or select a data source for the Global Searchbox. Validate that the SearchPageUri parameter is set using the Coveo Edit Datasource button on the Global Searchbox.

You should now have a search box that redirects to the given search page URI. Once you are on the search results page, new queries will reload the page. To avoid this behavior, you need to configure the External Components Section to tell the search interface that the search box is a local component.

Configuring the External Components Section

To configure the section, you need to edit the data source of the External Components Section.

  1. In the Sitecore Experience Editor, select the External Components Section.
  2. In the External Components Section box, click the Edit Data Source button.

    External Component Edit

  3. Select the search interface data source that you want to bind the components to.

From now on, every component initialized within this External Components Section will behave as if it was inside this search interface.

The search box will be bound to the search interface if it is located on the same page, but will still act as a global searchbox if the search interface is not found.