Magento 2 - override knockoutjs template located in base folder
-
14-04-2021 - |
سؤال
I need to change the value of the maxinput field in the knockoutjs template vendor\magento\module-ui\view\base\web\templates\form\element\input.html so I have to replace the template with my own template loaded from my module app\code\Company\Base\view\base\web\templates\form\element\input.html
.
So I created a requirejs-config.js file in my module and tried to override the original knockoutjs file:
app\code\Company\Base\view\base\requirejs-config.js:
var config = {
map: {
'*': {
'Magento_Ui/templates/form/element/input':'Company_Base/templates/form/element/input'
}
}
};
...then I cleared the cache, but it is still loading the original template instead of mine.
المحلول
I solved it by using a mixin to (mix-in my code)/(extend the code of) Magento_Ui/js/form/element/abstract.js to replace the value of elementTmpl
to make it load my own template.
app\code\Company\Base\view\adminhtml\web\template\form\element\input.html:
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<input class="admin__control-text" type="text"
data-bind="
event: {change: userChanges},
value: value,
hasFocus: focused,
valueUpdate: valueUpdate,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled,
maxlength: 512
}"/>
app\code\Company\Base\view\base\requirejs-config.js:
Note: You can also place requirejs-config.js to
app\code\Company\Base\view\adminhtml\
, this works as well.
var config = {
config: {
mixins: {
'Magento_Ui/js/form/element/abstract': {
'Company_Base/js/form/element/abstract-ext': true
}
}
}
};
app\code\Company\Base\view\adminhtml\web\js\form\element\abstract-ext.js:
define(['ko'], function(ko) {
'use strict';
return function (Abstract) {
return Abstract.extend({
defaults: {
elementTmpl: "Company_Base/form/element/input"
},
initialize: function() {
this._super();
return this;
}
});
};
});