Coveo Distance Sort

Implements the Coveo JavaScript Search Framework Sort component with the sortCriteria component option set to @<DISTANCE_SORT_FIELD> ascending. Clicking the Coveo Distance Sort search interface control allows the user to switch to search result sorting based on distance, with items nearest to the user appearing first.

Usage Notes

  • To use the Coveo Distance Sort rendering, you first need to add the Coveo Distance Resources rendering and a Position Providers rendering to automatically calculate the user-item distance and store it in the Distance sort field.

  • When a user changes the search results sorting option by clicking another Coveo Sort search interface control, this triggers a Search API call with the requested sortCriteria in the query parameters.

Insertion Location

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

Example insertion sequence for the Coveo Distance Sort rendering.

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

Example insertion sequence for the Coveo Distance Sort rendering.

Data Source Options

Option name Description
Caption See caption component option
Distance sort field See sortCriteria component option
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="coveoef34db1e" 
   class="CoveoSort coveo-accessible-button coveo-accessible-button-pressed coveo-selected" 
   data-caption="Store Distance" data-prebind-sort-criteria="sortCriteriaResolver" 
   data-sort-criteria="@delta ascending" data-sc-enable-both-sort-directions="false" 
   data-applied-prebind="true" role="button" aria-label="Sort results by Store Distance" 
   tabindex="0">
      Store Distance
   </span>
   <span class="coveo-distance-disabled-tooltip">
      Disabled. Please configure the distance resources component.
   </span>
</div>

Distance Sort example

Recommended Articles