0

I need to Add Jquery Library to header using my custom Module. so that I Create requirejs-config.js file under Vendorname_ModuleName\view\frontend and Its As Below

var config = {
    map: {
        '*': {
            mypluginjs: 'Vendorname_ModuleName/js/mypluginjs'
        }
    }
};

then I added mypluginjs file under view\frontend\web\js named mypluginjs.js

Then I added My js script to phtml as below

<script type="text/javascript">
require(['jquery','mypluginjs '],function($){
    $(window).load(function() {

//code here

    });
});
</script>

but its showing error.I think not loading mypluginjs .what was the issue. is there any way to add custom jquery plugin via module

| improve this question | | | | |
  • have you regenerate the static content ? – Jinesh Mar 12 at 5:29
  • yes.I tried it also reindex and others – srinath madusanka Mar 12 at 5:35
  • Check my answer. – Jinesh Mar 12 at 5:50
  • is my answer helpful to you? – Jinesh Mar 12 at 5:59
1

Simply add to your phtml file

        <script>
          require(
              [
                  'jquery'
              ],
              function($) {
                  $(document).ready(function(){
                    alert("Hello i am here");
                  });
              }
          );
        </script>
| improve this answer | | | | |
  • I already added but its returning error – srinath madusanka Mar 12 at 6:10
  • remove your requirejs-config.js file and what error come ? please show your error – Msquare Mar 12 at 6:20
  • Uncaught ReferenceError: Favico is not defined at argus-all-weather-tank.html:40 at dispatch (jquery.js:5232) at elemData.handle (jquery.js:4884) – srinath madusanka Mar 12 at 6:30
  • please remove all content from phtml and only add this and check it might be somthing wrong with your phtml file.remove your old js call. – Msquare Mar 12 at 6:40
0

Step 1: Move your JS code into Vendor/Module/view/frontend/web/js/test.js

Step 2: Create requirejs-config.js file in Vendor/Module/view/frontend/ with content:

var config = {
map: {
    '*': {
        testjs:     'Vendor_Module/js/test'
    }
}};

Step 3: add this at the end of your template file where you want this JS to be called

<script type="text/x-magento-init">
{
    "*": {
        "Vendor_Module/js/test": {}
    }
}</script>
| improve this answer | | | | |
0

Try this one

requirejs-config.js

  var config = {
    map: {
        '*': {
            mypluginjs: 'Arsenaltech_Customer/js/mypluginjs'               
        }
    }
};

Mypluginjs.js

define([
    "jquery",
    "jquery/ui"
], function($) {
    "use strict";
    $.widget('modulename.customname', {
        _create: function() {
            var yourData = this.options;
            /*this.options contaion all variables which you pass in it for use in your javascript code */
            console.log(this.options); 
            // here you can write your javascript code as your requirement
        }
    });
    return $.modulename.customname;
});

Now you can use anywhere in your template file by below method:

<script type="text/x-magento-init">
    {
        "body" : {
             "mypluginjs": 
                    {

                        "yourvar1": "12", 
                        "yourvar2" : "21"
                    }
        }
    }
</script>
| improve this answer | | | | |
  • no still not loading – srinath madusanka Mar 12 at 6:00
  • can you show my your mypluginjs.js file ? – Jinesh Mar 12 at 6:55
  • I have update my answer please check it. – Jinesh Mar 12 at 7:24

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.