WordPress+require.js jQuery(…).isotope is not a function

3 Views

I’m using require.js within WordPress, and I’ve accomplished to load all vendor and custom scripts from the page, except one file… If I try to load ‘isotope.pkgd.min’ through require js the console shows the error: 

jQuery(...).isotope is not a function

The error comes from a file I’m loading in require.js, called ‘jquery.theme’, which executes this code:

Read More
jQuery('.portfolio-isotope').isotope( 'layout' );
jQuery('.ajax-isotope').isotope( 'layout' );

First of all I thought it was a problem with jquery duplicity(because some plugins use his own jquery version instead of the wp default version), but I solved it, using in require.js config the jquery from default in wp, with this code: 

if (typeof jQuery === 'function') {
    define('jquery', function () { return jQuery; });
}

But that, didn’t solve anything. I’ve seen if I leave the wp isotope default call, and I load another one with require.js,the default one is inside body tag, and the require one is inside the head. Maybe putting the require.js one inside the body tag will solve the problem? but no idea on how to do that.

My require.js config file: 

requirejs.config({
baseUrl: './wp-content/themes/alterna-child/assets/js/',
paths: {
    jquery_ui: 'vendor/jquery-ui/jquery-ui',
    jquery_ui_touch_punch: 'vendor/jquery-ui/jquery.ui.touch-punch.min',
    jquery_ui_slider_pips: 'vendor/jquery-ui/jquery-ui-slider-pips',
    bootstrap: 'vendor/bootstrap/bootstrap.min',
    isotope: 'vendor/isotope/isotope.pkgd.min',
    fancyBox_mousewheel: 'vendor/fancyBox/jquery.mousewheel-3.0.6.pack',
    fancyBox_js: 'vendor/fancyBox/jquery.fancybox.pack',
    fancyBox_helpers_js: 'vendor/fancyBox/helpers/jquery.fancybox-thumbs',
    flexslider_js: 'vendor/flexslider/jquery.flexslider-min',
    csstransforms3d: 'csstransforms3d',
    select: 'vendor/bootstrap-select/bootstrap-select'
},
shim: {
    'bootstrap': {
        deps: ['jquery']
    },
    'isotope': {
        deps: ['jquery']
    },
    'fancyBox_mousewheel': {
        deps: ['jquery']
    },
    'fancyBox_js': {
        deps: ['jquery']
    },
    'fancyBox_helpers_js': {
        deps: ['jquery']
    },
    'flexslider_js': {
        deps: ['jquery']
    },
    'csstransforms3d': {
        deps: ['jquery']
    },
    'jquery_ui': {
        deps: ['jquery']
    },
    'jquery_uitouch_punch': {
        deps: ['jquery','jquery_ui']
    },
    'jquery_ui_slider_pips': {
        deps: ['jquery','jquery_ui']
    },
    'select': {
        deps: ['jquery']
    }
}
});

if (typeof jQuery === 'function') {
    define('jquery', function () { return jQuery; });
}

requirejs(['jquery','bootstrap','isotope','fancyBox_mousewheel','fancyBox_js',
    'fancyBox_helpers_js','jquery_ui','jquery_ui_touch_punch','jquery_ui_slider_pips','select','jquery.theme'], function ($) {
        console.log("It works");
});

P.S: The require js file is loaded in the wp_footer through a function in the ‘functions.php’ child theme.

Post Views: 3

Related posts