website logo
Product FeedCommunity Forum
API Docs
Template JS
Headless SDK
Navigate through spaces
⌘K
Introduction
Getting Started
Quickstart : Smart Search
Quickstart : Smart Category Merchandising
Quickstart : Smart Recommendations
Quickstart : Moi
Apps/Plug-ins
Guide
Structure
Configuration
JS Library
Versioning
Template Reference
Build UI
Custom Templates
Modify Request
Modify Response
Modify Recommendations
Styling CSS
Analytics/Tracking
How To
Add Filters To URL
Add Pagination To URL
Add-To-Cart Function
Customer Groups
Facet Option Order
Facet Show/Hide
Infinite Scroll Results
Items Per Page
Magento B2B MSI
Multi-Currency
Ratings / Reviews
Recs Fallback Query
SortBy Options
Voice Search
Docs powered by
Archbee
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
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"
);


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

"Category" options sorted alphabetically
"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;
			});

		});
		  
      }
  });
});

Predefined Option Order
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;

      }
  });
});

Example 2
Example 2




Updated 21 Jul 2023
Did this page help you?
PREVIOUS
Customer Groups
NEXT
Facet Show/Hide
Docs powered by
Archbee
TABLE OF CONTENTS
Ordering Options for a Specific Facet
Predefined Option Ordering
Example 1
Example 2
Docs powered by
Archbee