1

I'm using Magento 2 Porto theme and I relocate the position of some header elements like language selector etc. its working fine sometimes but after removing the browser cache its showing following js errors:

SCRIPT438: Object doesn't support property or method 'widget'

SCRIPT438: Object doesn't support property or method 'stellar'

HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).

SCRIPT5007: Unable to get property 'timepicker' of undefined or null reference

SCRIPT438: Object doesn't support property or method 'swMegamenu'

SCRIPT438: Object doesn't support property or method 'owlCarousel'

when I refresh it again then all the errors were gone and the page works fine once again. On the Internet Edge its showing JS errors all the time. I tried to upload the backup files but still seeing the same issue. Any one can help me to fix this issue

Thanks!

4
  • i have the same issue in developer mode, but in production mode with js and css merged it works correctly.
    – LucScu
    Jul 17, 2017 at 13:55
  • Does this happen if you revert back to the Blank theme? If not you should be asking the theme developers for assistance, I don't have a good impression of the theme as people are always running into issues with it.
    – Ben Crook
    Jul 17, 2017 at 14:02
  • I am facing issues with porto theme. Jul 19, 2017 at 7:46
  • @HimanshuMacrew have you found any solution for this? Actually I am facing this type of issue with dotdotdot.js plugin.
    – Knight017
    Sep 18, 2018 at 11:42

1 Answer 1

1

This is a known error in the Porto theme (see more here https://themeforest.net/item/porto-ultimate-responsive-magento-theme/9725864/comments?page=141) , if you don't have experience with RequireJS it's best if you ask assistance from the theme developer.

The error is trown because of incorrect Javascript use in the static blocks used by the Porto theme. You should check all the JS resources in the static blocks and pages (for example, the homepage and all the Owl sliders).

Markup should be like this (owl slider example):

        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            $("#featured_product .owl-carousel").owlCarousel({
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                margin: 10,
                nav: true,
                navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
                dots: false,
                navRewind: true,
                animateIn: 'fadeIn',
                animateOut: 'fadeOut',
                loop: true,
                responsive: {
                    0: {
                        items:2
                    },
                    768: {
                        items:3
                    },
                    992: {
                        items:4
                    },
                    1200: {
                        items:5
                    }
                }
            });
        });

Example RequireJS file (app/design/frontend/Vendor/Theme/requirejs-config.js):

var config = {
    paths: {
        'owl':                  'Magento_Theme/owl.carousel/owl.carousel',
        'stellar':              'Magento_Theme/js/jquery.stellar.min'

    },
    shim: {
        'owl': {
            deps: ['jquery']
        },
        'stellar': {
            deps: ['jquery']
        }
   }
};

Reading material:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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