Step 3: Adding Basic Controls

Step 3: Adding Basic Controls

Now that you’ve added a Modular frame, you should see several new placeholders on your page.

During this step of the tutorial, you’ll learn how to add some of the most basic components of a search page.

Add a Search Box Component

The search box component is one of the most basic components of a search page.

1. In the Sitecore Experience Editor, click the Main Section placeholder.

2. Select and add the Search Section control. This creates a new set of placeholders for the Coveo Search Box and its related settings.

3. Click the Search Box placeholder and select Add here.

4. Choose the Search Box Control. You’ll be asked to choose a Data Source item. Select Create New Content.

5. Give it the name you want, but make sure you place it under the Global Search Box parameters item you created before when branching the Global Data Sources (see Step 1: Branching the Data Sources).

6. Save the page.

This search box will then use the global settings set in your Data Source branch. You can modify these settings in the Presentation of the item, in the Content Editor, or directly in the Experience Editor:

1. In the Experience Editor, select the Search Box control. Then, in the Coveo Searchbox window, select the Coveo Icon on the left.

2. The property editor should now be visible. In the Basic Settings section, look for the Placeholder Text field and enter any text that you want to display in the search box. For this tutorial, choose Search.

3. Click OK to close the window and save the page. You should now see a placeholder text in the search box input.

   

Later, if you want to create another search box for another project, you can reuse the Data Source you created, including this new placeholder text you added manually.

Add a Result List Component

Now that you have a search box, you typically add a result list so your results can be displayed.

1. In the Sitecore Experience Editor, select the Search Box control and use the parent selector button before More until you reach the Main Section.

2. Click Add here under the search box.

   

3. Select the Result Section control. A new set of placeholders will appear.

4. Select the Result List placeholder and add a Coveo Result List control.

5. To add a new Data Source item as required, select Create New Content.

6. Choose the parent of the new content item. For this tutorial, select the Global Result List folder as a parent.

Add the Coveo for Sitecore Analytics Component

Now that you have a functional search page, you need to ensure that analytics tracking is in place. Coveo for Sitecore will politely notify you with a red message at the top of the page.

To insert an Analytics component

1. Locate and click the UI Header placeholder.

   

2. Select the Coveo for Sitecore Analytics rendering.

   

3. Create a new Data Source under the Global Analytics folder.

You should now have a functional search box and result list. You should now proceed to Step 4: Adding Related Controls.