I'm developing a custom module for payment method in Magento 2. Currently, I'm using cc-form.html from vendor directory and module working fine. See below path:
vendor/magento/module-payment/view/frontend/web/template/payment/cc-form.html
Is there any way to override HTML file?
Note: I would like to override it using a custom extension. See below path:
app/code/Namespace/Module/view/frontend/web/template/payment/cc-form.html
Any help would be appreciated. Thank you!
Working solution.
Just create or edit requirejs-config.js file from below path.
/app/code/Namespace/Module/view/frontend/requirejs-config.js
And place below code in requirejs-config.js
var config = {
map: {
'*': {
'Magento_Payment/template/payment/cc-form.html':
'Namespace_Module/template/payment/cc-form.html'
}
}
};
So we can override any html file in this way.
You can just add your cc-form.html file inside your theme payment module.
<mage_dir>/app/design/frontend/{Package}/{themename}/Magento_Payment/web/template/payment/cc-form.html
You can change according to your requirements at above place.
Remove var folder from root and remove pub/static/frontend folder.
You must have run command php bin/magento setup:static-content:deploy
Clear your browser cache and check.
Accepted solution is right, but I copy here the full @AntonGuz answer from the "Stack Overflow" (very well explained):
Yes, there is. You can look in pub static to see how path to static asset constructed.
How it works
Every asset is accessible from the page by it
enter code heres "RequireJS ID". It similar to real path, but varied.For example file
http://magento.vg/static/adminhtml/Magento/backend/en_US/Magento_Theme/favicon.ico.It's real path is
/app/code/Magento/Theme/view/adminhtml/web/favicon.ico. It's RequireJS ID isMagento_Theme/favicon.ico. This means that file could be accessible viarequire("text!Magento_Theme/favicon.ico")or similar command.You can find that RequireJS ID consist with module name and useful part of path (after folder
web).How can I replace a file
So you have file
vendor/magento/module-payment/view/frontend/web/template/payment/cc-form.htmlOn the page it loaded with src as
http://magento.vg/static/frontend/Magento/luma/en_US/Magento_Payment/template/payment/cc-form.htmlSo its RequireJS ID is
Magento_Payment/template/payment/cc-form.htmlSide note: Inside UI components stuff it equals to
Magento_Payment/payment/cc-form. Words "template" and ".html" are added automatically.And now you can replace this file for application via RequireJS config
var config = { "map": { "*": { "Magento_Payment/template/payment/cc-form.html": "<OwnBrand>_<OwnModule>/template/payment/cc-form.html" } } };This code snippet you place in
requirejs-config.jsfile in your module. That is all.
Perhaps it will help somebody to understand as it occurs.
I don't know since which version of Magento2 it is required but if you want to override template from Magento_Ui module, you need to provide path like this:
var config = {
map: {
"*": {
'ui/template/form/element/select.html':'Vendor_Module/templates/form/element/select.html'
}
}
};
Because in this file:
vendor/magento/module-ui/view/base/requirejs-config.js
There is path mapping:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
var config = {
paths: {
'ui/template': 'Magento_Ui/templates'
},
map: {
'*': {
uiElement: 'Magento_Ui/js/lib/core/element/element',
uiCollection: 'Magento_Ui/js/lib/core/collection',
uiComponent: 'Magento_Ui/js/lib/core/collection',
uiClass: 'Magento_Ui/js/lib/core/class',
uiEvents: 'Magento_Ui/js/lib/core/events',
uiRegistry: 'Magento_Ui/js/lib/registry/registry',
consoleLogger: 'Magento_Ui/js/lib/logger/console-logger',
uiLayout: 'Magento_Ui/js/core/renderer/layout',
buttonAdapter: 'Magento_Ui/js/form/button-adapter'
}
}
};