Extending / Overriding JS in Magento 2
There is no more skin folder but you can still use themes.
As a proof of concept I used you example with op-checkout-method.js
and this this.
Preconditions:
- Magento2-beta11 installed
- Default theme active (blank).
- No files generated in the
pub/static
folder (remove the pub/static/frontend folder)
Actions:
- Copied the
op-checkout-method.js
file from it's module locationapp/code/Magento/Checkout/view/frontend/web/js/opc-checkout-method.js
to the blank theme toapp/design/frontend/Magento/blank/Magento_Checkout/web/js/opc-checkout-method.js
- edited the clone file and added a
console.log('something')
oralert('something')
in the_create
function of themage.opcCheckoutMethod
widget. - cleared browser cache.
Result:
- When the checkout page loads I see my alert displayed or the text logged in the console.
Related Info:
If I run from cli php dev/tools/Magento/Tools/View/deploy.php
(the script that publishes the static resources) my new js file gets placed in pub/static/frontend/Magento/blank/en_US/Magento_Checkout/js/opc-checkout-method.js
[EDIT]
I found a way to do it via a module.
In [Namespace]/[Module]/view/frontend/requirejs-config.js
add this:
var config = {
map: {
'*': {
'Magento_Checkout/js/opc-checkout-method':'[Namespace]_[Module]/js/opc-checkout-method'
}
}
};
Then create the file [Namespace]/[Module]/view/frontend/web/js/opc-checkout-method.js
with your content.
For testing purposes I cloned the original file and just added again a console.log
in the _create
function.
Also remember to regenerate the public resources for frontend.
Here's the official doc about extending/replacing default JS components: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html
Feedback is welcome!
To use a custom implementation of an existing Magento or custom vendor JS component that's not defined in the requirejs-config.js
copy the custom component source file to your theme JS files:
app/design/frontend/<your-vendor>/<your-theme>/<vendor_module>/web/js/<source_file>