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.

  • plz display your requirejs-config.js – Rakesh Jesadiya Feb 25 '16 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. – Shyam Krishna Sreekumar Feb 25 '16 at 6:49
  • you have to defined owlCarousel js inside requirejs-config.js – Rakesh Jesadiya Feb 25 '16 at 7:08
10

Try this

require([ 'jquery', 'jquery/ui'], function($){ 
$(document).ready(function($) {
   console.log('running');
   // your script
});});
  • 1
    This is valid answer, This is not a comment. – Rakesh Jesadiya Dec 2 '16 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
      });
   });
});
  • 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 ? – Shyam Krishna Sreekumar Feb 26 '16 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 Feb 26 '16 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 = { – Shyam Krishna Sreekumar Feb 26 '16 at 9:01
  • i referred this: cookie-code.net/magento-2/… – Shyam Krishna Sreekumar Feb 26 '16 at 9:02
2

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, privacy policy and cookie policy

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