Coveo Dynamic Numeric Facet Range

Coveo for Sitecore (April 1, 2020)

Implements the Coveo JavaScript Search Framework DynamicFacetRange component to display a facet whose values are expressed as numeric ranges. The Coveo Dynamic Numeric Facet Range is an evolution over the Coveo Numeric Facet Range rendering, particularly because it implements Dynamic Navigation Experience.

The DynamicFacetRange extends the DynamicFacet component and supports most of its component options.

Usage Notes

  • The Sitecore field which the facet is based on must be included for indexing in the Templates table of the Indexing Manager (see About the Indexing Manager - Fields).

  • To use the Coveo Dynamic Numeric Facet Range rendering with custom numeric ranges, create a content tree structure, such as the one below, containing a Custom Numeric Ranges item with children Numeric Range items. This structure can be placed anywhere in the content tree. You will reference the location of the Custom Numeric Ranges item in the Facet value ranges data source option (see Configure Custom Ranges for a Date Range or Numeric Range Facet).

    Dyn Numeric Facet Range required items

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

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

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

Insertion Location

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

Example insertion sequence for the Coveo Dynamic Numeric Facet Range rendering.

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

Example insertion sequence for the Coveo Dynamic Numeric Facet Range rendering.

Data Source Options

Option name Description
Title See title component option
Field See field component option
Facet name See id component option
Depends on See dependsOn component option
Enable collapse See enableCollapse component option
Facet collapsed by default See collapsedByDefault component option
Enable search for the facet See enableFacetSearch component option
Scroll back to the top of the page on interaction See enableScrollToTop component option
Exclude folded result parents The path to use as the path prefix for every query
Notify the breadcrumb component See includeInBreadcrumb component option
Facet accuracy determined by the number of scanned results Sets the injectionDepth component option to a preset value
Prepend facet search queries with a wildcard See useLeadingWildcardInFacetSearch component option
Facet value ranges Specifies whether to use automatically generated numeric ranges or custom numeric ranges created in Sitecore.
DOM unique Id Randomly generated HTML element id.
Additional data attributes Allows use of the Coveo JavaScript Search Framework DynamicFacetRange component options that aren't directly available in the data source.

Sample Generated HTML and Corresponding Visual Output

<div id="coveoe31acce0" class="CoveoDynamicFacetRange" data-title="Lake Depth" 
data-injection-depth="1000" data-prebind-field="fieldTranslator" data-field="@lakedepth" 
data-ranges="[
{"start":"0","end":"40","endInclusive":true,"label":"0 - 40 ft"},
{"start":"40","end":"80","endInclusive":true,"label":"40 - 80 ft"},
{"start":"80","end":"1000","endInclusive":true,"label":"80+ ft"}]" 
data-value-format="numeric" data-applied-prebind="true">

Dynamic Numeric Facet Range Example

What's Next for Me?