Coveo Field Sort

By default, the Coveo Field Sort rendering implements the Coveo JavaScript Search Framework Sort component with the sortCriteria component option set to @<SORT_FIELD> <SORT_DIRECTION>. Clicking the Coveo Field Sort search interface button allows the user to switch to result sorting based on the specified Sort field. Subsequent clicks allow the user to toggle between ascending and descending sort directions (if the Enable sort direction toggle option is enabled).

Coveo for Sitecore (September 18, 2020)

When the wrapping Results Sorts Section rendering Enable sort dropdown data source option is enabled, the Coveo Field Sort rendering adds one or two field sort items (depending on the Enable both sort directions value) to a sort drop-down list (see the Coveo JavaScript Search Framework SortDropdown component)).

Usage Notes

Insertion Location

The Coveo Field Sort rendering is an Allowed Control in the following placeholder(s): Sorts

Example insertion sequence for the Coveo Field Sort rendering.

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

Example insertion sequence for the Coveo Field Sort rendering.

Data Source Options

Option name Description
Caption See caption component option
Sort field See sortCriteria component option
Sort direction Specifies the default sorting direction (see sortCriteria component option)

Enable sort direction toggle

Coveo for Sitecore (September 18, 2020) Enable both sort directions

Specifies whether to allow sorting in both sorting directions.
DOM unique Id Randomly generated HTML element id.
Additional data attributes Allows use of the Coveo JavaScript Search Framework Sort component options that aren't directly available in the data source.

Sample Generated HTML and Corresponding Visual Output

<div class="coveo-sort-container">
   <span id="coveo0a107bfe" 
   class="CoveoSort coveo-accessible-button coveo-selected coveo-accessible-button-pressed coveo-ascending" 
   data-caption="Price" data-prebind-sort-criteria="sortCriteriaResolver" 
   data-sort-criteria="@currentprice descending, @currentprice ascending" 
   data-sc-enable-both-sort-directions="true" data-applied-prebind="true" role="button" 
   aria-label="Sort results by Price" tabindex="0">
      "Price"
      <span class="coveo-icon">
         <span class="coveo-sort-icon-ascending">
            <!-- SVG arrow up graphic code here -->
         </span>
         <span class="coveo-sort-icon-descending">
            <!-- SVG arrow down graphic code here -->
         </span>
      </span>
   </span>
</div>

Field Sort example

What's Next for Me?