Improve the Experience
- Create a Simple Result List
- Add Related Controls
- List Result Sort Options in a Dropdown
- Toggle Between a List and a Card Result Layout
- Insert a Category Facet
- Override Coveo for Sitecore Hive Initialization Options
- Use Custom Initialization Scripts
- Configure Custom Ranges for Range Facets
- Insert and Customize a Distance Resources Component
- Use Sitecore Personalization With Coveo
- Duplicate a Coveo for Sitecore Component to Modify Its HTML
- Create Custom Components
Create Custom Components
Coveo for Sitecore Hive components contain most, if not all, the search interface building blocks required for your implementation. However, you might come upon situations where you feel none of the default Coveo for Sitecore Hive components deliver the functionality you need, no matter the data source settings available for the component. You might then consider going outside the box and create a component of your own.
Before opting for this elaborate route, you should ensure that you don’t overlook simple alternatives and, if all else fails, that you get a clear understanding of the task you’re about to undertake.
To Create or Not to Create a Custom Component
You should only decide to create a custom Coveo for Sitecore Hive component after all existing alternatives have been exhausted. The following table lists a few common use cases where very simple alternatives to creating custom components are available.
|Use Case||Alternative Solution||Documentation Article|
|Changing CSS applied to Coveo for Sitecore components||Use the
||Use Custom Initialization Scripts|
|Only changing the HTML of a Coveo for Sitecore component (no changes to the model are required)||Duplicate the Coveo for Sitecore component and edit the HTML of the duplicate
||Duplicate a Coveo for Sitecore Component to Modify Its HTML|
To summarize, use the following flowchart to determine your implementation method.
Custom Component Creation Process
You have a need for a search interface functionality where you have no choice but to create a custom component which interacts with Coveo for Sitecore components. Where do you go from here?
Once you have created a custom component, you want to integrate it in the same way as a Coveo for Sitecore Hive component. Additionally, genuine Coveo for Sitecore Hive components are configurable through their related data source item. To be equally configurable, your custom component model needs to retrieve its settings the same way. As a result, a Coveo for Sitecore Hive component typically includes all the following parts:
a template item used for the component data sources
a rendering view file
a rendering item
Learn how to create template items, renderings, and models in Sitecore so you can use them in a Coveo Search Interface (see Integrate a Custom Component in Sitecore using Coveo for Sitecore Hive Framework).
Don’t edit Coveo for Sitecore package items directly, as your modifications will be overwritten when upgrading Coveo for Sitecore. Instead, create all aforementioned parts in folders outside
Coveo Hive folders. The custom Multi-Sort tutorial demonstrates this good practice (see Custom Multi-Sort Tutorial - Prepare the Ground).
Once all your custom component parts are created, you’re ready to insert your component in an existing search interface, either through a Coveo for Sitecore Placeholder Section or by creating a Coveo Hive Placeholder Extender item (see Insert Custom Components in an Existing Search Interface).
This section contains a tutorial on how to create all the aforementioned Coveo for Sitecore component parts for an example Multi-Sort custom component (see Create a Custom Coveo for Sitecore Hive Component - Multi-Sort Tutorial).
Finally, solutions to advanced component option fetching and setting scenarios are presented (see Reuse Properties From Another Existing Component).