How To

SortBy Options

4min

﻿
The default SortBy functionality can be modified within Template JS by overriding the default Script block. Additional supported options can be added as well as edits to the default labeling.
See : Custom Overrides﻿ for details on preparing for Klevu JS overriding
See : An in-action example and the source code on the Klevu CodeSandbox﻿
Indexing
Supported options for product sorting must be supplied at the product level
price / sale_price
title
rating
id / date* (for newness) 
*Please see this support article for important information about sorting by newness.
﻿
API Reference
Parameter
Description
RELEVANCE
Default combination of Klevu A.I. and merchandising configuration
PRICE_ASC, PRICE_DESC
Sort the results by the salePrice value of each record
NAME_ASC, NAME_DESC
Sort the results by the name of each record, in alphabetical order
RATING_ASC, RATING_DESC
Sort the results by each record's average rating, if this data has been indexed in your store
NEW_ARRIVAL_ASC, NEW_ARRIVAL_DESC
Sort your records based on their published date. 
See :  Klevu API Documentation for available Sorting Options﻿
﻿
Template JS Override
The SortBy options template block can be modified using the Set Template﻿ override.  The Set Custom Helpers﻿ are used to modify the desired display text of the selected option as well.
JavaScript
|
<script type="text/javascript">

klevu({
	theme: {
      setTemplates: [
		 {
		  scope: "landing,catnav", 
		  selector: "#myCustom_klevuLandingTemplateSortBy",
		  name: "sortBy"
		 }
		],
	  setHelpers: {
        "landing,catnav": {
            myCustomSortBy: function(dataLocal) {
              /* sets the selected option to the display */

              var selectedText = "";

              var klevuStorage = klevu.getSetting(klevu.settings, "settings.storage");

              switch (klevuStorage.sort.getElement(dataLocal) == dataLocal ? "RELEVANCE" : klevuStorage.sort.getElement(dataLocal)) {
                case "RELEVANCE":
                    selectedText = "Best Match";
                    break;
                case "PRICE_ASC":
                    selectedText = "Price: Low to high";
                    break;
                case "PRICE_DESC":
                    selectedText = "Price: High to low";
                    break;
                case "NAME_ASC":
                    selectedText = "Name: A to Z";
                    break;
                case "NAME_DESC":
                    selectedText = "Name: Z to A";
                    break;
                case "NEW_ARRIVAL_ASC":
                    selectedText = "Newest to Oldest";
                    break;
                case "NEW_ARRIVAL_DESC":
                    selectedText = "Oldest to Newest";
                    break;
                default:
                    selectedText = "Best Match";
              }
              return selectedText;
          }
        }
      }
	}
});
</script>


<script type="template/klevu" id="myCustom_klevuLandingTemplateSortBy">
  <div class="kuDropdown kuDropSortBy" role="listbox">
    <div class="kuDropdownLabel">
      <%=helper.translate("Sort by : ")%><%=helper.myCustomSortBy(dataLocal)%>
    </div>
    <div class="kuDropdownOptions">
      <div class="kuDropOption kuSort" data-value="RELEVANCE" role="option">Best Match</div>
      <div class="kuDropOption kuSort" data-value="PRICE_ASC" role="option">Price: Low to high</div>
      <div class="kuDropOption kuSort" data-value="PRICE_DESC" role="option">Price: High to low"</div>
      <div class="kuDropOption kuSort" data-value="NAME_ASC" role="option">Name: A to Z</div>
      <div class="kuDropOption kuSort" data-value="NAME_DESC" role="option">Name: Z to A</div>
      <div class="kuDropOption kuSort" data-value="NEW_ARRIVAL_DESC" role="option">Newest to Oldest</div>
      <div class="kuDropOption kuSort" data-value="NEW_ARRIVAL_ASC" role="option">Oldest to Newest</div>
  </div>
 </div>
</script>


<script type="text/javascript">

klevu({
	theme: {
      setTemplates: [
		 {
		  scope: "landing,catnav", 
		  selector: "#myCustom_klevuLandingTemplateSortBy",
		  name: "sortBy"
		 }
		],
	  setHelpers: {
        "landing,catnav": {
            myCustomSortBy: function(dataLocal) {
              /* sets the selected option to the display */

              var selectedText = "";

              var klevuStorage = klevu.getSetting(klevu.settings, "settings.storage");

              switch (klevuStorage.sort.getElement(dataLocal) == dataLocal ? "RELEVANCE" : klevuStorage.sort.getElement(dataLocal)) {
                case "RELEVANCE":
                    selectedText = "Best Match";
                    break;
                case "PRICE_ASC":
                    selectedText = "Price: Low to high";
                    break;
                case "PRICE_DESC":
                    selectedText = "Price: High to low";
                    break;
                case "NAME_ASC":
                    selectedText = "Name: A to Z";
                    break;
                case "NAME_DESC":
                    selectedText = "Name: Z to A";
                    break;
                case "NEW_ARRIVAL_ASC":
                    selectedText = "Newest to Oldest";
                    break;
                case "NEW_ARRIVAL_DESC":
                    selectedText = "Oldest to Newest";
                    break;
                default:
                    selectedText = "Best Match";
              }
              return selectedText;
          }
        }
      }
	}
});
</script>


<script type="template/klevu" id="myCustom_klevuLandingTemplateSortBy">
  <div class="kuDropdown kuDropSortBy" role="listbox">
    <div class="kuDropdownLabel">
      <%=helper.translate("Sort by : ")%><%=helper.myCustomSortBy(dataLocal)%>
    </div>
    <div class="kuDropdownOptions">
      <div class="kuDropOption kuSort" data-value="RELEVANCE" role="option">Best Match</div>
      <div class="kuDropOption kuSort" data-value="PRICE_ASC" role="option">Price: Low to high</div>
      <div class="kuDropOption kuSort" data-value="PRICE_DESC" role="option">Price: High to low"</div>
      <div class="kuDropOption kuSort" data-value="NAME_ASC" role="option">Name: A to Z</div>
      <div class="kuDropOption kuSort" data-value="NAME_DESC" role="option">Name: Z to A</div>
      <div class="kuDropOption kuSort" data-value="NEW_ARRIVAL_DESC" role="option">Newest to Oldest</div>
      <div class="kuDropOption kuSort" data-value="NEW_ARRIVAL_ASC" role="option">Oldest to Newest</div>
  </div>
 </div>
</script>

﻿
﻿

Updated 25 Jul 2023

Did this page help you?

TABLE OF CONTENTS

Indexing

API Reference

Template JS Override

Parameter	Description
RELEVANCE	Default combination of Klevu A.I. and merchandising configuration
PRICE_ASC, PRICE_DESC	Sort the results by the salePrice value of each record
NAME_ASC, NAME_DESC	Sort the results by the name of each record, in alphabetical order
RATING_ASC, RATING_DESC	Sort the results by each record's average rating, if this data has been indexed in your store
NEW_ARRIVAL_ASC, NEW_ARRIVAL_DESC	Sort your records based on their published date.