Such script tag is commonly ignored by the browser because browsers do not recognize the type of text/x-magento-init. Magento makes use of this behavior peculiarity and, after the page is loaded, uses JSON-content of such tags for initialization and launch of Magento JavaScript Components. These components are different from common RequireJS modules, for they return the function that Magento can later execute.The syntax of x-magento-init tags’ JSON-content looks the following way:Where DOM_ELEMENT_SELECTOR is a CSS selector of DOM-node that will be passed to the component, CONFIG_OBJECT is the component’s RequireJS name and CONFIG_OBJECT is a JSON object generated with PHP.This initialization method allows to avoid hardcoding of the necessary selectors and configuration parameters in JavaScript or JavaScript generation directly from PHP.CONFIG_OBJECT and DOM_ELEMENT_SELECTOR are passed as parameters into the returned by a RequireJS function component. After the page is loaded in the browser console, the following content will appear:> Object {config: “value”}>Also, if our component does not require DOM element to function, we can call it the following way:

What is the purpose and syntax of the data-mage-init attribute?

Data-mage-init html attribute is an alternative method for initializing Magento JavaScript Component for a certain DOM element.

How is it used to execute JavaScript modules?

We can modify our phtml file the following way:app/code/Vendor/Module/view/frontend/templates/test.phtml

Content

The result will be the same. Div with the same attribute and embedded config JSON object will be passed to the function, returned by Vendor_Module/test RequireJS module.It is necessary to use single quotation marks (data-mage-init=’…’) in this case, because the embedded JSON will be processed in a strict mode that requires JSON to have only double quotation marks.Also, in case JS component does not return the function, Magento tries to find REQUIREJS_MODULE in jQuery prototype, and if such does not exist, it will be called in the following way:

What is the difference between the text/x-magento-init and the data-mage-init methods of JavaScript module execution?

Tag text/x-magento-init can be used to call modules without the reference to a certain DOM element.

How do you execute a JavaScript module in an AJAX response and in dynamic code stored in a string?

To execute this, use imperative call of a JS module:

2.4 Describe jQuery UI widgets in Magento

Describe how Magento uses jQuery widgets, and demonstrate an understanding of the $.mage object

$.mage is a namespace for Magento widgets. It uses a set of widgets and functions; below is a list of the most common ones:

1. Accordion widget
2. Alert widget
3. Calendar widget
4. Collapsible widget
5. Confirm widget
6. DropdownDialog widget
7. Gallery widget
8. List widget
9. Loader widget
10. Menu widget
11. Modal widget
12. Navigation widget
13. Prompt widget
14. QuickSearch widget
15. Tabs widget

There is also a number of less popular functions and widgets:

• __ – look translate
• cookies.get(name) – get cookie
• cookies.set(name, value, options) – change cookie
• cookies.clear(name) – clear cookie
• dataPost – a widget that creates post form and sends it to the server
• dateRange – date range widget that creates 2 calendar widget
• escapeHTML(str) – execute escape HTML
• formKey – widget that generates formKey and saves into cookie, in case formKey is absent from the cookie
• init – initiates data-mage-init scripts
• isBetween(value, from, to) – checks whether there is a number between two other
• isEmpty(value) – checks whether the line is empty using trim
• isEmptyNoTrim(value) – checks whether the line is empty not using trim
• isValidSelector(selector) – checks whether css selector is valid
• pageCache – a widget for full page cache that loads private content via an additional ajax query
• parseNumber(value) – transforms a line into a number
• redirect(url, type, timeout, forced) – executes redirect to the specified url
• sidebar – a sidebar widget
• stripHtml(value) – deletes html tags from the line
• translate – translates the line into the language of the current website locale
• translateInline – inline translation widget
• validation – form validation widget

What is the role of jQuery widgets in Magento?

jQuery JavaScript library serves to implement client functionality, widely using standard, customized and custom jQuery widgets for this purpose.A developer has a choice – either to create a new widget from scratch, using the $.Widget objects as a base to inherit from, or directly inherit from the existing jQuery UI or third-party widgets. If you name your custom widget the same as the widget you inherited it from, it is possible to extend the initial widget.

How are Magento jQuery widget modules structured?

