Use jQuery Plugins in Magento 2 blocks

Question

I'm trying to use jQuery camera inside a page block, but I'm doing something wrong.

I added the camera.min.js into my custom theme folder Theme_folder/Magento_Theme/web/js/camera.min.js

Here's my requirejs-config.js in Theme_folder/Magento_Theme/web/js/requirejs-config.js

var config = {
    map: {
        '*': {
            'camera': './js/camera.min'
        }
    },
    shim: {
        'camera': {
            deps: ['jquery'],
            exports: 'jQuery.camera'
        }
    }
};

And here's the js in the block:

require(['jquery', 'camera'], function(jQuery) {
    jQuery(function(){
        jQuery('#camera_wrap').camera({
            alignmen: 'topCenter',
            height: '36.341%',
            minHeight: '134px',
            loader : false,
            pagination: false,
            fx: 'simpleFade',
            navigationHover:false,
            thumbnails: false,
            playPause: false
        });
    });
});

Nathan Toombs · Accepted Answer · 2016-01-14 23:29:05Z

1

Your requirejs-config.js file is in the wrong directory. It should go directly in your theme directory. If you want to make sure your requirejs-config file is being read properly, you can open the sources tab in your chrome inspector, navigate to pub/static/_requirejs/{area}/{vendor}/{theme}/{locale}/requirejs-config.js. You will see a merged document of all the requirejs-config.js files in magento including yours. If you do a search for "camera" you should see your mapping if everything worked properly.

You should change your js to this

require(['jquery', 'camera'], function(jQuery) {
    return function(){
        jQuery('#camera_wrap').camera({
            alignmen: 'topCenter',
            height: '36.341%',
            minHeight: '134px',
            loader : false,
            pagination: false,
            fx: 'simpleFade',
            navigationHover:false,
            thumbnails: false,
            playPause: false
        });
    });
});

edited Jan 14, 2016 at 23:29

answered Jan 14, 2016 at 21:54

Nathan Toombs

9995 silver badges12 bronze badges

Thanks, Magento 2 documentation is very confusing regarding where each file should be. I moved the requirejs-config.js and now it's loading, but I got this error: jQuery is not defined

Federico Resnizky
– Federico Resnizky

2016-01-14 23:23:40 +00:00
Commented Jan 14, 2016 at 23:23
Thank you for letting us know. Can you point us to any topic in particular that confused you? Where should we add more detail?

Steve Johnson
– Steve Johnson

2016-01-16 15:18:10 +00:00
Commented Jan 16, 2016 at 15:18

Add a comment |

Stack Exchange Network

Use jQuery Plugins in Magento 2 blocks

1 Answer 1

Your Answer

Hot Network Questions

Use jQuery Plugins in Magento 2 blocks

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions