Inserting a Coveo Search Box to Your Header Using the Coveo for Sitecore Legacy Search UI

Inserting a Coveo Search Box to Your Header Using the Coveo for Sitecore Legacy Search UI

This is for:

Developer System Administrator

Coveo for Sitecore 4.1 (November 2018)

It’s usually a good idea to have a search box in your header that redirects to your search page, as it allows users to search through your website content from any page.

Requirements

• You already have a Coveo-powered search page (see Inserting and Customizing a Search Interface Component or Inserting Coveo Search Components to an Existing Item).

• You already have a header template with an available placeholder. For more information on placeholders, see The Power of Placeholder Settings.

Insert a Coveo Search Box

1. In the Sitecore Content Editor, navigate to your header template, usually located under Content > Templates.

2. Select the __Standard Values of your header.

3. Select the Presentation tab, and select Details.

4. Under Default, click Edit, opening the Device Editor window.

5. Select the Controls tab.

6. When adding Web Form components:

   1. Select Add.

   2. Navigate to Sublayouts > Coveo, and select Coveo Search Box Resources.

      The Coveo Search Box Resources sublayout includes only the minimally required dependencies to include a Coveo Search Box on a page. If you plan on adding Omnibox Result List components, you need to add the Coveo Search Resources sublayout instead.

      1. In Add to Placeholder, enter the name of the placeholder in which to put your search box.

      2. Click Select.

   3. Select Add again.

   4. Navigate to Sublayouts > Coveo, and select Coveo Search Box.

      1. In Add to Placeholder, enter the name of the same placeholder as before.

      2. Click Select, opening the Control Properties window.

      3. In Id, enter a value, such as CoveoSearchBoxId.

      4. In Search page item, select the search page to which your search box redirects.

      5. Click OK to close the Control Properties window.

   5. Select OK to close the Device Editor window.

   6. Select OK to close the Layout Details window.

7. When adding MVC components:

   1. Select Add.

   2. Navigate to Renderings> Coveo, and select Coveo Search Box View Resources.

      The Coveo Search Box View Resources rendering includes only the minimally required dependencies to include a Coveo Search Box on a page. If you plan on adding Omnibox Result List components, you need to add the Coveo Search View Resources rendering instead.

      1. In Add to Placeholder, enter the name of the placeholder in which to put your search box.

      2. Click Select.

   3. Select Add again.

   4. Navigate to Renderings> Coveo, and select Coveo Search Box View.

      1. In Add to Placeholder, enter the name of the same placeholder as before.

      2. Click Select, opening the Control Properties window.

      3. In Id, enter a value, such as CoveoSearchBoxId.

      4. In Search page item, select the search page to which your search box redirects.

      5. Click OK to close the Control Properties window.

   5. Select OK to close the Device Editor window.

   6. Select OK to close the Layout Details window.

8. Save your __Standard Values item.

9. Test that your search box is present in your header.

   1. Navigate to one of your content items in which your header is present.

   2. Select the Publish tab, and click Preview.

What’s Next?

As you may notice, the search box is too big for the header. Therefore, you may want to start Inserting Custom CSS.