List Result Sort Options in a Dropdown

Coveo for Sitecore (September 18, 2020)

The Add Related Controls article describes how you can add search result sort controls to your search interface. When you follow these instructions, one sort button by rendering is added and, when both sort directions are enabled in the rendering data source, clicking successively on the button in the search interface toggles the sort direction.

However, enabling the Results Sorts Section Enable sort dropdown data source option replaces side-by-side sort option buttons with a single drop-down list that contains all result sorting options you want to make available.

This article describes how to manage date sort and field sort options, and their captions, in a sort drop-down list presentation.

Default Caption for Date and Field Sort Options

When the Enable both sort directions option is enabled on date sort or field sort options, Descending and Ascending will be appended to the Caption option value. For example, when the Date Sort data source caption is Date, the dropdown will have Date Descending and Date Ascending options.

Dictionary items have been created for Descending and Ascending and are available at the following location: /sitecore/system/Dictionary/Coveo Hive/Search Sections/. You can version them as needed to support multiple languages.

Custom Caption for Date and Field Sort Options

When the predefined caption format does not meet your requirements, it is possible to create custom captions. For example, to create a date based sort displaying Newest and Oldest, using the following procedure:

1. In the Sitecore Experience Editor,

2. Configure the Oldest Coveo Date Sort

   1. In the Sitecore Experience Editor, select the existing Coveo Date Sort rendering.

   2. In the floating toolbar, select the Edit the rendering’s data source option. It should be the leftmost option in the toolbar.

   3. Uncheck the Enable both sort directions option. This option is responsible for appending Descending or Ascending after the defined Caption option.

   4. Set the Sort direction to Ascending.

   5. Set the Caption to Oldest.

3. Configure the Newest Coveo Date Sort

   1. Select the Sorts placeholder above your existing Coveo Date Sort rendering.

   2. Select Add here and select Coveo Date Sort in the Select a Rendering window.

   3. In the Select the Associated Content window, select Create New Content and choose the parent you prefer.

   4. Save the page.

   5. In the floating toolbar of the Coveo Date Sort you just created, select Edit the rendering’s data source.

   6. Uncheck the Enable both sort directions option.

   7. Set the Sort direction to Descending.

   8. Set the Caption to Newest.

4. Select the Results Sort Section rendering.

5. In the floating toolbar, select the Edit the rendering’s data source option.

6. Check the Enable sort dropdown option.

7. You’re now ready to test your new sorts.