Coveo Results List

Implements the Coveo JavaScript Search Framework CoveoResultList component which is responsible for displaying query results.

Usage Notes

It’s possible to include two Coveo Results List renderings in a search page, one using the List results layout, and the other using the Card results layout. You can then add a Coveo Result Layout rendering to allow users to toggle between both result layouts.
You can insert multiple result template renderings inside a Coveo Results List rendering. By associating conditions to these result templates, you can display result items differently from one another (see Result Template Conditions).

Insertion Location

The Coveo Results List rendering is an Allowed Control in the following placeholder(s): Results List

Example insertion sequence for the Coveo Results List rendering.

Coveo for Sitecore SXA rendering insertion locations aren’t limited by placeholder Allowed Controls. The Coveo Results List rendering may therefore be inserted throughout the partial design, whether in Coveo for Sitecore or Sitecore placeholders.

Example insertion sequence for the Coveo Results List rendering.

Data Source Options

Option name	Description
Results layout	See layout component option
Enable infinite scroll	See enableInfiniteScroll component option
Infinite scroll page size	See infiniteScrollPageSize component option
Enable scroll to top	See enableScrollToTop component option
Wait animation	See waitAnimation component option
DOM unique Id	Randomly generated HTML element id.
Additional data attributes	Allows use of the Coveo JavaScript Search Framework CoveoResultList component options that aren’t directly available in the data source.

Sample Generated HTML and Corresponding Visual Output

In the following example, two Coveo Results List renderings have been inserted in the search interface, one using the Card results layout, and the other using the List results layout. The website visitor has selected the Card results layout in the search page, which adds the coveo-hidden value to the class attribute of the result list <div> element with the List data layout.

<div id="coveo70d09920" class="CoveoResultList" data-layout="card"
data-wait-animation="fade" data-auto-select-fields-to-include="false">
  <!-- code of the result template(s) inserted in the "Result Templates" placeholder
  of this Coveo Result List rendering appears here -->
</div>
<div id="coveofb205615" class="CoveoResultList coveo-hidden" data-layout="list"
data-wait-animation="fade" data-auto-select-fields-to-include="false">
  <!-- code of the result template(s) inserted in the "Result Templates" placeholder
  of this Coveo Result List rendering appears here -->
</div>

What's Next for Me?