JavaScript

To make the developing of the Accelerator JavaScript easier, the JavaScript is split into different modules. The structure of the Accelerator JavaScript is following the Foundation JavaScript, both regarding initializing and event binding.

Examples of modules are notifications popping up a message when a visitor puts an item in the cart or modals handlig the reveal dialogs used when showing an agreement text on the checkout page.

Modules are communicating to each other with events which makes the modules easy to replace with project specific modules.

Application initialization

The application is initiated from the Accelerator module. This module handles all parsing of input parameters and initiate correct modules, depending on the markup, and also re-initialization if needed.

acc-js-4.png

As the above example shows you can configure each module with unique settings to fit your sites and have all modules hardcoded. If you look closer at the ajaxContentLoad-settings you will see the setting debug is turned on for the module and delivers extra debug information to the JavaScript console. Logging in the module is done with the this.log(‘message’). The message is displayed in the console when open.

Re-initialize the application

In some scenarios; for example if the dom-element is manipulated and a new element is dynamically loaded from an external source, the application needs to be re-initialized. This is to restructure the content and initialize the module not initialized, before the global event $(document).trigger(‘reflow’) can be executed.

Module initialization

Each module is created as a library in the Accelerator which is the application that handles the initialization (or re-initialization) when a part of the screen is updated with JavaScript (ajax). 

Below there is a simple example of a module added to the Accelerator. In the example we can see that the name of the module is mymodulename and that the module has some settings (a debug flag to enable log-messages to the JavaScript console and two methods that need to exist; the init and events method.

acc-js-1.png

init

The init method is executed on all page initializations and executed for all modules on all pages.

acc-js-2.png

events

The events method is executed if the module is in any of the markup on the page. Defining that a module exists is made by data-attribute, in the above module the application is looking for data-mymodulename on any element. The element that has the data-attribute is used as the scope-parameter. If the same module exists multiple times in the same page also multiple events are executed, but with different value of the scope-parameter.

acc-js-3.png

As you can see in the example code above, before any event is attached the remove (off) method for the event is executed. The reason for this is that a module can re-initialize itself and we don’t need multiple executions of the same event for the same object.

How to

Change current logic

Instead of changing the current Accelerator files, a better approach is to make a copy of the file, place it in the site-folder and make the needed changes there. The reason to make a copy of the original file instead of do the changes in the file itself is to make it easier to revert the changes if needed, or be able to apply an updated JavaScript file from a later release without having to remember what was changed in earlier version.

Build your own module

When you build your own module you simply make a copy of the _accelerator.template.js in the Accelerator folder; place the copy in the site folder to make it easy to identify the standard and the project specific modules.

Remember to add the correct data-attribute in the html-markup for the event-event on the module to be triggered.

After a change is made in any of the files the Grunt-task ‘uglify’ and/or ‘concat’ needs to be executed to merge the files to one target file. The Grunt-tasks are automatically executed if Grunt is started with the watch target.

Site-info handler

In the framework a new handler named site-info handler is used to get information specific to the site and can’t be hard coded in the JavaScript files. The site-info contains information as the Website ID, paths for different pages and all website strings with the keys starting with “js_” (the prefix is excluded from the translations key).

See the example below for how to use information from the site-info:
acc-js-5.png

The site-info is used from the different JavaScript modules, handling all logic from search and filtering to adding products to the cart.

Is this page helpful?
Thank you for your feedback!