I try to override a js file in the magento2 checkout.
I want to override /vendor/magento/module-checkout/view/frontend/web/js/view/form/element/email.js.
So I copied the file in my module to: /app/code/GMyself/Test/view/frontend/web/js/view/form/element/email.js
I did a small change in /app/code/GMyself/Test/view/frontend/web/js/view/form/element/email.js:
/**
* Callback on changing email property
*/ emailHasChanged: function () {
var self = this;
clearTimeout(this.emailCheckTimeout);
if (self.validateEmail()) {
quote.guestEmail = self.email();
checkoutData.setValidatedEmailValue(self.email());
$.cookie("checkoutemail", self.email()); // <--- this is the change
}
this.emailCheckTimeout = setTimeout(function () {
if (self.validateEmail()) {
self.checkEmailAvailability();
} else {
self.isPasswordVisible(false);
}
},
self.checkDelay);
checkoutData.setInputFieldEmailValue(self.email());
},
The other parts of the file are unchanged.
Then I created the /app/code/GMyself/Test/view/frontend/requirejs-config.js:
var config = {
map: {
'*':
{
'Magento_Checkout/js/view/form/element/email.js':'GMyself_Test/js/view/form/element/email.js'
}
}
};
I did run the following commands in this order, after I did changes on the code or reinstalled the module:
sudo mv pub/static pub/static_backup_`date +%Y%m%d_%H%m%S`
sudo /opt/local/bin/php71 -d memory_limit=4G ./bin/magento cache:flush
sudo /opt/local/bin/php71 -d memory_limit=4G ./bin/magento setup:upgrade
sudo /opt/local/bin/php71 -d memory_limit=4G ./bin/magento cache:flush
sudo /opt/local/bin/php71 -d memory_limit=4G ./bin/magento setup:di:compile
My Magento is in developer mode, so I don't need to do the setup:static-content:deploy. But I also tried with the deploy command (with the -f option).
The File is generated in pub/static/frontend/Magento/luma/en_US/GMyself_Test/js/view/form/element/email.js.
In the checkout the original file is loaded, my own email.js is not loaded and is so not in the local ressources of my browser (as I've checked in my Chrome Dev-Console).
The global generated requirejs-config.js which my chrome loads, has the entries I did in my /app/code/GMyself/Test/view/frontend/requirejs-config.js.
I've no errors in the browser console.
As a small test, I also tried to override /vendor/magento/module-checkout/view/frontend/web/js/checkout-data.js with the following entry in requirejs-config.js:
var config = {
"map": {
'*':
{
checkoutData: 'GMyself_Test/js/checkout-data.js'
}
}
};
The checkout-data.js was loacted here: /app/code/GMyself/Test/view/frontend/web/js/checkout-data.js.
The Result was the same as with the email.js file.
Where is my mistake? I can't find it.