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

Часто потрібно змінити логіку JavaScript коду, який знаходиться у .js файлі. Найпростіший спосіб - переписати js-файл, за допомогою теми. Як переписувати файли view описано у нашому блозі. Це швидкий, але не елегантний спосіб.

Для зміни одного чи декількох методів js-файлу, використовуйте змішувачі (Mixins), які доступні у 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.

Для переписування method1 цього js-файлу, необхідний мінімальний (базовий) модуль Magento 2, у який додайте 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);
        };

    }
);

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

php bin/magento setup:static-content:deploy