Coveo Dynamic Hierarchical Facet

Coveo for Sitecore (April 1, 2020)

Implements the Coveo JavaScript Search Framework DynamicHierarchicalFacet component to display a facet that renders values in a hierarchical fashion. The Coveo Dynamic Hierarchical Facet is an evolution over the Coveo Category Facet rendering, particularly because it implements Dynamic Navigation Experience.

Usage Notes

  • To use the Coveo Dynamic Hierarchical Facet rendering, you first need to:

    • have a content tree structure, such as the one below.

      Content Tree Category Structure

    • create a Single-Line Text (or Multi-Line Text) field, such as the ParentCategories field in the example below, listing the paths to each parent folder of the item. See Insert a Category Facet - Example for more details about the format of values for this field.

      Multi value example

    • index that Single-Line Text or Multi-Line Text field as a Multi-Value Facet.

  • To benefit from the automatic facet reordering functionality, group Coveo Dynamic Hierarchical Facet renderings and other dynamic facets (e.g., Coveo Dynamic Facet, Coveo Dynamic Numeric Facet Range) within a Coveo Dynamic Facet Manager.

  • Coveo Dynamic Hierarchical Facet renderings may also be used as standalone facets without a Coveo Dynamic Facet Manager.

  • Any change to the facet selection triggers a new Search API call.

Insertion Location

The Coveo Dynamic Hierarchical Facet rendering is an Allowed Control in the following placeholder(s): Dynamic Facets, Facets

Example insertion sequence for the Coveo Dynamic Hierarchical Facet rendering.

When you add the Coveo Dynamic Facet Manager SXA rendering, this adds a coveouidynamicfacetssxa placeholder. Insert your Coveo Dynamic Hierarchical Facet rendering in this coveouidynamicfacetssxa placeholder.

Example insertion sequence for the Coveo Dynamic Hierarchical Facet rendering.

Data Source Options

Option name Description
Title See title component option
Field See field component option
Facet name The identifier of the facet shown in the URL when a value in the facet is selected
Number of values See numberOfValues component option
Depends on See dependsOn component option
Enable more/less button See enableMoreLess component option
Enable scroll to top See enableScrollToTop component option
Enable collapse See enableCollapse component option
Clear facet label See clearLabel component option
Facet accuracy determined by the number of scanned results Sets the injectionDepth component option to a preset value
Coveo for Sitecore (March 26, 2021)Custom sort order See customSort component option
Coveo for Sitecore (March 26, 2021)Custom sort delimiting character See customSortDelimitingCharacter component option
Delimiting character that specifies the hierarchical dependency See delimitingCharacter component option
Notify the Breadcrumb component See includeInBreadcrumb component option
Exclude folded result parents See filterFacetCount component option
Facet collapsed by default See collapsedByDefault component option
Mapping of facet values to the desired caption See valueCaption component option
DOM unique Id Randomly generated HTML element id.
Additional data attributes Allows use of the Coveo JavaScript Search Framework DynamicHierarchicalFacet component options that aren't directly available in the data source.

Sample Generated HTML and Corresponding Visual Output

You have a structure such as the following in your Sitecore Content Editor.

Sample Structure

You use a field called ParentCategories to specify the path to an item in that structure. The item selected in the above screenshot has the following ParentCategories value.

ParentCategory sample value

Generated HTML:

<div id="coveodb691f83" class="CoveoDynamicHierarchicalFacet" data-prebind-field="fieldTranslator" 
data-field="@parentcategories" data-title="Categories" data-id="Categories" data-injection-depth="1000" 
data-delimiting-character="|" data-collapsed-by-default="true" data-enable-collapse="true" 
data-enable-scroll-to-top="false" data-filter-facet-count="false" data-include-in-breadcrumb="true" 
data-applied-prebind="true">

Visual Output:

Dyn Hierarchical Facet animation

What's Next for Me?