Step 2: Adding and Previewing the Search Resources

Now that you have a branch containing folders for all the Data Sources, you can start building your search page.

A standard search page must at least contain a Coveo Search Resources and a Coveo Search Interface component, which are the two components you’ll add to your page during this step.

Adding the Coveo for Sitecore Hive Controls to Your Layout

First, you should add the Coveo for Sitecore Hive controls to your layout. This will allow you to edit your future search page.

  1. In the Sitecore Content Editor, select an item that will act as your search page.

  2. Select Presentation > Details, in the ribbon at the top of the page.

  3. Select your page layout. The Coveo for Sitecore Hive components can be added to any layout as long as they have at least one placeholder.

  4. Select the Controls tab on the left.

  5. Include the Coveo Search Resources and Coveo Search Interface components.

    1. The Coveo Search Resources component is under Renderings > Coveo Hive > Resources. It exposes the Coveo Search resources when using the Experience Editor.
    2. The Coveo Search Interface component is under Renderings > Coveo Hive > Search Interfaces. Ensure that you check the Open the Properties dialog box immediately box.
      It exposes a first placeholder UI Content, allowing you to select a Frame.
    3. In the Control Properties dialog box, under Data Sources, select Browse.
    4. In the Select the Associated Content window, since you have not already created a Data Source for your search interface, select Create New Content.
    5. For this tutorial, select Global Search Interfaces, and select OK.
    6. Close the Control Properties, Device Editor, and Layout Details windows by selecting OK on all of them.

Now that you have added the Coveo controls, you’re ready to build your search page.

Choosing a Frame

A Frame is simply a placeholder container used to control the overall shape of your search interface (see Coveo Hive Renderings List - Frames).

  1. In the Sitecore Content Editor, select your item to act as your search page.
  2. Select Publish > Experience Editor, in the ribbon at the top of the page.
  3. In the Experience Editor, select the Coveo Search Interface component on your page. It should have the same name as your placeholder.
  4. Select Add here.

  5. When asked to choose a frame, for this tutorial, choose the Modular frame.

    Selecting the right frame is important since it’s the foundation of your search page. The Default frame is the easiest to get started with, but the modular frame offers you more flexibility.

You should now see  several placeholder added to your search page. You should now proceed to Step 3: Adding Basic Controls.