default sort option on Item List pages be set on a per category basis.
A modification will be made to the configuration record to allow N&P to set a default sort option for
each category, these modifications will then be updated to allow the website to default the sorting
option per category, an example of this is displayed below:
• Bordeux – High to Low
• Burgundy – Sort by Relevance
Our Solution
- We can possibly develop the default sorting option based on the category basis. We need to create a module for developing category-based sorting. We have to create a subtab in the configuration record for updating the default sort option for the category. We are adding the screenshot below.
- Based on the record of configuration, we will check the category page with the category name; if the category name matches, we will select the sort option and display the products. When it works only fresh opened category pages.
- We can also add a quantity-based sort option to display the item quantity descending. As a result, the out-of-stock item will be displayed lower and the higher-quantity item will be displayed higher on the product list page.
The code is added below
PLPSort.json (configuration record)
{
"type": "object",
"subtab": {
"id": "plpSorting",
"title": "PLP Sorting",
"description": "PLP Sorting",
"group": "searchConfig"
},
"properties": {
"PLPsortOptions": {
"group": "searchConfig",
"subtab": "plpSorting",
"type": "array",
"title": "All PLP defualt",
"docRef": "bridgehead_4667040114",
"description": "How the user can sort the search results, available sorting options for the Sort By dropdown",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string",
"title": "id",
"description": "id has the format $field:$asc, examples : 'relevance:asc', 'onlinecustomerprice:asc', 'onlinecustomerprice:desc'. These ids must be configured in Setup Website > Search > Sort fields",
"mandatory": true
},
"category": {
"type": "string",
"title": "category",
"description": "Label to use in the UI to reference this cart option.",
"translate": true,
"mandatory": true
},
"name": {
"type": "string",
"title": "Name",
"description": "Label to use in the UI to reference this sort option.",
"translate": true,
"mandatory": true
}
}
},
"default": [
{
"id": "relevance:asc",
"category": "Bordeaux",
"name": "Sort by relevance"
}
]
}
}
}
JJ_SortingPLP.js(javascript file)
/*
© 2017 NetSuite Inc.
User may not copy, modify, distribute, or re-bundle or otherwise make available this code;
provided, however, if you are an authorized user with a NetSuite account or log-in, you
may use this code subject to the terms that govern your access and use.
*/
// Address.js
// -----------------
// Defines the Address module (Model, Collection, Views, Router)
define('JJ_SortingPLP'
, [
'Utils'
, 'underscore'
, 'Facets.ItemListSortSelector.View'
, 'Profile.Model'
]
, function StripeCustom(
Utils
, _
, FacetsItemListSortSelectorView
, ProfileModel
) {
'use strict';
_.extend(FacetsItemListSortSelectorView.prototype, {
getContext: _.wrap(FacetsItemListSortSelectorView.prototype, function getContext(fcn) {
var option_items = this.options.options
, translator = this.options.translator
, processed_option_items = [];
//if price display is disabled, left aside the filters about price
if (ProfileModel.getInstance().hidePrices()) {
option_items = _.filter(option_items, function (item) {
return item.id.search('price') === -1;
});
}
//translator.configuration.defaultDisplay = 'onlinecustomerprice:desc'
//translator.configuration.defaultOrder = 'onlinecustomerprice:desc'
// translator.options.order = 'onlinecustomerprice:desc'
var url = Backbone.history.fragment;
console.log(url.indexOf("default") < 0)
var category = this.parentView && this.parentView.model.attributes.category && this.parentView.model.attributes.category.attributes.name;
if (category != undefined && category != '' && url.indexOf("default") < 0) {
var PLPsortoption = SC.CONFIGURATION.PLPsortOptions;
var sortoption = _.findWhere(PLPsortoption, { category: category });
if (sortoption && sortoption.id) {
var sortid = sortoption.id.replace(/ /g, "");
var url = this.options && this.options.translator && this.options.translator.categoryUrl + '?order=' + sortid
Backbone.history.navigate(url, { trigger: true });
}
}
_.each(option_items, function (option_item) {
var processed_option_item = {
configOptionUrl: translator.cloneForOptions({ order: option_item.id + '&default=true', page: 1 }).getUrl()
, isSelected: translator.getOptionValue('order') === option_item.id ? 'selected' : ''
, name: option_item.name
, className: option_item.id.replace(':', '-')
};
processed_option_items.push(processed_option_item);
});
console.log(processed_option_items);
// @class Facets.ItemListSortSelector.View.Context
return {
// @property {Array<Object>} options
options: processed_option_items
};
})
})
});