EugeneMir.com
Блог программиста про IT и создании сайтов

Как правильно подключать js в Magento 2

Как правильно подключать js в Magento 2
157Magento 2

В Magento 2 как и у многих систем для управления файлов есть не один вариант подключения 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 можно заменить стандартный файл magento 2 своим.
  • 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>
Web-Inside24