# Add ECMAScript 6+ to SXA Storefront themes

Abstract

Overview of code that can be used to rectify cross-browser issues with JavaScript. Code transpilation is done by the Babel transcompiler when a gulp task is executed.

To avoid cross-browser issues with JavaScript, SXA Storefront includes an ECMAScript (ES) watcher. You can use the ECMAScript 6+ in your code for both current and older browser versions. ECMAScript 6+ code in the source folder is automatically converted to a file in the scripts folder. The Babel transcompiler transpiles the code when the gulp task named es-watch is executed. The task is stored in the tasks folder located at src\Project\Storefront\src\Scripts\gulp in the source code repository.

### Note

It is assumed that you are running a separate project configured with Gulp so that changes are synchronized to Sitecore content,

To add ECMAScript 6+ to SXA Storefront themes:

1. Open the src\Project\Storefront\src\Scripts\gulp\config.js file and specify the following configuration values in the es: section in the file.

js: {
path: 'Commerce/**/*.js',
}
es: {
path: '../Sources/Commerce/**/*.js',
srcFolderName: 'Sources',
destFolderName: 'Scripts'
},
loginQuestions[{

Where:

• path is the relative path of scripts to watch for changes.

• srcFolderName is the source folder name.

• destFolderName is the destination folder name.

2. Save the ECMAScript 6+ code in the folder specified in the srcFolderName item.

3. Start the default gulp task or, to run the task independently, run the es-watch task.

The ES watcher ensures that any ECMAScript 6+ code in the source folder is transformed into backward compatible JavaScript code and saved in the folder specified in the destFolderName item.

### Note

You can automate the addition and configuration of themes using the SXA CLI, which is a command line tool.