How to Add SortOptions in Your Frontend Configuration | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• How to set up SortOptions in the frontend to appear in your vertical search
• Where SortOptions can be adjusted

Steps to Add SortOptions to Your Search Frontend

As mentioned in Units 1 and 2, the default sort for a vertical is specified in the backend. It can also be added as a refinement to the frontend experience via the SortOptions component. The frontend sorting layers the additional sorting option on top of the default sorting specified in the backend configuration.

In order to add SortOptions to your Search Frontend, there are two main steps to add the components from the SDK:

• Adding the components to the HBS file
• Adding any additional configuration in the JSON file for the specific vertical

For SortOptions, you will also need to indicate the field that is “sortable” under Searchable Fields in the backend configuration

1. Make sure to add (or comment in) the following lines for the sortOptions component script and markup: Scripts - just Sorting

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

   Markup - just Sorting

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

   Scripts - Collapsible Filters (some will be commented in already by default)

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

   Markup - Collapsible Filters (some will be commented in already by default)

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

   You will also need to add in the following class and closing div:

    <div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive">
    </div>

2. Next, you will add the SortOptions object in ComponentSettings in the JSON file in the relevant vertical you want the sortOptions to appear. Note that this component is only available on vertical pages (e.g., vertical-standard and vertical-map) and not in Universal Search.

Under ComponentSettings, you will want to note the options for sorting to appear on the page, such as Distance or a Field. If this is commented out in your file, make sure to remove both the opening (/**) and closing (**/). Here’s an example of what it would look like to specify these:

"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"
}

You will also notice the optional field above of “searchOnChange” as set to false. This is a common field to set, which allows a user to press the “Apply” button below to trigger it re-search with a new sort option:

For the full and most up-to-date list of SortOption configuration options, you can reference the Sort Options section of the library documentation.