В magento2 как и у многих систем для управления файлов есть не один вариант подключения js файлов. В данной заметке мы рассмотрим их.
Вариант 1: использовать requirejs-config.js
Нужно создать файл requirejs-config.js:
#Путь к файлу: app/frontend/[VENDOR]/[THEME]/Magento_[YouModule]/web/requirejs-config.js
Вся конфигурация выполняется в requirejs-config.js файле. Он имеет единственный корневой объект, configкоторый содержит параметры конфигурации, описанные ниже. Все параметры конфигурации являются необязательными и используются только при необходимости. Следующий фрагмент - это образец, requirejs-config.jsописывающий структуру файла. Пример:
var config = { map: { '*': { myScript: 'Magento_[YouModule]/js/myscript' } }, paths: { 'alias': 'library/file', 'another-alias': 'https://some-library.com/file' }, /*эти скрипты будут загружены на все страницы.*/ deps: [ 'Magento_[YouModule]/js/myscript1', 'Magento_[YouModule]/js/myscript2', ], shim: { 'my-library': ['myJSFile'], 'another-library': { deps: ['myJSFile'], exports: 'anotherLibrary' } } config: { // Vendor_Module/js/module-mixinбудет перезаписывать существующие методы Vendor_Module/js/module mixins: { 'Vendor_Module/js/module': { 'Vendor_Module/js/module-mixin': true } }, text: { 'headers': { 'X-Requested-With': 'XMLHttpRequest' } } } }
- map - подключает ваши js файлы. Главная фишка, это то, что через map можно заменить стандартный файл magento2 своим.
- paths - аналогично map, используются для наложения js из модуля реального, но и любой файл JS (даже из URL), HTML шаблоны, и т.д...
- deps - используется для добавления зависимостей. Его можно использовать непосредственно под var config = {}. Добавление модулей в независимой depsконфигурации загрузит указанные модули на всех страницах.
- shim - используется для построения зависимости от библиотеки третьей стороны, поскольку мы не можем изменить его.
- config - дополнительные настройки mixins и text.
- mixins - используется для перезаписи существующих методов в каком-то файле js.
- text - Без Cross Origin Resource Sharing (CORS) невозможно добавить X-Requested-With заголовок в междоменный запрос XHR. Установить этот заголовок и создан данный конфиг, чтобы сообщить серверу, что запрос был инициирован из того же домена.
Вариант 2: X-Magento-Init
Самый простой способ инициализации js в phtml файлах. Измените содержимое любого [FIle].phtml шаблона, чтобы оно соответствовало следующему:
<div id="one" class="foo"> Hello World </div> <div id="two" class="foo"> Goodbye World </div> <script type="text/x-magento-init"> { "*": { "Magento_[YouModule]/js/myscript1":{} } } </script>
Еще один вариант если много конфигов не нужно:
<div id="one" class="foo" data-mage-init='{"Magento_[YouModule]/js/myscript":{}}'> Hello World </div> <div id="two" class="foo"> Goodbye World </div>
Вариант 3: использование макета default_head_blocks.xml
Предположим вам нужно добавить простой js файл.
#Путь к файлу: app/frontend/[VENDOR]/[THEME]/Magento_Theme/web/js/theme.js
Нужно создать макет default_head_blocks.xml:
#Путь к файлу: app/frontend/[VENDOR]/[THEME]/Magento_Theme/layout/default_head_blocks.xml --------------------------------------------------------------------------- #содержимое файла: <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <link src="Magento_Theme::/js/theme.js" /> </head> </page>
Прочее: проверка на уникальность и удаление
Иногда необходимо удалить некоторые CSS и JS со страницы, так как могут возникать конфликты между темой и модулем CSS и JS.
Нужно создать макет default_head_blocks.xml:
#Путь к файлу: app/frontend/[VENDOR]/[THEME]/Magento_Catalog/layout/default_head_blocks.xml --------------------------------------------------------------------------- #содержимое файла: <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <remove src="Magento_Theme::/js/theme.js" /> <remove src="css/styles-m.css" /> <remove src="Magento_Catalog::js/compare.js" /> </head> </page>