Utilizing JavaScript component in Magento 2

Aug 14, 2018274Denis Natalevich
Utilizing JavaScript component in Magento 2

Magento 2 uses the RequireJS library to work with JavaScript. The library uses an asynchronous dependency loading model — AMD. This allows you to optimize the time it takes to load a page, containing JavaScript files. Also, by managing the JavaScript resources dependencies, we get rid of the duplication of the loaded libraries.

Places where JavaScript resources are stored
JavaScript component
Define vs require
Insert a JS component in a PHTML template
Initializing a component on a selector
Initializing a component on a selector with parameters
Initializing a component on a selector in JavaScript

Places where JavaScript resources are stored

  • lib/web/ — this folder contains the libraries that are used in Magento. These could be either third-party libraries such as jquery, underscore.js, knockout.js, or the Magento ones based on them in the /mage/folder;
  • app/code/[Vendor]/[Module]/view/[areaName]/web/ — a path for javascript files used in the module;
  • app/design/[areaName]/[VendorTheme]/[themeName]/web/ — a path for javascript files used in the theme;
  • app/design/[areaName]/[VendorTheme]/[themeName]/[Vendor]_[Module]/web/ — a path for inheritance javascript files of the module.

JavaScript component

JS component is a RequireJS module decorated as an AMD module. This approach allows us to encapsulate the logic in modules without clogging the global namespace. Modules can also use other modules.

Here is an example of a simple RequireJS module:

Now when loading the page you will see an alert with “Hello world”!

Let’s connect jquery and mage/cookies:

As you can see, you need to specify the necessary modules in the form of an array to connect the modules. Then RequireJs will pass the modules to the function in the order of declaring the modules.

Define vs require

If we want to create a module, on which other parts of the application will depend, we need to use define(). And if our module will only use other modules, then require() is used.

Insert a JS component in a PHTML template

Depending on the task, you can use one of the two options for notation:

  • using the data-mage-init attribute
  • using the <script type=”text/x-magento-init”/> tag

Let’s figure out what options are available and when they can be used. Let’s say you just need a simple connection of JS files, without specifying parameters or components.

A simple connection of JS in PHTML:

In this case, the path to the file is:

Vendor/Module/view/frontend/web/js/myfile.js

Which contains your code:

Initializing a component on a selector

There are 2 ways to do it:

1) Initializing the component in the data-mage-init attribute. For example:

2) Using a tag with the <script type=”text/x-magento-init” attribute. For example:

In these cases the path to the file is:

Vendor/Module/view/frontend/web/js/jsfilename.js

Which contains your code:

Initializing a component on a selector with parameters

When a component is initialized, it is also important to send parameters to it, which are determined mostly dynamically in php.

1) data-mage-init

2) Using a tag with the <script type=”text/x-magento-init” attribute. For example:

Initializing a component on a selector in JavaScript

If we do not have dynamic parameters obtained with php, we can initialize the component on a selector in a javascript file.

For example:

vendor/magento/module-swatches/view/adminhtml/web/js/visual.js

Please leave your questions in the comment section below, if something remains unclear.



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *