Set 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.

The Importance of Setting Search Hub Values

Many powerful Coveo features (e.g., Coveo Machine (Coveo ML), Coveo Usage Analytics (Coveo UA)) rely on search hub values. Regardless of the way you build your search interfaces, ensure you set Search Hub values properly from the beginning (see Understanding the Search Hub).

Integrating a Coveo-Powered Search Page

The Coveo Administration Console provides a Search Pages menu option which gives access to a search page editor (see Manage Hosted Search Pages). You might already have created a search page this way. If so, Coveo for Sitecore can seamlessly and dynamically integrate your search page code into a Sitecore item layout.

The alternative to using a Coveo-powered search page is to create and edit a search page within Sitecore, and the sections below pertain to the latter method.

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 Insert 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 Data Source Branch Templates).

Search Page Structure

With data source management taken care of, you’re 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-powered 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 Add and Preview the Search Resources). If you’re using Sitecore SXA, Coveo for Sitecore documentation includes instructions on how to do the same in SXA pages (see Use 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’re about to add next: a Coveo Search Box, a Coveo Result List, and the Coveo For Sitecore Analytics component (see Add 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 Insert and Configure a Global Search Box).

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