This blog is the second part of the Suite Commerce Advanced extension series. Previously, I discussed the Suite Commerce advanced extension features, their importance, and how to use publicly available extensions on your site.
In this part of Suite Commerce Advanced extension series, I’ll walk you through the custom development environment.
If you are not familiar with custom extension development, then you can go through the first part of this blog here: Advanced (SCA) Extensions.
What are SuiteCommerce Extensions?
NetSuite Suite Commerce Advanced extensions are the feature of NetSuite SCA (Suite Commerce Advanced) where users can update/extend website’s components’ look and feel without altering core modules and stylesheets on the website. Users can install pre-built or open-source extensions through the Install bundle Wizard.
However, every user has a different set of requirements that often don’t align with publicly available extensions; hence, SuiteCommerce Advanced (SCA) offers the flexibility of custom extension development.
For example, users can create custom module and link with custom records, show list or search data in the frontend. You can also add custom events on PDP (Product detail page) or PLP (Product list Page) or Checkout pages etc.
Prerequisite To Develop an Extension for SuiteCommerce:
The prerequisite steps to set an environment for custom extension development in SCA are the same as explained in What are SuiteCommerce Advanced (SCA) Extensions? (Part 1)
Additionally, enable feature “TOKEN-BASED AUTHENTICATION” and assign “SCDEPLOYER” role to a NetSuite user that we are going to use.
1. Users can nable this feature by the following navigation:
Home > Setup > Company > Enable Features > SuiteCloud (Subtab) > Manage Authentication (Section) > TOKEN-BASED AUTHENTICATION
Click on the checkbox for the” TOKEN-BASED AUTHENTICATION “option and save settings.
2. To assign a SCDEPLOYER role to a user, adhere to the following steps:
- Login into NetSuite Instance
- Go to employee record that the user wants to use to build an extension
- Edit Employee record
- Add the SCDeployer role line into the roles list under the access subtab and save the record. See the image below:
Setup Development Environment for SuiteCommerce Extension
- To set up the development environment, make sure to follow the steps in the same order: Download “ExtensionDevelopmentTools-22.1.0.zip”
- Users can download this tool by the following navigation
Home > Documents > Files > File Cabinet > SuiteBundles > Bundle 426586 (this will depend on SuiteCommerce Extension Management version) > ExtensionDevelopmentTools-22.1.0.zip > Download
1. Unzip “ExtensionDevelopmentTools-22.1.0.zip” in a new folder.
2. Open the folder in the file editor, i.e., Visual Studio Code
3. Install the node package through the “npm install” Command in a terminal
- Install node packages using the “npm install” command in a terminal; see the image below for reference.
Fetch Extension
- Before creating an extension, you must fetch the relevant extension first. It includes all current active extensions and the theme.
- User can fetch extension by using this command “gulp extension:fetch”
- first time, a user initially needs to create a new token. Token will be generated only if the SCDeployer role is assigned to the current user.
Create Extension
After completing the fetching process, you can create a new extension using the command “gulp extension: create”. A new dummy executable extension will be created after adding all the required information. All the needed information fields are represented in the following snapshot.
Execute Locally
After creating the extension user can run this locally to review the changes before deployment by using the command “gulp extension: local”. As displayed in the below screenshot, the hello world child division is added under the header section.
Deploy Extension
After reviewing changes in the local environment, extension will be ready for deployment and can deployed with command “gulp extension: deploy”.
Activate Extension
- After the deployment process is complete, the user must activate the extension to see the results on the live website. Users can activate the extension by: Open Extension management by following the navigation.
Home > Commerce > Extensions > Extension Manager > Edit “your website domain record” > Extensions(subtab) > Active Value Check True “against your extension name“and save.
Users can review their changes on the live site after the activation process.
Conclusion
Summing up, I hope this guide shall help you easily set up a custom development environment in SCA. Just follow every step in the same order as explained above. However, if you are an average user, you can always seek help from NetSuite partners like ALphaBOLD.
In our upcoming blogs, we will discuss the architecture of extensions and how to execute code between different layers in Suite Commerce Advanced Extensions. Do you have some suggestions or want to share your thoughts? Comment below. Let’s grow together!