Setting up the Interface

The Coveo for Sitecore Hive Framework consists of numerous components, namely resources, frames, placeholders and controls. When beginning to integrate Coveo into your Sitecore website, you might feel overwhelmed. Articles in this section aim at helping you get started on the right foot with Coveo for Sitecore and to ease your path to a basic, but well-structured and best-practices compliant search interface.

Example Search Page

Ready to build your own search interface from the ground up? Skip this section and jump to the Data Source Management section.

Although you should build a search page from scratch, you might first want to fast-track your way to a functional implementation. This way, you can give a Coveo for Sitecore search interface a test run and get more comfortable with how Coveo components actually look and behave in the Sitecore Experience Editor and in a live web page. For this purpose, Coveo for Sitecore ships with an example search page template (see Inserting an Example Search Page with Coveo for Sitecore Hive).

Data Source Management

Many Coveo for Sitecore Hive components are configurable through a data source. Given the amount of Coveo for Sitecore components and the number of instances you might require the same component, your data source count could quickly rise. Without proper structure, data source management is arduous. Coveo for Sitecore provides branch templates for local and global component parameters which allow you to generate entire folder structures for the storage of your data sources. Moreover, Coveo for Sitecore renderings are coded to locate and suggest local and global component parameter folders as appropriate storage locations for your data sources, based on the component type (see Rendering Data Source Branch Templates).

Search Page Structure

With data source management taken care of, you are ready to start assembling Coveo components. You now need to know the mandatory building blocks in a Coveo for Sitecore search interface and how to piece components together. Understanding the search page structure, the base Coveo placeholders and the way Coveo renderings are designed to be embedded in one another eliminates all guesswork in achieving this goal. Think of this information as your Coveo for Sitecore search interface assembly plan (see Coveo for Sitecore Hive Search Page Structure).

Mandatory Components

When creating a Coveo search interface from scratch, you first need to add the mandatory Coveo Search Resources and Coveo Search Interface components. In turn, the Coveo Search Interface component exposes a placeholder for a search interface Frame component (see Adding and Previewing the Search Resources). If you are using Sitecore SXA, Coveo for Sitecore documentation includes instructions on how to do the same in SXA pages (see Using Hive SXA Components in the Experience Editor).

The Frame component you added serves as the general layout of your search page. Whichever frame you chose reveals new placeholders. These placeholders are meant to contain some basic controls you are about to add next: a Coveo Search Box, a Coveo Result List, and the Coveo for Sitecore Analytics component (see Adding Basic Controls).

You should now have a very basic, but functional, Coveo for Sitecore search page, retrieving results from your Coveo Cloud index.

Going Further

For convenience, you should now provide a Global Search Box in the header of all or most of your website pages. When used by your web site visitors, the Global Search Box redirects the query terms to your full-fledged search interface where the search results are displayed (see Inserting and Configuring a Global Search Box Using the Coveo for Sitecore Hive Framework).

In the next sections, you will enhance the user experience by adding more interface controls and refine the results information displayed by the search interface.

Recommended Articles