Locate JavaScript components

Overview

This topic discusses how to define which JavaScript components and widgets are used on a particular Magento store page.

Locate JS components: walkthrough

To locate scripts used for a certain element:

  1. Open the store page in a browser, and locate the element's class or id using browser debugging tools, such as Firebug (Firefox) or Inspect Element (Chrome).
  2. Select to view the page source.
  3. Find the corresponding element in the page source and see if there are data-mage-init or <script type="text/x-magento-init"> calls on this element, its children or parents. The calls contain the names of the scripts, as described in JavaScript initialization.
  4. To find the source file of the used script:
    1. In the <head></head> section of the page source, click link to requirejs-config.js file. The file contains the Magento RequireJS configuration, collected from all modules of the current theme.

      Alternatively, you can open the requirejs-config.js file from the file system: pub/static/_requirejs/frontend/<Vendor>/<theme>/<locale>/requirejs-config.js
    2. In the var config = {...} section of requirejs-config.js, find the required script name, and view the path to its source file. This path is relative to certain directories, depending on whether it contains module reference:
      • If the module context is not specified, the path is relative to <theme_dir>/web (current theme). If the file is not found there, according to the assets fallback, it is searched for in parent theme web directory, and then lib/web(library) directory.
      • If the module context is specified, the path is relative to <theme_dir>/<Namespace>_<Module>/web (current theme module). If the file is not found there, according to the assets fallback, it is searched for in the same location in the parent theme files, and then in the <module_dir> (module) directory.
    </ol>

    Locate JS component: example

    As we discussed in the preceding section, you use browser debugging tools to define which JavaScript component or widget is used for an element. An example follows. To find what JS components are used for displaying the main navigation menu in the Luma theme:
    1. Using the Inspect Element feature of the browser, define that the menu section id is store.menu:

      Using the Inspect Element define the id


    2. Search the page source for store.menu (illustration follows):

      Search the page source for the store.menu string

      We can see that there's a data-mage-init attribute in the scope of the <div id= "store.menu"></div> 
      data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'
      According to the JS components initialization notation, this means that this code calls menu.js.
    3. To find the source file of menu.js
      4. , let's open requirejs-config.js by clicking the link to it in the section of the page source. The path to menu.js is specified there as follows: 
      "menu":                   "mage/menu",
      This means we should check for mage/menu.js the following locations, in the following priority order (according to the assets fallback rules):
      1. <Magento_Luma_theme_dir>/web/js (current theme JS files)
      2. <Magento_Blank_theme_dir>/web/js (parent theme JS files)
      3. lib/web (library files)
      There is no mage/menu.js in the current theme or parent theme JS files, so the source file for menu component used for the main navigation menu is lib/web/mage/menu.js