--- title: Facet Option Order slug: template-js/facet-option-order docTags: createdAt: 2023-07-21T16:14:20.651Z --- By default, Klevu will return the facet options in a sort order based on the number of records each option has in the result ("Frequency"). An alternative is to list the options in "Alphabetical" order. ::Image[]{src="https://api.archbee.com/api/optimize/816_4eGYZQxALlijMlcBN/oXFEe5lg_braILnyVnYPW_screen-shot-2023-07-21-at-124605-pm.png" size="88" width="873" height="518" position="center" caption="Frequency vs Alphabetical Option Ordering" showCaption="true"} Klevu's search API query can be modified to allow for alphabeticaly listing the facet options using "INDEX" as the `options.order` value. **Modifying the request in this way will apply to all facets.** ```javascript klevu.modifyRequest("landing,catnav", function(data, scope){ klevu.each(data.request.current.recordQueries, function(key, query){ klevu.setObjectPath(query, "filters.filtersToReturn.options.order", "INDEX"); }); }); ``` | ** Parameter Value** | **Description** | | ------------------------- | ------------------------------------------------------------------------------- | | FREQ | Sort the options based on the number of corresponding records in the result set | | INDEX | Sort the options alphabetically | See : Modify Request [Overview](docId:_ndrEPmgAUhYltIlXkG-o) for more details. ## Ordering Options for a Specific Facet There may be instances where a specific facet can benefit from Alphabetical sorting apart from the frequency default. The below example will modify a specific facet and sort the `filter.options` in Alphabetical order for the `filter.key` "category" ```javascript klevu.modifyResponse("landing,catnav", function(data, scope){ /* loop through filters in the response */ klevu.each(data.template.query.productList.filters, function(indx, filter) { if (filter.key === 'category') { /* JS sort object by 'name' value */ filter.options.sort(function (a, b) { if (a.name < b.name) return -1; if (a.name > b.name) return 1; return 0; }); } }); }); ``` ::Image[]{src="https://api.archbee.com/api/optimize/816_4eGYZQxALlijMlcBN/RvrrLElwWikm7Rp1AlTXi_screen-shot-2023-07-21-at-24921-pm.png" size="34" width="283" height="518" position="center" caption=""Category" options sorted alphabetically" showCaption="true"} ## Predefined Option Ordering There may be instances when neither Frequency ("FREQ") or Alphabetical ("INDEX") sorting is sufficient. A common use-case is a facet for **Size**. A predetermined option sorting for **Size** can be set for an order in which retail shoppers are accustomed. ### Example 1 This example sets the `filter.options` to a predetermined order for the `filter.key` "size". :::hint{type="warning"} **Important :** All available facet options should be included to accommodate variances within the results. Also, consider case sensitivity as it applies. ::: ```javascript klevu.modifyResponse("landing,catnav", function(data, scope){ /* loop through filters in the response */ klevu.each(data.template.query.productList.filters, function(indx, filter) { if (filter.key === 'size') { /* set desired order for 'size' facet options */ const optionOrder = ["X Small","Small","Medium","Large","X Large"]; optionOrder.reverse().forEach(function(elm) { /* JS sort object by 'name' matching the optionOrder value */ filter.options.sort(function (a, b) { if (a.name === elm) return -1; if (a.name !== elm && b.name !== elm) return 0; return 1; }); }); } }); }); ``` ::Image[]{src="https://api.archbee.com/api/optimize/816_4eGYZQxALlijMlcBN/t87RdJmQbaJFu46M2dzCm_screen-shot-2023-07-21-at-15810-pm.png" size="50" width="347" height="171" position="center" caption="Predefined Option Order" showCaption="true"} ### Example 2 This example sets the facet options to a predetermined order for the `filter.key` "size", but also considers any range of numerical sizes as well. The following snippet: - Separates the the alphabetic from the numeric filter option values (based on `name`) - Sets the `alphabetic` object to the defined sort order (`optionsOrder`). - Sorts the `numeric` object to numerical order - Concatenates the two objects prior to setting to the `filter.options` :::hint{type="warning"} **Important :** All available facet options should be included to accommodate variances within the results. Also, consider case sensitivity as it applies. ::: ```javascript klevu.modifyResponse("landing,catnav", function(data, scope){ /* loop through filters in the response */ klevu.each(data.template.query.productList.filters, function(indx, filter) { if (filter.key === 'size') { /* set desired order for 'size' facet options */ const optionOrder = ["X Small","Small","Medium","Large","X Large"]; /* get the filter options that are NOT numeric */ const alphabetic = filter.options.filter(value => { return isNaN(value.name) }); /* sort object by 'name' value matching desired sortOrder */ optionOrder.reverse().forEach(function(elm) { alphabetic.sort(function (a, b) { if (a.name === elm) return -1; if (a.name !== elm && b.name !== elm) return 0; return 1; }); }); /* get the filter options that ARE numeric */ const numeric = filter.options.filter(value => { return !isNaN(value.name) }); /* sort object by 'name' value ascending */ numeric.sort(function (a, b) { var numberOptionA = +a.name ? +a.name : 1000; var numberOptionB = +b.name ? +b.name : 1000; return numberOptionA - numberOptionB }); /* concatenate the two sorted objects */ const orderedOptions = numeric.concat(alphabetic); filter.options = orderedOptions; } }); }); ``` ::Image[]{src="https://api.archbee.com/api/optimize/816_4eGYZQxALlijMlcBN/bhLKKYpar5vTDZZezTXAd_screen-shot-2023-07-21-at-23503-pm.png" size="42" width="346" height="412" position="center" caption="Example 2" showCaption="true"}