Default Sort on a Per Category Basis in SCA

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

			})
		})



	});

Leave a comment

Your email address will not be published. Required fields are marked *