Magento – Extending/Overriding base JavaScript 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.

Yes this is possible and quite easy to do.

On the layered navigation template you have a data-mage-init attribute on the element that contains the accordion where you can filter by various product attributes.

<div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": false, "multipleCollapsible": false}}'>

You can see the call to accordion with options assigned to it. In this attribute, "accordion" is a requirejs mapping that points to the accordion file. You can find the actual mapping in vendor/magento/module-theme/view/frontend/requirejs-config.js.

To create your own mapping you must create your own requirejs-config.js file in the view/[frontend|base|adminhtml] directory. That file will look like this:

var config = {
    map: {
        "*": {
            "fadeInAccordion": "Namespace_Module/js/fade-in-accordion"
        }
    }
};

If you wanted your widget to be used globally, you would simply change "fadeInAccordion" to "accordion" and your widget would be used everywhere an accordion was initialized using the "accordion" mapping. This should show you the power and flexibility using require-js mappings provide over requiring a script by path.

Now you must create the fade-in-accordion.js file that fadeInAccordion maps too. That file will look like this:

<!-- language: lang-js -->
define([
    "jquery",
    "mage/accordion"
], function($){
    "use strict";

    $.widget("Namespace_Module.fadeInAccordion", $.mage.accordion, {
        activate: function () {
            if (!this.options.disabled) {
                if (this.options.animate) {
                    this.content.fadeIn();
                } else {
                    this.content.show();
                }
                this._open();
            }
        },
        deactivate: function () {
            if(this.options.animate) {
                this.content.fadeOut();
            } else {
                this.content.hide();
            }
            this._close();
        }
    });

    return $.Namespace_Module.fadeInAccordion;
});

The first parameter in the $.widget() function is arbitrary but it must match the return statement. The second parameter is the object you are inheriting. The third parameter is where you can create new functions or override inherited functions. The activate and deactivate are both inherited from the collapsible widget so you can edit/override them in your own widget.

To use your new widget you must create or edit a template and reference your js file either using the path or the mapping. Here is an example of overriding the layered navigation element to use your new widget.

<div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"fadeInAccordion":{"openedState": "active", "collapsible": true, "active": false, "multipleCollapsible": false}}'>

It is the same accordion as before but this one will fadein/out hidden containers instead of hide and show them.

This page on the Magento 2 devdocs will show you more info if needed: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_practice.html