How to override a template file if you are on the Kilimanjaro release of SCA or earlier.

When customizing SCA, you may need to change the HTML code of the application. To add, remove, or change the HTML, you must customize the template file for the module that corresponds to the feature you want to change. To customize a template, you must use the override method provided by the SCA developer tools. Because there is no mechanism for overriding or extending a specific part of a template, you must override the entire file.

To override a template:

1. Create a directory to store your template. Where you place this directory depends on your implementation. If implementing 2019.2 and later, create this directory within the SCA source code root directory. Examples: SC_20.1/extensions, SC_19.2_Live/extensions. If implementing 2019.1 and earlier, create this directory within the Modules directory. For example: Modules/extensions.

a. In the extensions directory, create a subdirectory called ItemDetailsExtension@1.0.0.

When creating a new custom module, the module name must be unique. You must not have duplicate module names, even if those modules reside in different folders.

b. In the ItemDetailsExtension@1.0.0 directory, create a subdirectory called Templates.

c. If required, create another subdirectory called Sass.

2. Copy the original template file to your custom directory. The string x.y.z corresponds to the version of the ItemDetails module in your version of SCA.

If implementing 2019.2 and later, copy the item_detail.tpl file from /ItemDetails@x.y.z/Templates to the Templates directory of your custom application module.

If implementing 2019.1 and earlier, copy the item_detail.tpl file from Modules/suite_commerce/ItemDetails@x.y.z/Templates to the Templates directory of your custom application module.

3. Create the ns.package.json file.

You must create this file in the ItemDetailsExtension@1.0.0 directory.

4. Add the required code to the ns.package.json file.

If implementing 2019.2 and later, the contents of your ns.package.json file should be similar to:

{
   "gulp": {
         "templates": [
            "Templates/*"
         ]
      ,   "sass": [
            "Sass/**/*.scss"
         ]
      },
      "overrides": {
         "Advanced/ItemDetails@x.y.z/Templates/item_details.tpl": "Templates/item_details.tpl"
      }
}

If implementing 2019.1 and earlier, the contents of your ns.package.json file should be similar to:

{
   "gulp": {
         "templates": [
            "Templates/*"
         ]
      ,   "sass": [
            "Sass/**/*.scss"
         ]
      },
      "overrides": {
         "suitecommerce/ItemDetails@x.y.z/Templates/item_details.tpl": "Templates/item_details.tpl"
      }
}

The first section of the preceding code samples defines the required objects used by gulp to include your customized template and Sass files when combining the application.

The second section contains the override directive, which maps the original file in the SCA source distribution directory to your custom template file. This mapping tells the gulp.js combiner to override a specific file.

5. Edit your custom template.

This procedure shows the basic steps required to modify a template. However, you can fully customize your templates as required.
a. Open the item_details.tpl file that you copied in a previous step.

b. In your editor, search for the string Add to Cart.

This string defines the label for the add to cart button.

c. Replace this string with the string ‘Add to Your Cart.’

6. Create a custom Sass file, if required.

7. Update the distro.json file.8. View your changes.

You must add your custom module to the distro.json file to ensure that the gulp tasks include your custom template. If you are customizing Sass files, you must also add a reference to them in the appropriate location in the distro.json file.

8. View your changes.

If you are running a local server, you can view your changes by reloading your website. If you are viewing your site in NetSuite, you can deploy your changes using the developer tools.