0

I'm new to magento 2 and trying to get cycle 2 working on a custom theme but getting jQuery not defined error every so often.

Sometime the page will load correctly, then other times will throw the jQuery not defined error in the console.

Here is my requirejs-config.js file

var config = {
paths: {
    'foundation': 'js/bower_components/foundation-sites/dist/js/foundation',
    'owlcarousel': 'js/owl.carousel.min',
    'cycle2': 'js/jquery.cycle2.min',
    'cycle2carousel': 'js/jquery.cycle2.carousel.min',

},
shim: {
    "foundation": ["jquery"],
    "owlcarousel": ["jquery"]
}

};

then in the phtml file i have this:

<script>

require(["jquery","foundation","owlcarousel","cycle2","cycle2carousel"], function ($) {

    $(document).foundation();

    $(".owl-carousel").owlCarousel();

    $('.home-promo-pods').owlCarousel({
        loop: false,
        margin: 30,
        nav: true,
        navText: [
            "<i class='fa fa-chevron-left'></i>",
            "<i class='fa fa-chevron-right'></i>"
        ],
        autoplay: true,
        dots: true,
        responsiveClass: true,
        responsive: {
            0: {
                items: 1,
                margin: 16
            },
            600: {
                items: 3,
                margin: 15
            },
            1000: {
                items: 3
            }
        }
    });

    $('.home-story-pods').owlCarousel({
        loop: false,
        margin: 30,
        nav: true,
        navText: [
            "<i class='fa fa-chevron-left'></i>",
            "<i class='fa fa-chevron-right'></i>"
        ],
        autoplay: true,
        dots: true,
        responsiveClass: true,
        responsive: {
            0: {
                items: 1,
                margin: 16
            },
            600: {
                items: 3,
                margin: 15
            },
            1000: {
                items: 3
            }
        }
    });

    $('.home-review-pods').owlCarousel({
        loop: false,
        margin: 30,
        nav: true,
        navText: [
            "<i class='fa fa-caret-left'></i>",
            "<i class='fa fa-caret-right'></i>"
        ],
        autoplay: true,
        dots: true,
        responsiveClass: true,
        responsive: {
            0: {
                items: 1,
                margin: 16
            },
            600: {
                items: 3
            }
        }
    });
});

0

you should add shim for cycle too

shim: {
"cycle2": ["jquery"],
"cycle2carousel": ["jquery"]
}

Widget jquery without load via AMD should be add to shim as dependency

Clear cache

rm -r var/cache
rm -r pub/static/_requirejs
rm -r pub/static/frontend
magento:static-content:deploy again if not use developer mode
0

Use the shim property in this way:

   shim: {
        'cycle2': {
            deps: ['jquery'],
        }
    }

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.