A widget is created using the $.widget method and contains options and ways to work with the widget (_addClass, _create, _delay, _destroy, _focusable, _getCreateEventData, _getCreateOptions, _hide, _hoverable, _init, _off, _on, _removeClass, _setOption, _setOptions, _show, _super, _superApply, _toggleClass, _trigger, destroy, disable, enable, instance, option, widget).The following example demonstrates how to create a widget using vendor/magento/module-multishipping/view/frontend/web/js/payment.js:

Describe how Magento executes jQuery widgets

Magento executes Magento jQueries two ways:

• Connection via RequireJS
• data-mage-init and text/x-magento-init

In order to connect via RequireJS, add a jQuery and the widget into dependencies. Then call the widget using the jQuery object:

How are Magento jQuery widgets executed with data-mage-init and text/x-magento-init?

To simplify the process of working with widgets in Magento, it is possible to initiate them. There are two alternative ways of initializing widgets:

1. data-mage-init = ”…” – attribute, on the basis of which the widget will be initialized

In the example, the tabs widget is initialized.

2. script [type = “text/x-magento-init”] – a script tag that contains the widgets initialization data.

In the example, the Magento_SendFriend/js/back-event widget is initialized for all tags “a” with the role = back attribute.

2.5 Demonstrate ability to customize JavaScript modules

Describe advantages and limitations of using mixins

Magento 2 provides the functionality that allows to listen to any RequireJS module after it was initialized and alter or moderate it immediately after initialization and before it is returned. This allows to redefine methods and add new parameters to JavaScript objects, not altering its original code.app/code/Vendor/Module/view/frontend/requirejs-config.jsapp/code/Vendor/Module/view/frontend/web/js/customer-mixin.jsAfterward, when we load any page that uses Magento_Customer/js/view/customer RequireJS module, we will see our alers, which means the code was called. Also, when we look at the Magento_Customer/js/view/customer module code, there will be a new parameter newCustomProperty.mixins configuration key in requirejs-config.js file is a new parameter that Magento added into RequireJS system. Syntaxis:MIXIN_MODULE is a common RequireJS module that will return the function via a single parameter (targetModule), and this function is called after the original REQUIREJS_MODULE, which is then passed to mixin function. What is returned MIXIN_MODULE will be considered as REQUIREJS_MODULE.This way, we can add methods and parameters to RequireJS modules without altering the code directly.Method override:app/code/Vendor/Module/view/frontend/web/js/customer-mixin.jsIn case the module returns uiClass-based module, we can use the extend method:app/code/Vendor/Module/view/frontend/web/js/customer-mixin.jsThe disadvantages of this approach manifest themselves only when mixins are used by several developers. In case several mixins are available for one and the same method, one of them will overwrite the results of the rest. Use mage/utils/wrapper module to sidestep these constraints. The functionality of this module is very close to Magento 2 around plugins and is used in the following way:app/code/Vendor/Module/view/frontend/web/js/customer-mixin.jsThe mage/utils/wrapper.wrap method receives two arguments – the original method we must change and the function we will change it for. The original parameter is the reference of the method, needed to be changed. Wrap method returns the function that will, in its turn, call our method. The original method can be called optionally.

What are cases where mixins cannot be used?

Mixins can not be used in case JS code was called without RequireJS.

How can a new method be added to a jQuery widget?

To add a new method to a jQuery widget, use mixin:app/code/Vendor/Module/view/frontend/requirejs-config.jsapp/code/Vendor/Module/view/frontend/web/js/dropdown-mixin.js

How can an existing method of a jQuery widget be overridden?

You can also apply mixins to override an existing method of a jQuery widget.app/code/Vendor/Module/view/frontend/requirejs-config.jsapp/code/Vendor/Module/view/frontend/web/js/dropdown-mixin.js

What is the difference in approach to customizing jQuery widgets compared to other Magento JavaScript module types?

jQuery widgets by default contain the features that allow to override and modify the widget. All we need to do is to override the widget:This will work until the widget is not called. The problem is that Magento allows to use widgets with the help of data-mage-init and x-magento-init constructions. The widgets allow to initialize inline widget, which leads to:

1. Call of the corresponding RequireJS module
2. RequireJS module defines the widget (jQuery.define)
3. RequireJS module returns the newly created widget
4. Magento core applies the newly created widget

The widget is defined and immediately used in the corresponding selector, which makes it hard to redefine or modify.When extending our widgets, one must bear in mind that our mixin must not only extend the widget with jQuery.widget, but also return the widget instance so that it could be immediately used by x-magento-init and data-mage-init constructions.