diff --git a/src/guides/v2.3/javascript-dev-guide/javascript/js_init.md b/src/guides/v2.3/javascript-dev-guide/javascript/js_init.md index e92402a058c..901aee6df91 100644 --- a/src/guides/v2.3/javascript-dev-guide/javascript/js_init.md +++ b/src/guides/v2.3/javascript-dev-guide/javascript/js_init.md @@ -31,6 +31,63 @@ In Magento 2, you have two options for specifying declarative notation: > This is used to target either a CSS selector or `*`. If the CSS selector matches multiple HTML elements, the script will run for each matched HTML element. For `*`, no HTML element is selected and the script will run once with the HTML DOM as its target. This method can be implemented from anywhere in the codebase to target any HTML element. This is preferred when direct access to the HTML element is restricted, or when there is no target HTML element. +Consider the example of adding a custom carousel JS: + +1. Copy the `.carousel.js` file to the `app/design/frontend///web/js//` directory. +1. Add your RequireJS module at `app/design/frontend///web/js/carousel.js`. + + ```javascript + define(['jquery',''], function($) + { + return function(config, element) + { + $(element).(config); + }; + }); + +1. Add the RequireJS config to the `app/design/frontend///requirejs-config.js` file. + + ```javascript + var config = { + map: { + '*': { + 'carousel': 'js/carousel', + '': 'js//.carousel' + } + } + }; + ``` + +You now have two options for specifying declarative notation: + +- Use the `data-mage-init` attribute to insert the carousel in a certain element: + + ```html +
+
Item 1
+ ... +
Item n
+
+ ``` + +- Use with ` + ``` + #### Declarative notation using the `data-mage-init` attribute {#data_mage_init} Use the `data-mage-init` attribute to insert a JS component in a specified HTML element. The following example inserts a JS component in the `