Edit the Theme Manifest: Assets

Each theme includes a manifest.json file, which is located within the Workspace directory. A theme's manifest is a JSON file that includes all the information required to compile resources for an active theme.

Workspace/<THEME_DIRECTORY>/manifest.json

This file lists all HTML templates, Sass, and assets related to the active theme that you downloaded when you ran the gulp theme:fetch command. You only need to edit this file to add any new HTML, Sass, or assets you create as part of your theme customizations. You can edit skin labels as well.

Note:

See Add a New File to a Theme for more examples of how to edit this file when you add any new HTML, Sass, or assets.

This file also manages any extension overrides. However, the theme development tools add the necessary overrides to this manifest when you deploy your customizations. The following topics describes the sections of the theme manifest:

• Theme Metadata

• Overrides

• Templates

• Sass

• Skins

• Assets

• Record Paths

Theme Metadata

The first entries in the manifest file include metadata about the theme or extension itself. These fields are automatically populated when you initially run the gulp theme:deploy command.

1{
2   "name": "StandardTheme",
3   "vendor": "SuiteCommerce",
4   "type": "theme",
5   "target": "SuiteCommerce",
6   "version": "1.2.0",
7   "description": "Standard theme for SuiteCommerce",
8//...

• Name (string) - uniquely identifies the name of the theme. This field is required.

• Vendor (string) - identifies the vendor as a string. This field is required.

• Type (string) - indicates if the type is a theme. This field is required.

• Target (comma-separated string) - indicates the Commerce applications supported by the theme. This field is required.

• Version (string) - indicates the version of the theme, such as 1.0.0. This field is required.

• Description (string) - provides a description of the theme as it appears in NetSuite. This field is optional.

Overrides

The override object is only included if you introduce extension overrides. When you use the Override method, the Gulp.js commands detect any HTML or Sass overrides and automatically include them in this file.

For example, if you override the _error.sass file of the Extension1 extension and run the gulp theme:deploy command, the theme development tools add the following override your theme's manifest.json file as part of the deployment process:

1//...
2"override": [
3   {
4      "src": "Overrides/Extension1/Modules/MyExamplePDPExtension1/Sass/_error.scss",
5      "dst": "Extension1/Modules/MyExamplePDPExtension1/Sass/_error.scss"
6   },
7//...

Templates

The templates object lists all HTML template files included in the theme by application. The application object includes one object per application (shopping, myaccount, and checkout). Each application lists each file in the files array.

You should manually add any new template files that you introduce as part of your theme customizations to the files array.

1//...
2"templates": {
3   "application":{
4      "shopping":{
5         "files":[
6            "Modules/AddToCartModifier/Templates/add_to_cart_modifier.tpl"
7            //...
8         ]
9      }
10      "myaccount":{
11         "files":[
12            //...
13         ]
14      }
15      "checkout":{
16         "files":[
17            //...
18         ]
19      }
20   }
21}
22//...

Sass

The sass object declares the paths to each application entry point and all Sass files to be loaded when you deploy. You should manually add any new Sass files to the files array that you introduce as part of your theme customizations.

Note:

When listing a new Sass file, declare each file in an order that makes the most semantic sense within the Sass hierarchy.

1//...
2"sass": {
3   "entry_points":{ 
4      "shopping":"Modules/Shopping/shopping.scss",
5      "myaccount": "Modules/MyAccount/myaccount.scss",
6      "checkout": "Modules/Checkout/checkout.scss"
7   }
8   "files":[ 
9      "Modules/Shopping/shopping.scss",
10      "Modules/MyAccount/myaccount.scss",
11      "Modules/Checkout/checkout.scss",
12      "Modules/twitter-bootstrap-sass@3.3.1/assets/stylesheets/bootstrap/_alerts.scss",
13      //...
14   ]
15}
16//...

Skins

The skins array is automatically populated when you run either the gulp theme:local or gulp theme:deploy commands. This array defines an object for each new skin preset file located in the Skins directory when you run these commands. Each skin object includes the following properties:

• name - declares the name of the skin as it appears in SMT. As a default, this value equals the file name.

• file - declares the name and l