Facet Options Order (October '21 Release)

Product/Library Releases & New Features Winter '21 Release
1

Previously, the ordering of facet options was controlled by the number of options per facet. However, ordering by count does not always make sense. You may want to:

  • Show options in order, such as showing days of the week as Monday through Friday
  • Pin a facet to the top of the list, like a special product or promo
  • Show options alphabetically

We are adding the ability to show facet options in alphabetical order (or reverse alphabetical order) and in a defined custom order. To set the facet option order, navigate to the vertical config.json file and find the Facets object in ComponentSettings. In the fields configuration, you will set either optionsOrder or optionsOrderList:

optionsOrder: Use this to sort the facet options alphabetically. Specify either “ASC” or “DESC”.

  • Note: Facets on numbers will be stored as strings. You’ll need a custom sorting function to handle numbers correctly. Reach out or comment below if you’re implementing this - we’d love to hear more about your use case!
"ComponentSettings": {
    "Facets": {
        "expand": false,
        "fields": {
            "insurancesAccepted": {
                "placeholderText": "Search",
                "optionsOrder": "ASC",        
        }
    }
}

optionsOrderList: Use this to set a custom order. Provide the full list of display names in an array. Note this list is case sensitive.

  • Any options not provided will be displayed at the end of the list, ordered by result count.
  • In the case that an option is included in the array, but has zero results, the option will not display in the frontend.
"ComponentSettings": {
    "Facets": {
        "expand": false,
        "fields": {
            "c_daysOfTheWeek": {
                "placeholderText": "Search",
                "optionsOrderList": ["Monday", "Tuesday", "Wednesday", "Thursday","Friday", "Saturday", "Sunday"], 
        }
    }
}

Note: Only one of optionsOrder and optionsOrderList should be defined. If both are defined, optionsOrderList will take precedence and you will see a build warning in your console.