Magento – how to extend default javascript

extensionsjavascriptmagento-2.1magento2requirejs

I try to extend standard magento javascript configuration but I just get nothing.

I'm following this:
http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/custom_js.html
and this:
http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/widgets/widget_calendar.html

To do so in my theme I placed a requirejs-config.js like so:

var config = {
    map: {
        '*' : {
            'myScript1' : 'js/my_script_1',
            'mage/calendar' : 'js/calendar',
            'mage/tabs' : 'js/tabs'
        }
    }
};

my_script_1.js looks roughly like so:

define(['jquery','mage/tabs', 'domReady!'], function ($) {
    $.fn.myFunction = function () {
        // some code ...
    }
});

I can then access that function in my product_page.phtml like so:

<script>// <![CDATA[
    require([
        'jquery',
        'scrollToTarget',
        'domReady!'
    ], function ($) {
        $('.foo').myFunction();
    });
    // ]]>
</script>

This works well.
Now I want to do roughly the same in the other two files. But here I want to extend existing functionality.

Here is the js/calendar.js:

define([
    'jquery',
    'jquery/ui',
    'mage/calendar'
], function($){

    $.widget('<vendor>.calendar', $.mage.calendar, {
        calendarConfig: {
            showWeek: false
        }
    });

    return $.<vendor>.calendar;
});

Here is the js/tabs.js:

define([
    'jquery',
    'jquery/ui',
    'mage/tabs'
], function($){

    $.widget('<vendor>.tabs', $.mage.calendar, {
        /**
         * Instantiate collapsible
         * @param element
         * @param index
         * @param active
         * @param disabled
         * @private
         */
        _instantiateCollapsible: function (element, index, active, disabled)   {
          console.log('fooooo');
        },

        _myFunction123: function (foo) {
            return foo;
        }
    });

    return $.<vendor>.tabs;
});

But both extensions (calendar and tabs) don't work. The calendar still shows the weeks and that console.log() in tabs.js is never triggered.

What am I doing wrong here? How do I have to extend this?

EDIT:

So at least the calendar config can be changed like this.
Overwrite app/design/frontend/<vendor>/<theme>/Magento_Theme/templates/js/calendar.phtml
with the original files from Magento itself and change options there.
But this does not reflect the way described in the docs.

Best Answer

Widgets

If files are component or widget you can use following way to extend

Extend mage/tabs (original widget of magento)
File locate in lib/web/mage/tabs

"map": {
      '*': {
          "tabs": "js/mage/tabs", //Everytime tabs called magento will get file in your theme  
      }
},

Now in your js be extended

define([
"jquery",
"jquery/ui",
"mage/tabs" <== widget will use for extend
], function($){
  "use strict";

  $.widget("yournamespace.tabs", $.mage.tabs, {

    /**
     * {@inheritdoc}
     */
    _create : function () {
        this._super(); // Use super method for call parent functions 

    },


   });

  return $.yournamespace.tabs;
});

Components

Example: Magento_Customer/js/view/authentication-popup.js Used for login popup when customer checkout

define(
[
    'jquery',
    'ko',
    'Magento_Customer/js/view/authentication-popup'
],
function ($, ko, Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Vendor_Module/authentication-popup'
        },

        /**
         * Init
         */
        initialize: function () {
            var self = this;
            this._super();
            // Your custom code here
        }
    });
}
);
Related Topic