Use the JavaScript Code Layering User Interface feature

The JavaScript Code Layering feature in the administration interface lets you extend the JavaScript of an Oracle Commerce provided widget with your own custom JavaScript.

Previously, if you wanted to customize or extend the JavaScript for a provided widget, you had to download the widget and its related files, edit the code with your own custom JavaScript, and upload it back to the system as a custom widget type. With the JavaScript Code Layering User Interface feature you can open an additional user interface that lets you layer custom JavaScript on top of the provided widget and which then has the benefit of staying on the provided widget.

Extend JavaScript in a provided widget

As an example of how this feature works, do the following:

1. Open the Design page and click the Components tab.
2. Filter to find the Header widget.
3. Highlight the Header widget.
4. Click the widget name to expand its details.
5. Click Extend JavaScript. This action opens a new JavaScript file user interface window that acts as a template to be edited and associated with the original widget. You can edit this file with your own custom code and then save the file. This custom JavaScript file is then shared between all instances of the widget after it is saved.

In the case of this Header widget example, when you click Extend JavaScript, a new JavaScript file is generated that acts as the template for you to begin adding your own custom JavaScript. With the Header widget the template JavaScript file looks like this:

/**
 * @fileoverview extendheaderWidget_v10.js
 *
 * @author
*/
define(
  //
  // DEPENDENCIES
  //
  [],

  //-------------------
  // MODULE DEFINITION
  //-------------------
  function() {

     "use strict";
      return {
      onload: function(widget) {
      // console.Log('extendheaderWidget_v10.js onLoad');
      },

      beforeAppear: function () {
       //console.log('extendheaderWidget_v10.js before appear');
      }
    };
  }
);

With the Header widget, there are two functions in the template that it to the current widget model/lifecycle and these two function are:

• onLoad – runs custom logic when the widget is instantiated
• beforeAppear – used when you want to run custom logic each time the widget appears on the page

You could now edit this file with some custom code and save it to associate it with the widget. This code shows an example of some custom JavaScript that was added to the original template file. The custom code changes create a new knockout observable on the widget and updates the existing widget knockout observable variable logoAltText.

/**
 * @fileoverview extendheaderWidget_v10.js
 *
 * @author
*/
define(
  //
  // DEPENDENCIES
  //
  ['knockout'],

  //-------------------
  // MODULE DEFINITION
  //-------------------
  function(ko) {

     "use strict";
      return {
      onload: function(widget) {
        console.Log('extendheaderWidget_v10.js onLoad');
      // declare a new variable
      widget.myTestVariable = ko.observable('');
      // update an existing variable
      widget.logoAltText('Updated logo text in extension');
      },

      beforeAppear: function (Page) {
       console.log('extendheaderWidget_v10.js before appear');
      }
    };
  }
);