0

The docs for initializing JavaScript state:

On DOM ready, the data-mage-init attribute is parsed to extract component names and configuration to be applied to the element.

Where does this "DOM ready" happen? I was looking in the mage/mage, mage/apply/main, and mage/apply/scripts modules and saw that they define some dependencies and then start using document.querySelector. These are all asynchronously loaded modules of course.

Is there a potential race condition here where there just happens to be enough scripts that are loading on a typical Magento page that these modules can get away with being ready after the DOM is ready? Or is there some piece of this that I'm missing?

2 Answers 2

1

In Magento 2, JavaScript is initialized using the RequireJS library. RequireJS is a JavaScript file and module loader that helps to manage and optimize JavaScript files and dependencies.

When a page loads in Magento 2, the RequireJS library is loaded, and it then loads other JavaScript modules and libraries required by the page. The requirejs-config.js file is used to define the configuration for RequireJS, including the JavaScript files that are required for each page.

When the DOM is ready, RequireJS initializes the JavaScript modules that are required for the page. This includes initializing the JavaScript for Magento components, like the mini cart, product slider, etc.

The JavaScript for each module is defined in its respective js file. For example, the JavaScript for the mini cart is defined in Magento_Checkout/web/js/view/minicart.js. The define() function is used to define the module and its dependencies, and the JavaScript code for the module is executed when the dependencies are loaded.

To customize or extend the JavaScript in Magento 2, you can create a new module and define the JavaScript for your module in its respective js file. You can then include the module as a dependency in your requirejs-config.js file to ensure that it is loaded when required.

Overall, Magento 2 uses RequireJS to load and initialize JavaScript on DOM ready, allowing for optimized and efficient management of JavaScript files and dependencies.

3
  • I'm trying to figure out where in the core of Magento the "DOM ready" piece is happening. Commented Mar 9, 2023 at 10:40
  • The DOM ready event is handled by the jquery/ready module of RequireJS, which is defined in the jquery.js file located at lib/web/jquery.js. Commented Mar 9, 2023 at 10:45
  • I know that $(document).ready() is handled by jquery, but I'm trying to figure out where the Magento core code specifies that parsing data-mage-init attributes should happen on document ready. Commented Mar 9, 2023 at 10:51
1

I initially skipped over looking at the mage/bootstrap module thinking that it was something having to do with the Bootstrap CSS framework, but now I see that it actually "bootstraps" the framework JS by calling $(mage.apply) which is the shorthand jQuery notation for $(document).ready(mage.apply).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.