Posted on

how to extend default javascript

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.

Leave a Reply

Your email address will not be published. Required fields are marked *