Add a Child View to a Composite View
Adding a child view to a parent view is a common way of extending the functionality of SuiteCommerce Advanced (SCA). For example, you can easily add a message to a page by adding a GlobalViews.Message.View
view as a child view. Adding a child view requires making two types of changes to the SCA source code:
-
Extend the
childViews
object of a view. Because this requires a change to a JavaScript or TypeScript source file, you should create a custom module that uses prototyping to add the child view.The module source files for SCA 2019.1 and earlier are JavaScript files with .js filename extensions. The module source files for SCA 2019.2 and later are TypeScript files with .ts filename extensions. For more information about TypeScript, see TypeScript.
-
Override the template file. In addition to adding the view to the
childViews
object, you must also edit the HTML template to implement the child view in a page.
Because a template file can only be overridden one time, you may want to define the override in a different custom module created specifically for template overrides when making your own customizations. See Override a Template File for more information.
To extend the childViews object of a view:
-
Create the directory structure for your custom module.
-
Create a directory called
extensions
.-
If implementing 2019.2 and later, create this directory in the
Advanced
directory. Examples:SC_20.1/Advanced/extensions
,SC_19.2_Live/Advanced/extensions
. -
If implementing 2019.1 and earlier, create this directory in the
Modules
directory. For example:Modules/extensions
-
-
In the
extensions
directory, create a subdirectory calledHeaderExtension@1.0.0
. -
In the
HeaderExtension
directory, create a subdirectory calledJavaScript
. -
Also in the
HeaderExtension
directory, create another subdirectory calledTemplates
.
When creating customizations, you should create a directory structure as described in Organize Source Code for Custom Modules.
-
-
Create a new file.
-
If implementing 2019.2 or later, name this file HeaderExtension.ts.
-
If implementing 2019.1 or earlier, name this file HeaderExtension.js.
-
-
Define your custom module and dependencies by adding the following code to this file.
This code defines the dependencies required by your custom module. If implementing SuiteCommerce 2019.1 or earlier, see Asynchronous Module Definitions (AMD) and RequireJS for information about defining dependencies within a module. This module includes the following views as dependencies:
-
Header.View – is required to extend the
childViews
object. -
GlobalViews.Message.View – is required to add a message view to the application header.
JavaScript example:
define('HeaderExtension' , [ 'underscore' , 'Header.View' , 'GlobalViews.Message.View' ] , function ( _ , HeaderView , GlobalViewsMessageView ) { 'use strict'; //Additional code goes here. });
TypeScript example:
///<amd-module name="HeaderExtension"/> /// <reference path="../../../Commons/Utilities/JavaScript/GlobalDeclarations.d.ts" /> import * as _ from 'underscore'; import HeaderView = require('../../Header/JavaScript/Header.View'); import GlobalViewsMessagesView = require ('../../GlobalViews.Messages.View'); //Additional code goes here.;
-
-
Add the
mountToApp
method to the Header.Extension.js file (or the Header.Extension.ts file) as shown in the following sample:return { mountToApp: function (application) { HeaderView.prototype.childViews.HeaderExtension = function() { return new GlobalViewsMessageView({ message: 'Hello World! - This is an Example of a GlobalMessageView!' , type: 'success' , closable: true }); } } }
This code performs the following:
-
Specifies a
return
statement that returns themountToApp
method. This method is required to load a module into the application. -
Extends the
childViews
object of the Header.View module using JavaScript prototyping.
-
-
Copy the original template file to your custom module.
-
Copy the header.tpl file to the Templates directory of your custom module.
-
If implementing 2019.2 and later, copy the header.tpl file from the Advanced/Header/Templates directory.
-
If implementing 2019.1 and earlier, copy the header.tpl file from the Modules/suitecommerce/Header/Templates directory.
-
-
Edit the custom template file by adding the following HTML code:
<div data-view="HeaderExtension"</div>
Add the HTML code at a place in the template where it will be displayed in the Header view. For example, you can add it directly above the
<div class="header-menu-cart">
.
-
-
Create the ns.package.json file
-
Create a file called ns.package.json in the
HeaderExtension
directory. -
Add the following code to the ns.package.json file.
-
If implementing 2019.2 and later:
{ "gulp": { "javascript": [ "JavaScript/*" ] , "templates": [ "Templates/*" ] }, "overrides": { "../Header/Templates/header.tpl": "Templates/header.tpl" } }
-
If implementing 2019.1 and earlier:
{ "gulp": { "javascript": [ "JavaScript/*" ] , "templates": [ "Templates/*" ] }, "overrides": { "suitecommerce/Header@1.1.0/Templates/header.tpl": "Templates/header.tpl" } }
-
-
-
Add an entry for your module to the distro.json file.
-
If implementing 2019.2 and later, the distro.json file is located in the Advanced directory of the SCA source code. Examples: SC_20.1/Advanced/distro.json, SC_19.2_Live/Advanced/distro.json
-
If implementing 2019.1 and earlier, the distro.json file is located in the root directory of the SCA source code.
You must add your custom view to the
javascript
object within the distro.json file. Your code should look similar to:"javascript": [ { "entryPoint": "SC.Shopping.Starter", "exportFile": "shopping.js", "dependencies": [ "Header.Extension.View", "Backbone.View.Plugins", "jQuery.html", "ItemDetails", ...
In this example, you are only customizing a single file, so only add the
Header.Extension
module to thejavascript
object. In cases where you are customizing or overriding an entire application module, you may need to add the application module name here. -
-
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 site 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
- Extend Frontend Configuration Files
- Configure Facet Fields
- Extend the Backend Configuration File
- 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