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 the SC.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.

Step 1: Develop An Extension

Step 2: Prepare the Developer Tools For Your Patch

Step 3: Test and Deploy Your Patch

Related Topics