how to extend .js and .html files in Magento 2
-
28-09-2020 - |
Question
I'm extending customer address
for these I have to modify/extend vendor/Magento/module-ui
core files.
i.e
root/vendor/magento/module-ui/view/base/web/js/form/components/collection.js
and
root/vendor/magento/module-ui/view/base/web/templates/form/components/collection.html
When I have modified core files it's working fine, But this is not good procedure/idea to extend.
So I have created the vendor name as Magento
in root/app/code/
and I have placed modified above files to same folder in local.
i.e
root/app/code/magento/module-ui/view/base/web/js/form/components/collection.js
and
root/app/code/magento/module-ui/view/base/web/templates/form/components/collection.html
After placing those files I have cleared the cache. But still it's not showing my changes.
I have ran php bin/magento setup:static-content:deploy
command also but no luck.
Could you please suggest me how to do this?
Solution 2
Finally Achieved my self.
Create requirejs-config.js
file from Learning/HelloWorld/view/base and paste below code
var config = {
map: {
'*': {
'Magento_Ui/js/form/components/collection':'Learning_HelloWorld/js/form/components/collection'
}
}
};
Create collection.js
file from Learning/HelloWorld/view/base/web/js/form/components and copy paste core code and modyfie it.
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'underscore',
'mageUtils',
'uiRegistry',
'uiComponent',
'uiLayout',
'Magento_Ui/js/modal/confirm'
], function (_, utils, registry, Component, layout, confirm) {
'use strict';
var childTemplate = {
parent: '${ $.$data.name }',
name: '${ $.$data.childIndex }',
dataScope: '${ $.name }',
nodeTemplate: '${ $.$data.name }.${ $.$data.itemTemplate }'
};
return Component.extend({
defaults: {
lastIndex: 0,
template: 'Learning_HelloWorld/form/components/collection'
},
/* my custom methods */
sendAddress: function (elem) {
var self = this;
self._sendAddress(elem);
},
/* my custom methods */
_sendAddress: function (elem) {
this.bubble('update');
}
});
});
Create collection.html
file from Learning/HelloWorld/view/base/web/template/form/components path and paste core code and modify it
<div class="ui-tabs">
<!-- My Extra html code -->
<button type="button" data-bind="click: $parent.sendAddress.bind($parent, element)">
Send this Address
</button>
</div>
Now run the below commands.
- setup:upgrade
- setup:static-content:deploy
Now it will work.
Feel free to ask if any queries.
OTHER TIPS
One module is registered under one path, that's why it can read from vendor, but cannot from app/code.