Часто потрібно змінити логіку 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