Extend Frontend Configuration Files

This topic applies to

Applies to

SuiteCommerce Advanced


This section applies to pre-Vinson implementations for SuiteCommerce Advanced (SCA) only. For details on configuring SCA for Vinson release or later, see Modify JSON Configuration Files.


Making changes to core source files or changing any vital functionality of the application can make migrating to future releases difficult. Before making changes to SCA, see Best Practices for Customizing SuiteCommerce Advanced.

SCA enables you to configure the behavior of the frontend application by modifying configuration properties and objects. These are properties are contained in configuration files that define objects that are loaded when the application starts. These properties are accessible to all modules within the application.

See Configure Properties for more information about these files and the properties they contain.

To redefine these properties for your installation you must create a custom module that includes the original configuration file as a dependency.

To extend a frontend configuration file:

  1. Create the directory structure for your custom module.

    In this example, the name of the custom module is Configuration, so the module directory would be Configurator@1.0.0.

  2. Create the JavaScript subdirectory in your new module directory.

  3. Create a new JavaScript file in the JavaScript directory of your custom module.

    In this example, the name of the JavaScript file is Configurator.js

  4. Add the mountToApp method to your custom JavaScript file.

    For example, the code you add should look similar to the following:

    define('Configurator' , [ 'SC.Configuration' ] , function ( Configuration ) { 'use strict'; return { mountToApp: function () { //Add your custom properties here. } }; });

    This code performs the following tasks:

    • Lists the dependencies required. When customizing a configuration file, you must include the object it returns as a dependency.

    • Defines the mountToApp method. This method is required to load your custom module into the application. This method also contains the custom properties you are configuring.

  5. Add your custom properties to the block within the mountToApp method as shown in the example above.

    The following example shows how to redefine different configuration properties:

    Configuration.imageNotAvailable = 'http://www.tnstate.edu/sociology/images/Image%20Not%20Available.jpg'; Configuration.addToCartBehavior = 'goToCart'; Configuration.facetDelimiters.betweenFacetNameAndValue = '%'; Configuration.productReviews.loginRequired = true; Configuration.typeahead.maxResults = 4;
  6. Create and edit the ns.package.json in the root directory of your custom module.

    For example, the code you add should look similar to the following:

    { "gulp": { "javascript": [ "JavaScript/*.js" ] } }
  7. Update the distro.json file in the root directory of the SCA source directory. You must update this file in two places:

    • Add the name of your custom module to the list of modules defined in the modules object.

    • Add the name of your custom module to the dependencies array of the application whose configuration file you are customizing. To ensure that your customized configuration properties are available to all modules, place your module at the top of this list.

  8. View your changes.

    If you are running a local server, you can view your changes by reloading your website. See SCA on a Local Server for more information.

    If you are viewing your site in NetSuite, you can deploy your changes using the developer tools. See Deploy to NetSuite for more information.