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[
    ], function ($) {
    // ]]>

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:

], function($){

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

    return $.<vendor>.calendar;

Here is the js/tabs.js:

], function($){

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

        _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?


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.

1 Answer 1



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

"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;


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

function ($, ko, Component) {
    'use strict';

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

         * Init
        initialize: function () {
            var self = this;
            // Your custom code here
  • can I do like that ? Only some functions I need to require modify in my custom module. I do that using mixins. But, It's also call in catalog page. I just want to call in my custom module only. magento.stackexchange.com/questions/253507… Can you please help me? Dec 14, 2018 at 6:44
  • It's depend on your current case. If need add more custom to core better copy it to theme area and add your custom code in theme. Don't modify the core file directly. Mixins is another good approach. The last approach is don't extend just add your components only
    – mrtuvn
    Dec 15, 2018 at 6:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.