無法覆蓋magento 2中的collapsible.js

我正在使用Magento EE 2.1.1，並且我需要擴展位於lib/web/mage/collapsible.js中的activate方法功能。但我不能找到Magento的文檔和谷歌搜索的正確方法，所以這裏是我的嘗試，什麼是對每個問題：無法覆蓋magento 2中的collapsible.js

嘗試1：
- 創建以下文件：

namespace_module_dir /視圖/前端/網絡/ JS /可摺疊mixin.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); 
    }; 

});

創建requirejs-config文件

namespace_module_dir /視圖/前端/ requirejs-config.js

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

的問題是：

嘗試2：

創建requirejs-config文件

namespace_module_dir /視圖/frontend/requirejs-config.js

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

問題是： 不管是什麼collapsible-map.js的內容，它沒有得到加載（創建可摺疊map.js文件），甚至以爲我可以看到我在自動requirejs-config.js內容生成requirejs-config.js文件由magento和defalut magento collapsible.js文件加載。

嘗試3：

創建以下文件：

namespace_module_dir /視圖/前端/網絡/ JS /可摺疊地圖。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; 
});

創建requirejs-config文件

namespace_module_dir /視圖/前端/ requirejs-config.js

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

問題是：

在那裏進行調試發現typeof $.mage.collapsible = undefined

所以請告訴我，我錯過了什麼，什麼是遵循的最佳途徑？ :(

感謝inadvance ...

來源

2016-11-21 rramiii

要解決您的嘗試3，在地圖上改變 '法師/可摺疊' 只是 '摺疊'：

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/

來源

2016-11-22 12:04:12 ma1ao

mage.collapsible是jQueryUI的小部件。欲瞭解更多信息，請參閱JqueryUi的文檔。我寧願這樣做，而不是從核心Magento 2代碼複製JS文件到主題和修改函數，或者只是用我的替換小部件，但只添加一個函數。

這應該工作，在[我的主題DIR] /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 .. } 
      } 
     }); 
    }; 
});

附加建議&未測試：代替上面 '目標' 變量 '這個' 。

而且在要求-config.js從[我的主題DIR]：

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

來源

2017-05-13 14:08:54 obscure

無法覆蓋magento 2中的collapsible.js

回答

相關問題