0

I am trying to load 2 third party js files in my module,

Followed below steps.

Vendor/Module/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

<body>
    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Template" 
            name="mobile-megamenu.file" 
            before="-" 
            template="Vendor_Module::custom.phtml"
        />
    </referenceContainer>  
</body>

Vendor/Module/view/frontend/templates/custom.phtml

<div id="dl-menu" class="dl-menuwrapper">
                    <button class="dl-trigger">More</button>
                    <ul class="dl-menu">
                        <li>
                            <a href="#" class="levelTwo">Test</a>
                            <ul class="dl-submenu">
                             <li>Test </li>
                              <li>Test </li>
                               <li>Test </li>
                                <li>Test </li>
                    </ul>
                 </div>

<script>    
    require([
        "jquery",
        "dlmenu",
        "modernizr"
    ], function ($) {

       $(document).ready(function(){

           $( '#dl-menu' ).dlmenu({
                    animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
            });           
            $("button.dl-trigger").click(function(){
                $("ul.extra-links").toggle();
            });
        });
    }); 

 </script>

Vendor/Module/view/frontend/requirejs-config.js

var config = {
   map: {
      '*': {
      dlmenu: 'Vendor_Module/js/jquery.dlmenu',
      modernizr:'Vendor_Module/js/modernizr.custom'
     }
   }
};

I have Moved both the js files here,

app/code/Vendor/Module/view/frontend/web/js/

I am getting the following errors in console.

require.js:166 Uncaught Error: Script error for: dlmenu.

Uncaught ReferenceError: Cannot read property 'prefixed' of undefined

Can someone help me on this please. Thanks!!

2

I think you have an issue with your requirejs-config.js file, it should be :

var config = {
    paths: {
        dlmenu: 'Vendor_Module/js/jquery.dlmenu',
        modernizr:'Vendor_Module/js/modernizr.custom'
    },
    shim: {
        "dlmenu": ["jquery"],
    }
};

You can use deps instead of paths depending on your need. Shim is used to load jquery before dlmenu.

2
  • Hi @Taschert, thanks for the answer, okay I will check it, have u tried it? I have treis it before but didn't work for me – Manjunath Feb 29 '20 at 1:36
  • Thanks @Taschert, its worked – Manjunath Mar 2 '20 at 6:49

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.