As you learned in the Sorting (Backend) unit, sorting controls the order in which results appear within a vertical. The default sort order is set in the backend configuration. On the frontend, you can also expose sorting options that users can interact with to re-order results themselves.

Note: Sorting should be paired with collapsible filters so it doesn't appear by default on smaller screens. See the Facets and Filters doc. Since sorting and facets share the same container, adding collapsible filters affects both.

Note: For FIELD sort options, mark the field as sortable under Searchable Fields in the backend configuration first.

Sort Option Types

See the Sort Options reference doc for full details.

Add Sort Options to the Frontend

1. Add to the Handlebars File

Comment in the following lines. Replace vertical-standard with your page's template name:

Scripts:

{{> templates/vertical-standard/script/sortoptions}}

Markup:

{{> templates/vertical-standard/markup/sortoptions}}

Collapsible Filters Scripts:

{{> templates/vertical-standard/collapsible-filters/page-setup }}

Collapsible Filters Markup:

{{> templates/vertical-standard/collapsible-filters/markup/filterlink }}
{{> templates/vertical-standard/collapsible-filters/markup/viewresultsbutton }}

Also uncomment the filters wrapper div:

<div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive">
  <!-- templates for filters, facets, and sorting, comment in the one(s) you're using -->
</div>

2. Add to the JSON File

Add the SortOptions object to componentSettings in the relevant vertical JSON file. The default page templates do not include SortOptions — you'll need to add it.

For each sort option, specify:

• type — one of the four sort types
• label — display name for the option
• field — (FIELD type only) the entity field to sort on
• direction — (FIELD type only) ASC or DESC

"SortOptions": {
  "options": [
    {
      "type": "FIELD",
      "field": "c_acceptingNewPatients",
      "direction": "ASC",
      "label": "Accepting New Patients"
    },
    {
      "type": "FIELD",
      "field": "lastName",
      "direction": "ASC",
      "label": "A-Z by Last Name"
    },
    {
      "type": "ENTITY_DISTANCE",
      "label": "Distance"
    }
  ],
  "searchOnChange": false,
  "label": "SORTING"
}

Setting searchOnChange to false means a new search triggers only when the user clicks Apply:

If set to true, a new search triggers each time the user selects a sorting option.

See the Sort Options reference doc for all configuration options.