Javascript Use Cases in Magento 2

Research
 
Magento
 
28 August 2018 560

Since code smells are common in repositories of Magento 2 projects, we decided to prepare a series of short articles about Javascript in Magento 2 and share them with you. These series will offer you some basic "template" solutions for typical use cases, starting with adding simple JQuery event listener with foolproof logic and up to development of knockout components for implementation of UX in the project.

 

Let's start with the most frequent task when backend developer urgently needs to add some handler for the element. In most cases s/he will add it right in the `*.phtml` template, which seems to be not the worst scenario. But as soon as you have a plenty of such scripts within one file, it becomes difficult to maintain this file in the end of the day.

 

Usually developers justify this solution as a need to pass some parameter from PHP code to JS code, and thus they won't need to be hustled into Magento structure and let us be honest - they are just being lazy, choosing to simply add handler for the element by means of adding it in the `*.phtml` template. But for a case like this we can always use 'mage-init' with '$.widget`. The 1st one enables us to pass parameters in Javascript, while the 2nd one enables isolation of Javascript code from the template.

 

Let's scrutinize an imaginary case, for example we need to display "Hello world" in the console, which is passed there from outside. We develop our own 3rd party module, in the directory in `view/frontend/templates` (let's say this block will be shown on the frontend) we have custom.phtml with code of the following type:

 

The next step is to place our script here: `view/frontend/web/js/owCustom.js`. The script itself is very simple:

 

The code itself is simple in this example, however if you have questions - feel free to reach out via an e-mail start@opsway.com and we will do our best to explain in detail. Moreover you find useful information about widgets here https://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/.

 

What we need to do now is to connect our widget with the module. Assuming the fact that frontend of Magento 2 is closely connected with Require.js, we need to create a file `view/frontend/requirejs-config.js` with the following content:

 

Our final step is the easiest one: to use our script in the module by means of updating the code:

 

That's it! Now you can add your Spaghetti code into a separate file and it won't affect your template at all. This method you can use pretty much in all cases, because we can use widget as a component with its own methods, add them into the method `_create()` for different events, etc. But if you strive to achieve richer FE we highly recommend you to use the suggested by Magento 2 Knockout.js framework.

 

This article was written by Dmitriy Ivanenko, senior full stack Magento 2 developer & clean code evangelist, who likes to read an elegant code as much as to write it by himself.

Comments

Great to see practical programming approaches with Magento 2.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.