6

I am using a custom theme called Porto for Magento 2.

I have found an issue where when I load the page with dev tools enabled and having disable cache checked, a number of js errors pop up.

Most of the errors are one of:

Uncaught TypeError: $(...).swMegamenu is not a function
Uncaught TypeError: $(...).owlCarousel is not a function
Uncaught TypeError: Cannot read property 'timepicker' of undefined

The reason is that the libraries these function calls depend on are not loaded yet, but why is that surely requirejs would have ensured the function is only run once the js libraries have been downloaded.

Looking at one of the errors is:

<script type="text/javascript">
    require([
        'jquery',
        'Smartwave_Megamenu/js/sw_megamenu'
    ], function ($) {
        $(".sw-megamenu").swMegamenu();
    });
</script>

With template hints we track the code to: app/design/frontend/Smartwave/porto/Smartwave_Megamenu/templates/topmenu.phtml

So Smartwave_Megamenu/js/sw_megamenu is not loaded. When the function is called.

How can I fix this issue? As you have to reload the page once all the assets have been downloaded for the megamenu and owlslider etc. to actually work.

Update: The library is definitely loaded as when I:

console.log(require.defined("Smartwave_Megamenu/js/sw_megamenu"));

It returns true

After some more investigation it turns out that function is not defined in jquery at that point:

if(!$.isFunction($.fn.swMegamenu)) will fail

As in swMegaMenu.js extending jquery has not happened at that point:

$.fn.swMegamenu = function() {
        $(".navigation.sw-megamenu li.classic .submenu, .navigation.sw-megamenu li.staticwidth .submenu, .navigation.sw-megamenu li.classic .subchildmenu .subchildmenu").each(function(){
            $(this).css("left","-9999px");
            $(this).css("right","auto");
        });
  • 1
    @TejabhagavanKollepara I don't know how this can be a duplicate of that question. Please be careful and accurate in flagging as duplicate. This will not help improve the site – 7ochem Feb 8 '17 at 14:49
5

Finally this is a solutions that works for me.

https://themeforest.net/item/porto-ultimate-responsive-magento-theme/9725864/comments?page=293#comment_16606311

"Kroellie

Finally figured out the solution for javascript messages:

Uncaught TypeError: $(...).swMegamenu is not a function
Uncaught TypeError: $(...).stellar is not a function
Uncaught TypeError: $(...).owlCarousel is not a function
Uncaught TypeError: $.widget is not a function

If you suffer the same, do this:

create a requirejs-config.js in the root of the child theme

app/design/frontend/Smartwave/porto_child and put in the following:
 var config = {
    shim: {
        jquery: {
            exports: '$'
        },
        'Smartwave_Megamenu/js/sw_megamenu':
            {
                deps: ['jquery']
            }, 
        'owl.carousel/owl.carousel.min':
            {
                deps: ['jquery']
            },
        'js/jquery.stellar.min': 
            {
            deps: ['jquery']
            },
        'js/jquery.parallax.min':
            {
            deps: ['jquery']
            }
    }
};

And change the entries:

    <script src="jquery.js" />
    <script src="bootstrap/js/bootstrap.min.js" />
    <script src="fancybox/js/jquery.fancybox.js" />

To:

    <remove src="jquery.js" />
    <remove src="bootstrap/js/bootstrap.min.js" />
    <remove src="fancybox/js/jquery.fancybox.js" />

Within file:

app/design/frontend/Smartwave/porto_child/Magento_Theme/layout/default_head_blocks.xml

Tada! No more need for merging javascripts, no more javascript errors! I have no need for the fancybox, turned it off, but if you do require it, I guess it should be included in the requirejs as well. "

1

If you've properly defined your js files in requirejs-config.js, they should be loaded when you require them. Then you need to pass the swMegamenu object to the function, for it to able to use it.

<script type="text/javascript">
    require([
        'jquery',
        'Smartwave_Megamenu/js/sw_megamenu'
    ], function ($, swMegamenu) {
        $(".sw-megamenu").swMegamenu();
    });
</script>
  • I updated the question with extra info – Stevie G Jan 26 '17 at 13:09
1

Waiting until the page has fully loaded may also help, to do this just add domReady! as a dependency:

define(['jquery', 'domReady!'], function ($) {
        'use strict';
        // Your code here
    }
);
0

As far as I know, as pointed out by @oscarpas, requirejs-config.js is the issue. If you look for the requirejs config files in the modules inside Smartwave, you most probably won't find any.

The config files are needed to define dependencies in requirejs. (Like how JQuery plugins are dependent on JQuery being included before those plugins). Because of which, when JS files that require JQuery are loaded, they won't find JQuery.

Look into this answer to create a proper requirejs-config.js file.


And if you're looking for quick fix, just bundle and merge all the JS from the backend Developer configurations. That'll make sure that jQuery is loaded before those other files are loaded. At least that's what the Porto theme's demo seems to be doing.

  • Ok but even if I add the shim for the dependency it does not work. I don't know why. – Stevie G Jan 26 '17 at 19:58
0

With some of the libraries I tried to use lately, some of them wont work when using a shim in my requirejs-config.js. So in those cases i have made the assumption there is something in the library that is conflicting with how require creates the wrapper for the dependencies. For me it was Colorbox.

So i just wrapped the .js files themselves with a require statement.

require([
    'jquery'
], function ($) {

...the default file content...

});

This post is basically having the same issue, might be worth a look.

Magento 2: colorbox jquery not working

0

i don't know if this is the right answer.

please check your imagesloaded.js, porto using version 3.1.4 in skin\frontend\smartwave\porto\js\lib folder, you can check it.

when i change it with version 4.1.4 packaged min version and the problem gone. with this version imagesloaded.pkgd.min.js

in magento 1.9.3.7 i found same problem, js error when i merge in developer menu. you can try it, i say again maybe this is not the answer :D

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.