3

I am trying to bring banner scroll in magento2. I am using owl carousel for this purpose. Everything have done and implemented and is showing in firefox without any errors. But when checked in chrome, i found jquery not defined error. After some diggings, i found we need to use call it as "require" to trigger jquery. So i have modifed the js and still firefox is rendering everything correctly, but in chrome its still the issue. Script currently i have

require([ 'jquery', 'jquery/ui'], function($){

   $("#owl-demo").owlCarousel({
        items: 1,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        dots: false,
        nav: true,
        navRewind: true,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        loop: true
    });

});

I have tried different kinds, but every time chrome is giving me this error see

could anybody assist me in this? Thanks.

3
  • plz display your requirejs-config.js Commented Feb 25, 2016 at 6:41
  • I have not written that js. I have just tried to call a phtml file in homepage using below {{block class="Magento\Framework\View\Element\Template" name="test_file" template="Magento_Theme::html/test.phtml"}} that test.phtml file contain above js. Commented Feb 25, 2016 at 6:49
  • you have to defined owlCarousel js inside requirejs-config.js Commented Feb 25, 2016 at 7:08

3 Answers 3

11

Try this

require([ 'jquery', 'jquery/ui'], function($){ 
$(document).ready(function($) {
   console.log('running');
   // your script
});});
1
  • 1
    This is valid answer, This is not a comment. Commented Dec 2, 2016 at 8:41
8

I have the same issue and i have fix it by following solution. please try it.

Step 1:
Please open owl.carousel.js file and add below code at the top of actual jquery(owl.carousel.js) script

define([
    'jquery'
], function () {

and now add the end bracket at the end of the jquery(owl.carousel.js) file.

});

its done for owl.carousel.js...

Step 2:
Now please create one file at root(Namespance_Module) of the extensions. Name: requirejs-config.js

and please add this code

var config = {
    map: {
        '*': {
            owlcarousel: 'Namespance_Module/js/owl.carousel'
        }
    }
};

Step 3:
Now in your phtml file (template file) please write code as per below:

require([ 'jquery', 'owlcarousel'], function(){
   jQuery(document).ready(function () {
      jQuery("#owl-demo").owlCarousel({
        items: 1,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        dots: false,
        nav: true,
        navRewind: true,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        loop: true
      });
   });
});
4
  • i am not created a module. i have done a phtml file and called inside Magento_Theme template and called inside homepage page. where should i put that requirejs-config.js ? Commented Feb 26, 2016 at 7:38
  • In default Magento 2, you will get this file at below location. [Magento_root]/vendor/magento/module-theme/view/frontend/requirejs-config.js So you can create same file in your current theme directory. Let me know if you still require my help.
    – mapaladiya
    Commented Feb 26, 2016 at 8:34
  • still no luck. I am trying to call a phtml file in homepage. That phtml file contain slider code. Also written requirejs config file in theme root. No luck. everytime stuck with error:requirejs.org/docs/errors.html#mismatch Error: Mismatched anonymous define() module: function () { (function ($, window, document) { var Carousel = { Commented Feb 26, 2016 at 9:01
  • i referred this: cookie-code.net/magento-2/… Commented Feb 26, 2016 at 9:02
3

owlcarousel needs to be injected. The correct way to do so is by defining owl carousel in the requirejs-config.js file in your themes names root.

For example, see this:

var config = {

    deps: [
        "js/main",
        "js/modernizr.custom"
    ],

    map: {
        '*': {
            'stellar': 'js/jquery.stellar.min',
            'owlcarousel': 'js/owl.carousel.min',
            'sticky' : 'js/jquery.sticky',
            'tether' : 'js/tether.min',
            'bootstrap': 'js/bootstrap.min'
        }
    },
    "shim": {
        "stellar": ["jquery"],
        "bootstrap": ["jquery"],
        "owlcarousel": ["jquery"],
        "tether": ["jquery"],
        "bootstrap": ["jquery"],
    }
};

Explanation:

  • deps is calling these files on all pages. In my web/js/ folder in my theme I have a file calles main.js and modernizr.custom.js

  • in maps I've defined several libraries. Just call them WITHOUT the suffix (.js)

  • in shim I defined some requirements. Those plugins cant be loaded without its value (here: jquery, which sets the dependency on Mangeto2's jQuery Library, which is included automatically

Calling the function:

You can easily now call owl carousel by requesting it in your define on your .phtml-File:

 require([ 'jquery', 'jquery/ui', 'owlcarousel'], function($){

   $("#owl-demo").owlCarousel({
        items: 1,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        dots: false,
        nav: true,
        navRewind: true,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        loop: true
    });

});

Clear your cache with php bin/magento cache:flush && rm -rf var/view_preprocessed/* var/cache/* var/full_page/* pub/static/* and reload the page. Now the console should be clean.

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.