
Configurations at the theme module level for the ancestor themes.
To make configurations more precise and specific to different modules and themes, requirejs-config.js files can be placed in different locations depending on your needs.Īll configurations are collected and executed in the following order: 1st Element 2nd Element 3rd Element 4th Element 5th Element 6th Element 7th Element 8th Element require (, function ( $ ) ) Also add both files to /web/css/source/_extend.less. To include a 3rd party library and use it within the entire website (using the Slick JS Library as an example):ĭownload the library and copy to the /web/js folderĬopy slick.less and slick-theme.less to the /web/css/source folder. Including third-party JavaScript libraries Here and are the currently applied in your instance theme and locale.įor the frontend area, the equivalent configuration is located in app/code/Magento/Theme/view/frontend/layout/default.xml.
File published to pub/static: pub/static/frontend/Magento///Magento_ConfigurableProduct/js/configurable.js. File actual location: app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js. JS resources are accessed using relative paths. We recommend specifying JavaScript resources in the templates rather than in the layout updates, to ensure that the resources are available for body of a page. Do not put custom JS files in the `lib/web` directory. The library level can only contain core Magento resources. Resources added here are available for inheriting themes. Resources added here are available for themes. Theme level, for a particular module ( /_/web). If the module is enabled, resources added here are available in other modules and themes. Resources located here are available in any place within Magento. In Magento, you can find Javascript components on the following levels: Explore JavaScript resources JS resources location RequireJS improves the perceived page load time because it allows JavaScript to load in the background in particular, it enables asynchronous JavaScript loading. To address the problem of slow page loads, we exclude JavaScript from the page headers and we added the ability to use the RequireJS library.
This topic describes general concepts of how JavaScript (JS) components are organized in Magento.