В 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>