website logo
Product FeedCommunity Forum
API Docs
Template JS
Headless SDK
Navigate through spaces
API Docs
Template JS
Headless SDK
⌘K
Introduction
Getting Started
Quickstart : Smart Search
Quickstart : Smart Category Merchandising
Quickstart : Smart Recommendations
Apps/Plug-ins
Guide
Structure
Configuration
JS Library
Versioning
Template Reference
Build UI
Custom Overrides
Recommendations Webhooks
Styling CSS
Analytics/Tracking
How To
Add Filters To URL
Add Pagination To URL
Add-To-Cart Function
Customer Groups
Infinite Scroll Results
Magento B2B MSI
Ratings / Reviews
SortBy Options
Docs powered by archbee 
4min

SortBy Options



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 script block can be modified by Template override

JavaScript
|
<script type="text/javascript">

// Defer initialization (powerUp) of the Klevu components
    klevu({
        powerUp: {
            landing: false
        }
    });

// OVERRIDE :  LANDING PAGE
    klevu.coreEvent.build({
        name: "myLandingPageOverride",
        fire: function () {
            if (klevu.getGlobalSetting("flags.setRemoteConfigLanding.build", false)) {
                return true;
            }
            return false;
        },
        maxCount: 150,
        delay: 100
    });
    
    klevu.coreEvent.attach("myLandingPageOverride", {
        name: "attachToMyLandingPageOverride",
        fire: function () {

            // override temaplate     
            klevu.search.landing.getScope().template.setTemplate(
                klevu.dom.helpers.getHTML("myCustom_klevuLandingTemplateSortBy"),
                "sortBy",
                true
            );

            // override translations
            klevu.search.landing.getScope().template.setHelper("myCustomSortBy", function(e) {
                var t = klevu.getSetting(klevu.settings, "settings.storage")
                , a = "";
                switch (t.sort.getElement(e) == e ? "RELEVANCE" : t.sort.getElement(e)) {
                case "RELEVANCE":
                    a = "Best Match";
                    break;
                case "PRICE_ASC":
                    a = "Price: Low to high";
                    break;
                case "PRICE_DESC":
                    a = "Price: High to low";
                    break;
                case "NAME_ASC":
                    a = "Name: A to Z";
                    break;
                case "NAME_DESC":
                    a = "Name: Z to A";
                    break;
                case "NEW_ARRIVAL_ASC":
                    a = "Newest to Oldest";
                    break;
                case "NEW_ARRIVAL_DESC":
                    a = "Oldest to Newest";
                    break;
                default:
                    a = "Best Match"
                }
                return a
            });

            // power up
            klevu({
                powerUp: {
                    landing: true
                }
            });
        }
    });

</script>

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





Updated 16 Mar 2023
Did this page help you?
Yes
No
Docs powered by archbee 
TABLE OF CONTENTS
Indexing
API Reference
Template JS Override