Legacy Search UI Framework
- Inserting and Customizing a Search Interface Component
- Inserting Coveo Search Components to an Existing Item
- Inserting and Customizing a Facet Component
- Inserting and Customizing a Sort Component
- Inserting and Customizing a Tab Component
- Inserting and Customizing a Related Query Component
- Inserting and Customizing a Recommendations Component
- Inserting and Customizing a User Context Component
- Ranking and Filtering Rules
- Inserting and Customizing a Distance Resources Component
- Creating a Search Driven Page
- Duplicating the Coveo Search Component
- Inserting a Coveo Search Box to Your Header
- Autocomplete and Suggestions
- Adding a Field to a Result Template
- Adding Images to Your Search Page
- Customizing a Search Interface
- List of Available Components
- List of Available Parameters
- Relating Coveo for Sitecore Components to Sitecore Templates, Layouts, and Sublayouts
- Digging Into the Layouts and Components Code
- Creating a Custom Component Parameters
- Inserting Custom Component Parameters
- Creating a Search Interface Optimized for Mobile Devices
- Creating a Search Interface Optimized for WebCrawlers
- Understanding How MVC Components Work Behind the Scenes
- Modifying or Removing the Insert Option for the Coveo Search Page
Inserting and Customizing a Facet Component Using the Coveo for Sitecore Legacy Search UI Framework
Facets help to refine your search process by drilling down the results according to specific field value.
Making a Sitecore Field Facetable
Before inserting any facet component in a search page, you should make sure the Sitecore fields you want to facet on are facetable (See Making a Sitecore Field Facetable).
Once you identified which fields can be used as facets, you can begin the edition process of the search page.
Inserting and Customizing a Facet Component
A facet component uses the different values of a field and allows you to filter search results that match one or more of those field values.
There are several types of facets available, each giving your users a different kind of control over the search results. The following steps explain how a developer or an administrator can add and set up a basic facet component using the Sitecore Experience Editor.
To insert a facet component in a search page:
Access the Experience Editor of the Coveo search page you want to edit (see Step 1 in Customizing the Properties of Your Search Interface).
- Locate the
coveo-facets-MVC)placeholder in the left-hand side section of the search interface and select it.
Select Add here to insert a facet component.
In the Select a Rendering dialog, select the type of facet you want to add, and then choose Select.
The type of facet you choose depends on the type of data contained in the field you want to use:
Facet:for string fields.
Facet Range:for numerical and date/time fields.
Facet Slider:for numerical fields.
Facet Date Slider:for date/time fields.
Distance Facet Range: for distance fields.
Distance Facet Slider: for distance fields.
- In the Control Properties dialog:
In the Basic Settings section, fill out the following fields:
- Title: Enter the title for the facet (e.g. Author).
Field: Select the field to use to filter the results (e.g. Author).
The drop-down menu displays fields defined in the Sitecore content tree under System > Settings > Buckets > Facets. If you want the field to be available in the drop-down menu, you have to create it there. When a facet is added in this Sitecore content tree, the Coveo for Sitecore index must be rebuilt. You do not have to worry about configuring the field as facet; it will be done automatically.
Depending on the kind of facet you are adding, you may also want to set default values for the following properties:
Facet Facet Range Facet Slider Facet Date Slider Facet Distance Range Facet Distance Slider Number of values
Sort (see Facet Component Properties)
Facet value ranges (see Facet Range Component Properties)
Maximum (see Facet Slider Component Properties)
Date Format (see Facet Date Slider Component Properties)
Facet Value Ranges (see Facet Distance Range Component Properties) Maximum (see Facet Distance Slider Component Properties)
Scroll down to the ID section:
In Unique Identifier, type in a unique identifier of your choice. This identifier will be used in the website DOM and must therefore only use alphanumerical characters, underscores, and hyphens.
If you do not set a unique identifier yourself, Coveo for Sitecore will generate one for you. You are strongly encouraged to choose your own unique and meaningful identifier.
- Save and publish your page.
- Validate that the facet appears in your search interface.
- Validate that selecting a specific facet value only displays search results matching this value.
Refer to The following articles to learn more about the different facet component properties:
You may want to take a look at Inserting and Customizing a Sort Component.