Question

我正在使用Magento EE 2.1.1，我需要扩展位于activate的{{1}}方法功能。但我无法通过Magento文档和谷歌搜索找到正确的方法，所以这是我的尝试以及每个问题的原因：

尝试1：
- 创建了以下文件：

namespace_module_dir /视图/前端/网络/ JS /可折叠-mixin.js

lib/web/mage/collapsible.js

创建了requirejs-config文件

namespace_module_dir /视图/前端/ requirejs-config.js

define([
    'jquery'
], function ($) {
    'use strict';
    var mixin = {
        activate: function () {
            if (!this.options.disabled) {
                if (this.options.animate) {
                    this._animate(showProps);
                } else {

// my custom code goes here ...
                    this.content.show();
                }
                this._open();
            }
        }
    };

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

});

问题是：

尝试2：
- 创建了requirejs-config文件

namespace_module_dir /视图/前端/ requirejs-config.js

    var config = {
    config: {
        mixins: {
            'mage/collapsible': {
                '<namespace_module>/js/collapsible-mixin': true
            }
        }
    }
};

问题是： 无论var config = { map: { '*': { collapsible: '<namespace_module>/js/collapsible-map' } } };的内容是什么，它都没有加载（创建了collapsible-map.js文件），甚至认为我可以在自动生成的collapsible-map.js中看到我的requirejs-config.js内容文件由magento和defalut magento collapsible.js文件加载。

尝试3：
- 创建了以下文件：

namespace_module_dir /视图/前端/网络/ JS /可折叠-map.js

requirejs-config.js

创建了requirejs-config文件

namespace_module_dir /视图/前端/ requirejs-config.js

    define([
    'jquery',
    'jquery/ui',
    'mage/collapsible'
], function ($) {
    "use strict";
    $.widget('<namespace_module>.collapsible', $.mage.collapsible, {
        activate: function () {
            if (!this.options.disabled) {
                if (this.options.animate) {
                    this._animate(showProps);
                } else {

                    // custome code goes here ...

                    this.content.show();
                }
                this._open();
            }
        }
    });
    return $.ctv.collapsible;
});

问题是：

调试时发现var config = { map: { '*': { 'mage/collapsible': '<namespace_module>/js/collapsible-mixin' } } };

所以请告诉我我错过了什么，以及最好的方法是什么？：（

感谢inadvance ...

Answer 1

要修复尝试3 ，请将“mage / collapsible”更改为地图中的“可折叠”：

var config = { map: { '*': { 'collapsible': '<namespace_module>/js/collapsible-map' } } };

我认为错误是由循环引用引起的：collapsible-map.js引用了mage / collapsible，而mage / collapsible再次映射到了collapsible-map。别名'collapsible'用于mage / collapsible，它在Theme \ view \ frontend \ requirejs-config.js中配置。因此，您可以将此别名重新映射到您自己的文件，同时引用文件中的真实图像/可折叠。

尝试1和2 错误，因为mixins只能应用于UI组件。这意味着组件必须从uiClass，uiElement，uiCollection或任何其他ui组件扩展。 collapsible.js只是jQuery小部件。

一些有用的链接：

Exteding组件或小部件（不一样！）：http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/custom_js.html

jQuery小部件： https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

Answer 2

mage.collapsible是一个JqueryUi小部件。有关更多信息，请参阅JqueryUi的文档。我宁愿像下面这样做，而不是将核心Magento 2代码中的JS文件复制到主题并修改函数，或者只是用我的替换小部件但只添加一个函数。

这应该可以，[我的主题目录] /web/mage/my-collapsible-mixin.js：

define([
    'jquery',
    'jquery/ui'
], function ($, wrapper) {
    'use strict';

    return function(target) {
        $.widget("mage.myCollapsible", target, {
            activate: function () {
               if (!this.options.disabled) {
                   if (this.options.animate) {
                       this._animate(showProps);
                   } else {
                      // custom code goes here ...
                      this.content.show();
                   }
                   this._open();
               }

               // Or:
               // this._super();
               // if (!this.options.disabled) { .. custom code .. }
            }
        });
    };
});

其他建议＆amp;未经测试：替换以上变量＆＃39;此＆＃39;与＆＃39;目标＆＃39;。

来自[my theme dir]的require-config.js：

var config = {
    config: {
        mixins: {
            'mage/collapsible': {
                'mage/my-collapsible-mixin': true
            }
        }
    }
};

Answer 3

要覆盖collapsible.js，这对我有用：

复制原件发件人：lib/web/mage/collapsible.js 收件人：app/design/frontend/VENDOR/THEME/web/js/collapsible-custom.js

注意：collapsible.js的复制版本已重命名为collapsible-custom.js

在我们的主题目录中添加一个requirejs-config文件，并将原始collapsible.js文件映射到我们的新自定义文件。 app/design/frontend/VENDOR/THEME/requirejs-config.js
```
var config = {
    "map": {
        "*": {
            "mage/collapsible": "js/collapsible-custom"
        }
    }
};
```
刷新您的页面并检查检查器，以查看我们的collapsible-custom.js是否已加载。

Answer 4

你的 requirejs-config.js 没问题。对于 mixin，您可以执行以下操作：

define([
    'jquery'
], function ($) {
    'use strict';

    return function(widget) {
        $.widget('mage.collapsible', widget, {
            activate: function () {
               if (!this.options.disabled) {
                   if (this.options.animate) {
                       this._animate(showProps);
                   } else {
                      // custom code goes here ...
                      this.content.show();
                   }
                   this._open();
               }
            }
        });

        return $.mage.collapsible;
    };
});

无法覆盖magento 2

4 个答案: