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 location app/code/Magento/Checkout/view/frontend/web/js/opc-checkout-method.js to the blank theme to app/design/frontend/Magento/blank/Magento_Checkout/web/js/opc-checkout-method.js
  • edited the clone file and added a console.log('something') or alert('something') in the _create function of the mage.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>