Prerequisites for Theme Development in SuiteCommerce

To successfully develop themes using SuiteCommerce, you'll need to meet several prerequisites to set up your environment effectively. This includes downloading the necessary tools and ensuring your themes can be customized without losing previously established work.

Prerequisites for Fetching Active Theme Files

Before you can start fetching active theme files, ensure you have the following prerequisites:

• Node.js: Install Node.js from the official website to enable running Gulp.js tasks required for theme development.
• Gulp.js: This is essential for automating tasks in the development workflow. Install it globally using the command npm install --global gulp.
• Theme Developer Tools: Set up the Theme Developer Tools as per the instructions outlined in the SuiteCommerce documentation.
• Active Theme: Activate a theme for your domain. For new developers, the SuiteCommerce Base Theme is recommended as a baseline template, as it adheres to best practices for theme development.

Fetching Active Theme and Extension Files

To fetch the active theme files, follow these steps:

1. Open a command line or terminal.

2. Navigate to the top-level theme development directory you created.

3. Enter the command:

   bashCopy

   gulp theme:fetch

4. When prompted, provide your Authentication ID and configure your account and role for fetching files.

Important: If you are using an account that differs from the one related to the existing authentication ID, use the --to parameter to specify the new account details.

What Happens When You Fetch an Active Theme?

When you execute the gulp theme:fetch command, several important actions are taken:

• A Workspace directory is created in your theme development directory. If it exists, its content is cleared before downloading new files.
• All editable theme-related files such as HTML, Sass, and assets are downloaded and organized by module, specific to the active theme, into your workspace.
• If any active extensions are associated with your theme, their files are also downloaded along with the theme files.

Example: Running gulp theme:fetch with your domain having an active theme SuiteCommerceBaseTheme will structure your workspace as follows:

1Workspace/
2      Extras/
3         Extensions/
4            YOUR_VENDOR/
5               PublishedExtension1/
6                  assets/
7                  Modules/
8                  manifest.json
9               application_manifest.json
10      SuiteCommerceBaseTheme/
11         assets/
12         Modules/
13         Overrides/
14         Skins/
15         manifest.json

Next Steps

After fetching the necessary files, you can proceed to customize, add new files, and further enhance your themes as outlined in the related documentation for theme development best practices. For detailed instructions and further details, refer to help topics like customizing existing theme files and adding new files to a theme or exploring best practices for creating themes.