0

I am bit new to requirejs and currently learning AMD pattern in requirejs.I want to use custom third-party jquery libraries in magento.

I have two questions:

  1. How to use jquery scripts that are dependent on newer version of jquery as Magento comes preinstalled only with jquery v-1.12.4.Whenever I want to use libraries that depends on version 3.3.1 I can't use them.

  2. How to define those third party libraries as AMD module so that I can use them in any template file?

After doing some googling, I came to know that to define any component as dependent on jquery I have to use shim config of requirejs.For example here is my code

var config = {
            'map': {
                '*': {
                    'somecomponent': 'js/somecomponent'
                }
            },
            'shim': {
                'somecomponent': {
                    deps: ['jquery']
                }
            }
 }

I have done all these things and still I can't use the function from somecomponent.Is it that to use code from somecomponent.js , I have to use define inside somecomponent.js and return/export some object so as to use in template files?

Is it that I have to do modifications inside somecomponent.js jquery library? If yes then what?

Script inside template looks like below.

<script type="text/javascript">
    require(['jquery','somecomponent'],function($, somecomponent) {
        somecomponent.init({
            //options object
        })
    })
</script>

And browser is giving an error- Uncaught TypeError: Cannot read property 'init' of undefined

Note:- Somecomponent is already using $ inside it.

0

For example, if you place the js in app/code/Vendor/Module/view/frontend/web/js/somecomponent.js, you can call this js in requirejs like below

<script type="text/javascript">
requirejs(['Vendor_Module/js/somecomponent'], function(some){
      //remaining code.........
});
</script>
  • I have put somecomponent.js directly at theme level directory i.e. inside <theme_dir>/web/js/somecomponent.js and requirejs-config.js in <theme_dir>/ directly. – Shashank Bhatt Oct 26 '18 at 13:07
0

If you have init function inside your js file just try this one.i think this one work. Because i also have used this in one of my module.

If not work!! can you show your js code here !! so will understand better.

require(['jquery','somecomponent'],
        function ($) {
            $(document).ready(function () {
       });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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