Coveo Query Suggest Preview

Coveo for Sitecore (April 15, 2020)

Implements the Coveo JavaScript Search Framework QuerySuggestPreview component which renders previews of the top query results matching the currently focused Coveo Machine Learning-powered Query Suggestion (QS).

Usage Notes

  • To use the Coveo Query Suggest Preview rendering, you first need to enable Query Suggestions in your search interface, which involves creating a machine learning model and feeding it analytics data (see Enabling Query Suggestions).

  • In the Coveo Query Suggest Preview rendering data source, you must select a result template that has been inserted in the current search page.

Insertion Location

The Coveo Query Suggest Preview rendering is an Allowed Control in the following placeholder(s): Searchbox Components

Example insertion sequence for the Coveo Query Suggest Preview rendering.

When you add the Coveo Searchbox SXA rendering, this adds a coveouisearchboxcomponentssxa placeholder. Insert your Coveo Query Suggest Preview rendering in this coveouisearchboxcomponentssxa placeholder.

Example insertion sequence for the Coveo Query Suggest Preview rendering.

Data Source Options

Option name Description
Execute query delay See executeQueryDelay component option
Number of preview results See numberOfPreviewResults component option
Result template Allows selecting a result template, present in the current page, from a list of Coveo File Result Template and Coveo Item Result Template data source item names (see resultTemplate component option)
DOM unique Id Randomly generated HTML element id.
Additional data attributes Allows use of the Coveo JavaScript Search Framework QuerySuggestPreview component options that aren't directly available in the data source.

Sample Generated HTML and Corresponding Visual Output

<div id="coveo405cec6f" class="CoveoQuerySuggestPreview" data-execute-query-delay="10" 
data-number-of-preview-results="4" data-prebind-result-template-selector="itemIdSelector" 
data-result-template-selector="#coveo7251E2B7" data-applied-prebind="true">
</div>

Query Suggest Preview Animation

Recommended Articles