1

I'm using the Porto Theme (of course - Porto is making trouble), and I randomly get console errors for both $(...).owlCarousel is not a function and $(...).stellar is not a function.

under design/porto_child I created requirejs-config.js which looks like this

var config = {
    paths: {
        'js/jquery.stellar.min':'js/jquery.stellar.min',
        'owl.carousel/owl.carousel.min': 'Smartwave_Porto/js/owl.carousel.min'
    },
    shim: {
        'js/jquery.stellar.min': {
            deps: ['jquery']
        },
        'owl.carousel/owl.carousel.min': {
            deps: ['jquery']
        },
    },
    mixins: {
        'mage/collapsible': {
            'js/collapsible-mixin': true
        }
    }
};

This didn't change anything.

This is what's calling the Stellar function

require([
    'jquery',
    'js/jquery.stellar.min'
], function ($) {
    $(document).ready(function(){
        $(window).stellar({
            responsive: true,
            scrollProperty: 'scroll',
            parallaxElements: false,
            horizontalScrolling: false,
            horizontalOffset: 0,
            verticalOffset: 0
        });
    });
});

Any idea what else I can do?

Thank you

Improve this question
1

1 Answer 1

Reset to default
1
+50

Porto is already loading owl carousel in an inline in the Smartwave_Porto\templates\html\head.phtml template so you don't really need to require it again in your child theme to use it.

I recommend extending porto's head.phtml in your child theme and removing the inline require config. Replace this with a requirejs-config.js

var config = {
    config: {
       paths:{
            'parallax': 'js/jquery.parallax.min',
            'owlcarousel': 'owl.carousel/owl.carousel',
            'owlcarousel_thumbs': 'owl.carousel/owl.carousel2.thumbs',
            'imagesloaded': 'Smartwave_Porto/js/imagesloaded',
            'packery': 'Smartwave_Porto/js/packery.pkgd',
            'floatelement': 'js/jquery.floatelement',
            'stellar':'js/jquery.stellar.min'
        },
        shim:{
            'parallax': {
              deps: ['jquery']
            },
            'owlcarousel': {
              deps: ['jquery']
            },
            'owlcarousel_thumbs': {
              deps: ['jquery','owlcarousel']
            },
            'packery': {
              deps: ['jquery','imagesloaded']
            },
            'floatelement': {
              deps: ['jquery']
            },
            'stellar': {
              deps: ['jquery']
            }
        }
};

The only other time I have seen similar random console errors is whilst bundling js. Are you using any bundling or M2 js optimiser?

Improve this answer
11
  • Not using any bundling. I'll test the carousel
    – web master
    Mar 1, 2021 at 17:08
  • I see a bundle file showing up in pub/static even though I have bundling turned off in my settings.
    – web master
    Mar 1, 2021 at 18:03
  • Also check how your source js for stellar are wrapped up - compare them with the js included with porto as an example - although you said the errors are random - so the js does work sometimes?
    – paj
    Mar 1, 2021 at 18:03
  • Yes. Sometimes it works. When it does, everything works fine but it's too inconsistent
    – web master
    Mar 1, 2021 at 18:11
  • Delete the bundle file I guess, or at least check your console to see if it is being loaded. Actually the console error will tell you which js file is throwing the error, that would be the bundle file if it is loaded. The stellar parallax plugin is 8 years old! I am sure porto has a built in parallax.
    – paj
    Mar 1, 2021 at 18:12

Your Answer

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

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