Create a Custom Module for Your CCT

This topic applies to

Applies to

SuiteCommerce Advanced

 

Your CCT module must include the following files at a minimum:

  • Entry point – this JavaScript file includes the mountToApp() method, which links your custom module to a CMS Content Type record, making it available for inclusion in your website. If you are on SuiteCommerce Advanced 2019.2 or later, this will be a TypeScript (.ts) file.

  • View – this JavaScript file listens for and interprets events and defines the variables for use by the template. These variables are the various fields within your CMS Content Type record. If you are on SuiteCommerce Advanced 2019.2 or later, this will be a TypeScript (.ts) file.

  • HTML template – this file uses Handlebars.js helpers and HTML to render the content to your site.

The following procedures use a fictitious CCT named SC.CCT.ImageViewer as an example. This CCT introduces a simple image viewer that gets data from either a custom record (as set up in Site Management Tools) or from certain data previously made available in the browser. You can download the code samples described in these examples here: Example ImageViewer CCT.

Note

You can create a custom CCT module to retrieve, create, and update data stored in NetSuite records using services and models. To do this, you must implement these files as you would any custom module. See Module Architecture for details.


To create a CCT Module:

  1. Create a custom module to contain your CCT files.

    As a best practice, use the following format when naming your CCT Module: SC.CCT.cctName@x.y.z, where cctName is the name of your CCT and x.y.z is the version number.

    For example:

    SC.CCT.ImageViewer@0.0.1

  2. In your new module, create the following subdirectories at a minimum:

    • JavaScript – contains the entry point JavaScript or TypeScript file and all views.

    • Templates – contains the HTML template that will render your CCT.

    Note

    If your CCT introduces any new Sass, SuiteScript, or Configuration files, add subdirectories for these files as well.