Extend Frontend Configuration Files

This example applies to pre-Vinson implementations of SuiteCommerce Advanced (SCA) only. For details about configuring SCA for Vinson or later releases, see Modify JSON Configuration Files.

Important:

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

SCA enables you to configure the behavior of the frontend application by modifying configuration properties and objects. These properties are:

• Stored in configuration files that define the objects that are loaded when the application starts.

• 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:

   javascriptCopy

   1"text-purple-400">define('Configurator'
   2,   [
   3        'SC.Configuration'
   4    ]
   5,   "text-purple-400">function (
   6        Configuration
   7    )
   8{
   9    'use strict';
   10    "text-purple-400">return  {
   11        mountToApp: "text-purple-400">function ()
   12        {
   13                     //Add your custom properties here.
   14        }
   15    };
   16});

   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:

   javascriptCopy

   1Configuration.imageNotAvailable = 'http://www.tnstate.edu/sociology/images/Image%20Not%20Available.jpg';
   2 
   3Configuration.addToCartBehavior = 'goToCart';
   4 
   5Configuration.facetDelimiters.betweenFacetNameAndValue = '%';
   6 
   7Configuration.productReviews.loginRequired = true;
   8 
   9Configuration.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:

   jsonCopy

   1{
   2   "gulp": {
   3      "javascript": [
   4         "JavaScript/*.js"
   5      ]
   6   }
   7}

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 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 Test SCA Customizations on a Local Server for more information.

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

Related Topics

• Example SCA Customizations
• Create a Custom Module
• Modify JSON Configuration Files
• Configure Facet Fields
• Extend the Backend Configuration File
• Add a Child View to a Composite View
• Override a Template File
• Extend a Sass File
• Add a Sticky Button
• Customizing the Loading Icon
• Adding a Custom Web Font
• Extending Font Awesome
• Displaying Device-Specific Carousel Images

[General Notices