Перевизначення та розширення JS-файлів у Magento 2

Часто потрібно змінювати логіку коду JavaScript, розташовану у файлі .js. Найпростіший спосіб – перезаписати js-файл за допомогою теми. Ви можете дізнатися, як перезаписати файли перегляду, у статті про Перевизначення файлів Storeftont у Magento 2 . Це швидкий, але не елегантний спосіб.

Щоб змінити один або кілька методів js-файлу, використовуйте міксини, доступні в RequireJS.

Щоб розширити цей файл:

app/code/VendorName/ModuleName/view/%area%/web/js/folder1/folder2/somefile.js

за допомогою наступного коду:

define(
     [
         'jquery',
         'underscore',
         'ko',
         'uiComponent',
         'uiRegistry',
     ],
     function (
         $,
         _,
         ko,
         Component,
         registry,
     ) {
         'use strict';

        return Component.extend({
             // ...
             method1: function() { /* some code */ },
             method2: function() { /* some code */ }
             // ...
        });
    }
);

%area% – область, де розширюється файл, наприклад: frontend, adminhtml, base.

Щоб перезаписати метод 1, вам потрібно створити Basic модуль у Magento та додайте до нього такі 2 файли:

1. requirejs-config.js

Це файл конфігурації RequireJS, куди додано міксер. Створіть його в папці модуля за таким шляхом:

view/%area%/requirejs-config.js

та додайте цей код:

var config = {
    config: {
        mixins: {
            'VendorName_ModuleName/js/folder1/folder2/somefile' : {
            'My_Module/js/folder1/folder2/somefile-mixin':true
            }
        }
    },
}

2. Сам міксер somefile-mixin.js.

Збережіть його в папці модуля за таким шляхом:

view/%area%/web/js/folder1/folder2/somefile-mixin.js

та додайте наступний код:

define(
     [
         'jquery',
         'underscore',
         'ko',
         'uiComponent',
         'uiRegistry',
     ],
     function (
         $,
         _,
         ko,
         Component,
         registry,
     ) {
         'use strict';

        var mixin = {
             method1: function() { /* my code */ },
        };

        return function (target) {
            return target.extend(mixin);
        };

    }
);

Після збереження змін не забудьте розгортання статичного контенту , виконавши цю команду:

php bin/magento setup:static-content:deploy