Download Theme Developer Tools for SuiteCommerce

TL;DR Opening

Download and set up Theme Developer Tools to start developing custom themes for SuiteCommerce implementations effectively. Proper preparation is key to a smooth development experience.

Prerequisites

Before downloading the theme developer tools, ensure that you have completed the following tasks:

• Verify the installation of SuiteCommerce or SuiteCommerce Advanced as outlined in the relevant installation documentation.
• Confirm that the SuiteCommerce Extension Manager is installed.
• Set up your developer environment by installing Node.js and Gulp.js.

These installations are necessary to support theme customization and development in your SuiteCommerce environment.

Download Theme Developer Tools

To locate and download the theme developer tools necessary for your specific implementation, follow these steps:

1. Log in to your NetSuite account.

2. Navigate to Documents > Files > File Cabinet.

3. Go to the directory SuiteBundles/Bundle 521562/.

4. Download the .zip file, such as ThemeDevelopmentTools-24.1.x.zip (here, x represents the latest minor release).

   Important: If you are implementing the Aconcagua or 2018.2 release of SuiteCommerce Advanced, download the ThemeDevelopmentTools-18.2.1.zip file, as these are the only tools compatible with those implementations.

5. Extract the downloaded .zip file to a suitable location on your local environment. This becomes your root development directory for custom themes.

   • Note that the extracted directory will have the same name as the .zip file, but you can rename it as necessary.
   • Important: Do not move, delete, or rename any of the files or folders within the top-level development directory.

6. Open a command line or terminal window, and navigate to your root development directory.

7. Execute the following command to install the required Node.js packages:

   bashCopy

   npm install

   This command installs the dependencies required for managing your custom themes, stored in the node_modules subdirectory of your root development directory. This process may take some time to complete.

   • If using a sandbox account, create two separate root development directories—one for production and another for sandbox to ensure proper deployment later in the development lifecycle.

Using Theme Developer Tools with Token-Based Authentication

Theme Developer Tools can support Token-Based Authentication (TBA) for your site. To set this up, follow these steps:

1. Create an integration record:
   • In the Name field, provide a name for the integration record.
   • Set the State to Enabled.
   • Check the boxes for Token-Based Authentication and TBA: Authorization Flow.
   • Provide a Callback URL: http://localhost:7777/tba.
   • Clear the Authorization Code Grant box and check User Credentials.
2. Save the integration and copy the consumer key and secret before closing the page.
3. Paste the consumer key and secret into the .env file located in the root theme developer tools folder.

Next Steps

After setting up the theme developer tools, continue with the following:

• Explore how themes operate and the configuration files involved by consulting resources like Theme Development Files and Folders and Anatomy of the Base Theme.
• If you wish to use the SuiteCommerce Base Theme as a foundation for your custom theme, refer to Use the SuiteCommerce Base Theme for guidance.
• To ensure that your custom theme functions correctly, review the Best Practices for Creating Themes.
• Begin developing your theme by following the instructions outlined in Develop Your Theme.