how to extend default javascript












4














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.










share|improve this question
















bumped to the homepage by Community yesterday


This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.




















    4














    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.










    share|improve this question
















    bumped to the homepage by Community yesterday


    This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.


















      4












      4








      4


      3





      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.










      share|improve this question















      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.







      magento2 magento-2.1 javascript extensions requirejs






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited May 10 '17 at 12:59

























      asked May 10 '17 at 8:14









      steros

      777629




      777629





      bumped to the homepage by Community yesterday


      This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.







      bumped to the homepage by Community yesterday


      This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
























          1 Answer
          1






          active

          oldest

          votes


















          0














          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
          }
          });
          }
          );





          share|improve this answer





















          • 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?
            – Rohan Hapani
            Dec 14 '18 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 '18 at 6:00











          Your Answer








          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "479"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f173760%2fhow-to-extend-default-javascript%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          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
          }
          });
          }
          );





          share|improve this answer





















          • 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?
            – Rohan Hapani
            Dec 14 '18 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 '18 at 6:00
















          0














          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
          }
          });
          }
          );





          share|improve this answer





















          • 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?
            – Rohan Hapani
            Dec 14 '18 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 '18 at 6:00














          0












          0








          0






          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
          }
          });
          }
          );





          share|improve this 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
          }
          });
          }
          );






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered May 25 '17 at 8:30









          mrtuvn

          1,7001528




          1,7001528












          • 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?
            – Rohan Hapani
            Dec 14 '18 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 '18 at 6:00


















          • 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?
            – Rohan Hapani
            Dec 14 '18 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 '18 at 6:00
















          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?
          – Rohan Hapani
          Dec 14 '18 at 6:44






          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?
          – Rohan Hapani
          Dec 14 '18 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 '18 at 6:00




          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 '18 at 6:00


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Magento Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f173760%2fhow-to-extend-default-javascript%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          1300-talet

          1300-talet

          Display a custom attribute below product name in the front-end Magento 1.9.3.8