Create Your CCT as an Extension

This topic applies to

Applies to

Aconcagua | SuiteCommerce Web Stores

The sample ImageViewer extension includes a baseline module named ImageViewerModule. The CCT is a second module for the ImageViewer extension, called ImageViewerCCT.

To create an extension for a CCT with the extension developer tools, you create a baseline extension that includes a baseline module. You then add a baseline CCT as a separate module for the extension.

To create your CCT as an extension:

  1. Create a baseline extension. See Create a Baseline Extension.

    As part of the ImageViewer example, use the following values when prompted:

    Property

    Value

    Fantasy name

    Image Viewer!

    Extension name

    ImageViewer

    Vendor name

    NetSuite

    Version

    1.0.0

    Description

    The best image viewer of the market!

    Applications

    Shopping, My Account, Checkout

    File Types to Include

    Sass, JavaScript

    Initial Module Name

    ImageViewerModule

  2. Add a CCT to your baseline extension. Create Custom Content Types for an Extension.

    As part of the ImageViewer example, use the following values when prompted:

    Property

    Value

    Label of the CCT

    Image Viewer

    Name of the CCT

    ImageViewerCCT

    Description for the CCT

    Drag n' drop it anywhere to show the items image or a custom image

    File types to include

    Templates, Sass, JavaScript

    Extension to add CCT

    ImageViewer

After adding the CCT, your workspace includes the following files and folders:

File Name

Location

Description

ImageViewerModule.js

ImageViewer/Modules/ImageViewerModule/JavaScript

Entry point for the baseline extension. See Create the Entry Point JavaScript Files.

ImageViewerCCT.js

ImageViewer/Modules/ImageViewerCCT/JavaScript

Entry point for the CCT module. See Create the Entry Point JavaScript Files.

ImageViewerCCT.View.js

ImageViewer/Modules/ImageViewerCCT/JavaScript

View file for the CCT. See Implement the View File.

NetSuite_imageviewer_imageviewercct.tpl

ImageViewer/Modules/ImageViewerCCT/Templates

Template file for the CCT. See Implement the Template File.

_imageviewercct.scss

_imageviewermodule.scss

ImageViewer/Modules/ImageViewerCCT/Sass

ImageViewer/Modules/ImageViewerModule/Sass

Sass files for the baseline extension module and the CCT module. See Implement the Sass Files.

ImageViewer/manifest.json

Manifest file for the baseline extension and CCT module. The extension developer tools automatically generate all the required information in this file. You do not need to edit it.

For more information about this file, see Extension Manifest.

Best Practices

Follow these best practices when creating a CCT:

  • The above files (with the exception of the Sass files) are the minimum required for an extension with a CCT. Depending on your extension functionality, you may also need to create SuiteScript directories and SuiteScript files for the extension module or the CCT module.

  • The extension development tools generate a baseline extension that you can use as a basis to build any extension for your SuiteCommerce site. For the example CCT in this topic, not all of the generated files are used. In addition, the files initially contain code that you overwrite with your extension-specific code. For more information about baseline extensions, see Create a Baseline Extension and What Happens When You Create Extension files?.

  • You can use a similar process as described in this topic to create a single extension that references multiple CCT modules. For more information, see Create Additional Modules for an Extension.