How To
Facet Option Order

10min
﻿
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.
Frequency vs Alphabetical Option Ordering
﻿
﻿
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.
JS
|
klevu.modifyRequest("landing,catnav",
    "productList.filters.filtersToReturn.options.order", 
    "INDEX"
);
klevu.modifyRequest("landing,catnav",
    "productList.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﻿ 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"
JS
|
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;
		});
		  
      }
  });
});
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;
		});
		  
      }
  });
});
﻿
"Category" options sorted alphabetically
﻿
﻿
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".
Important : All available facet options should be included to accommodate variances within the results.
Also, consider case sensitivity as it applies.
JS
|
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;
			});

		});
		  
      }
  });
});
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;
			});

		});
		  
      }
  });
});
﻿
Predefined Option Order
﻿
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 
Important : All available facet options should be included to accommodate variances within the results.
Also, consider case sensitivity as it applies.
JS
|
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;

      }
  });
});
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;

      }
  });
});
﻿
Example 2
﻿
﻿
Updated 21 Jul 2023
Did this page help you?
TABLE OF CONTENTS
Ordering Options for a Specific Facet
Predefined Option Ordering
Example 1
Example 2
Parameter Value	Description
FREQ	Sort the options based on the number of corresponding records in the result set
INDEX	Sort the options alphabetically