JavaScript Integration Tips in Magento 2

One of the main differences in comparison with Magento 1 is the usage and connection of javascript in the extensions. Magento 2 involves up-to-date trends of javascript development (during Magento 2 planning). One of them is usage of RequireJs for js scripts loading as well as usage of modern frameworks that involve data binding – knokoutJs. That is why the developer who used to work with Magento 1 may have a hard time dealing with all those contemporary things.

In this article we will take a look at the following:

• connecting a script with a page;
• connecting a script with a particular page element;
• adding of server variables to js-scripts;
• usage of knokout.js and templates for it at a page.

Let’s start from the basics and try to enable a simple script on a page.

To make a script loaded on a page In Magento 2, you need to compile static content by the following command: php bin/magento setup:static-content:deploy and it’ll place the script to the following folder: pub/static/frontend/<Your theme>. Please note that scripts should be located in a particular folder of your extension, i.e. in <Your_module>/view/frontend/web as this is the folder from which files will be transferred to pub/static/frontend/<Your theme>/default/<location>/<Your_module_name>.

But simply moving the scripts to the folder won’t be enough to make them work. You’ll also need to register your scripts in RequireJS as this file is responsible for loading scripts. There are 2 ways of registering a script in RequireJS: add it as a dependency in an extension or add it as an independent script. To load a script as a dependency, you need to specify the dependency in another extension, as in this example:

The name ‘Your_module/js/yourscript’  corresponds to a frontend/web folder path to a module. And if you want to connect the script through the module’s template, then you can use the following code:

Browsers ignore type=”text/x-magento-init” content type, but  Magento 2 parses it.

Connecting a script with a particular page element.

You can bind your script to a particular page element with a help of the following script:

Where in “path/to/element” we write down a path to the required element.

There is also a way to initialize your script directly in the html element description, together with bind elements and params as well.

Here we initialize the dropdown option, and pass null object to it.

In order to populate data from the backend you can use the same construction with little modification:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Vlad

Please notice, that your script should return a function. And particularly this function should receive the arguments list.

For most of its components Magento 2 uses knokoutJs framework, which is quite simple in its usage. It provides such a useful feature as data-binding. Generally speaking I suppose that you are acquainted with knokoutJs.

Let’s say you have already created a template and now you need to add a data source model to it. To achieve this we will be using the same script with the content type type=“text/x-magento-init. 

The following code maybe served as an example:

Now let’s have a closer look at each string.

We pass information about incoming variables and our component name into the Magento_Ui/js/core/app.

Generally speaking, the component Magento_Ui/js/core/app registers our model for usage in knokoutJs with the component scope=”your_component”. Now your model will be used in the templates where “your_component” scope will be defined.

For example, as it goes here:

We also can set the component name via the xm layout. In this case we write the following in our template:

Then in the block layout we add the following:

This code does the same as the above mentioned one, but allows adding components to already defined elements.

Enabling javascript in Magento 2 is more complicated in comparison to Magento 1. However this increases flexibility to use and follow up-to-date practices in javascript programming world.