Quantity Facet Displays Dollar Sign
In some implementations of the Elbrus, Kilimanjaro, and Vinson releases of SuiteCommerce Advanced, adjusting the filter for a quantity facet on your site displays a numerical value that includes a dollar sign.
Using Extend mode, the following patch corrects this issue in Facets.FacetsDisplay.View.js, which is part of the Facets module. To implement this patch, create a custom module to extend the prototype
object for the getContext()
method within Facets.FacetsDisplay.View.js.
If you are not familiar with implementing patches for SuiteCommerce Advanced, refer to the following:
-
Before you get started, familiarize yourself with Best Practices for Customizing SCA.
-
For step by step instructions, refer to Patch Using Extend Mode.
Step 1: Develop An Extension
Use the following code sample to extend the prototype of the getContext()
method within Facets.FacetsDisplay.View.js.
Following the instructions and recommendations in the Patch Using Extend Mode procedure, copy and paste the following code sample in the new directory and file you create: Modules/extensions/FacetsDisplayViewExtension@1.0.0/JavaScript/Facets.FacetsDisplay.View.Extend.js
define(
'Facets.FacetsDisplay.View.Extend'
, [
'Facets.FacetsDisplay.View'
, 'Backbone.CollectionView'
, 'Backbone'
, 'underscore'
]
, function(
FacetsFacetsDisplayViewExtend
, BackboneCollectionView
, Backbone
, _
)
{
'use strict';
_.extend(FacetsFacetsDisplayView.prototype,
{
getContext: function()
{
var facets = this.options.facets
, translator = this.options.translator;
_.each(facets, function(facet) {
facet.value = _.isArray(facet.value) ? facet.value : [facet.value];
});
var facet_values = [];
_.each(facets, function(facet)
{
var parser = facet.config.parser;
_.each(facet.value, function(value)
{
var from = _.isObject(value) ? value.from : '';
var to = _.isObject(value) ? value.to : '';
var value_data = {
facetValueIsObject: _.isObject(value)
, from: from && parser ? parser(from) : from
, to: to && parser ? parser(to) : to
, valueLabel: translator.getLabelForValue(facet.id, value)
, facetValueUrl: translator.cloneForFacetId(facet.id, value).getUrl()
, facetValue: facet.value
};
facet_values.push(value_data);
});
});
// @class Facets.FacetsDisplay.View.Context
return {
// @property {Boolean} hasFacets
hasFacets: facets.length > 0
// @property {String} clearAllFacetsLink
, clearAllFacetsLink: translator.cloneWithoutFacets().getUrl()
// @property {Array} values
, values: facet_values
};
// @class Facets.FacetsDisplay.View
}
});
});
Step 2: Prepare the Developer Tools For Your Patch
When preparing the Developer Tools for your patch as described in the Patch Using Extend Mode procedure, you should:
-
Paste the following sample code into the new ns.package.json file that you create in the Modules directory:
Modules/extensions/FacetsDisplayViewExtension@1.0.0/ns.package.json
.{ "gulp": { "javascript": [ "JavaScript/*.js" ] } }
-
Open the distro.json file in the root SuiteCommerce Advanced development directory and then add your extension to the
modules
object as described in the Patch Using Extend Mode procedure. The following sample shows the value to add to the list of existing values that follow the“modules”
key."modules": { "extensions/FacetsDisplayViewExtension": "1.0.0", . . .
-
Add
Facets.FacetsDisplay.View.Extend
as a dependency to the entry point within theSC.Shopping.Starter
array.Your distro.js file should look similar to:
"tasksConfig": { //... "javascript": [ //... { "entryPoint": "SC.Shopping.Starter", "exportFile": "shopping.js", "dependencies": [ //... "ProductDetailToQuote", "StoreLocator", "Facets.FacetsDisplay.View.Extend" ], //...
Step 3: Test and Deploy Your Patch
Follow the instructions provided in the Patch Using Extend Mode procedure to test and deploy your patch.