4

In requirejs-config.js I have defined the owlcarousel path like below. But still the error Uncaught TypeError: $(...).owlCarousel is not a function(…) does not let product slider in home page work? I have deployed the content and cleared the cache as well.

var config = {
    paths: {
        'owlcarousel': "web/owl.carousel/owl.carousel.js"
    },
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        }
    }
};
5

Firstly you need to put your js in app/code/vendor/module/frontend/web/js

Secondly you need to put your requirejs-config.js in app/code/vendor/module/frontend

You dont need to mention .js extension at last.

Also you need to write Vendor_Modulename while calling js in requirejs-config.js

Just pass file name only.

Try below code :

var config = {
    paths: {
        'owlcarousel': "VendorName_Modulename/js/owl.carousel"
    },
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        }
    }
};

put this in your owlcarousal.js top and close it at last -

define([
    "jquery"
], function ($) {

/* you owl.carousel.js code goes here */

});;

After that run setup:di:compile command and check.

| improve this answer | |
  • This call is in child theme, not module. Should I change the path? – Zinat Nov 24 '16 at 12:49
  • VendorName_Themename/js/owl.carousel or VendorName_Themename/web/js/owl.carousel? – Zinat Nov 24 '16 at 12:53
  • it contains other files as well, where to place the current /web/owl.carousel/assets/owl.carousel.css ? – Zinat Nov 24 '16 at 12:55
  • Let us continue this discussion in chat. – Zinat Nov 24 '16 at 13:09
  • It's crazy, everything is set correct but Uncaught TypeError: $(...) is still there :( – Zinat Nov 24 '16 at 13:23
1

You have used owlCarousel as reference that is wrong just replace it with your requiredjs

var config = {
paths: {
    'owlCarousel': "VendorName_Themename/js/owl.carousel"
},
shim: {
    'owlCarousel': {
        deps: ['jquery']
    }
}

};

| improve this answer | |
1

you need to define the $ in owl.carousel.js

put the blow code on top

define([
    "jquery"
], function ($) {
/* you owl.carousel.js library codes */
});

hope this will work

| improve this answer | |
  • Do you mean like this <script type="text/javascript"> define([ "jquery", "jquery/ui" ], function ($) { $("#latest_product .owl-carousel").owlCarousel({ autoplay: true, autoplayTimeout: 5000, ... – Zinat Nov 24 '16 at 13:21
  • any library you are using which is using jQuery should be defined as above.. @Zinat – Mohammad Mujassam Nov 24 '16 at 13:57

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.