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',
       esLintUploadOnError: true
    }
    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.