1

I am working on customizing the Magento 2 Blank theme and trying to add owl carousel however am getting this error

Uncaught TypeError: Cannot read property 'fn' of undefined
at :8888/pub/static/frontend/blank/blank_child/en_US/owl.carousel/owl.carousel.min.js:1
at :8888/pub/static/frontend/blank/blank_child/en_US/owl.carousel/owl.carousel.min.js:1
(index):479 Uncaught TypeError: $(...).owlCarousel is not a function
at (index):479
at Object.execCb (require.js:1650)
at Module.check (require.js:866)
at Module.<anonymous> (require.js:1113)
at require.js:132
at require.js:1156
at each (require.js:57)
at Module.emit (require.js:1155)
at Module.check (require.js:917)
at Module.enable (require.js:1143)

I have created a child theme of blank and placed the basic files in my app/design/frontend/blank/blank_child folder

I believe Jquery is already included in the blank theme in Magento 2.2.5? So I then created a require js file and put it in app/design/frontend/blank/web/requirejs-config.js

The contents of the file is:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

 var config = {
map: {
    '*': {
        'rowBuilder':             'Magento_Theme/js/row-builder',
        'toggleAdvanced':         'mage/toggle',
        'translateInline':        'mage/translate-inline',
        'sticky':                 'mage/sticky',
        'tabs':                   'mage/tabs',
        'zoom':                   'mage/zoom',
        'collapsible':            'mage/collapsible',
        'dropdownDialog':         'mage/dropdown',
        'dropdown':               'mage/dropdowns',
        'accordion':              'mage/accordion',
        'loader':                 'mage/loader',
        'tooltip':                'mage/tooltip',
        'deletableItem':          'mage/deletable-item',
        'itemTable':              'mage/item-table',
        'fieldsetControls':       'mage/fieldset-controls',
        'fieldsetResetControl':   'mage/fieldset-controls',
        'redirectUrl':            'mage/redirect-url',
        'loaderAjax':             'mage/loader',
        'menu':                   'mage/menu',
        'popupWindow':            'mage/popup-window',
        'validation':             'mage/validation/validation',
        'welcome':                'Magento_Theme/js/view/welcome',
        'breadcrumbs':            'Magento_Theme/js/view/breadcrumbs'
    }
},
paths: {
    'jquery/ui': 'jquery/jquery-ui'
},
deps: [
    'jquery/jquery.mobile.custom',
    'mage/common',
    'mage/dataPost',
    'mage/bootstrap'
],
config: {
    mixins: {
        'Magento_Theme/js/view/breadcrumbs': {
            'Magento_Theme/js/view/add-home-breadcrumb': true
        }
    }
}
};
 var config = {
              paths: {            
        'owlcarousel': "web/owl.carousel"
    },   
shim: {
    "web/owl.carousel.min": ["jquery"]
    }
 };

I then have the owl.carousel js files in a path that is app/design/frontend/blank/web/owl.carousel/

I have the owl.carousel css file located in app/design/frontend/blank/web/owl.carousel/assets/

  • In yourrequirejs-config.js try replacing the key owl.carousel/owl.carousel.min to match the one in paths owlcarousel – Sam Jun 12 at 20:57
  • I changed the shim section to be "web/owl.carousel.min": ["jquery"] Do I need to recompile and deploy? I am in dev mode – Jayreis Jun 12 at 21:11
  • Sorry if I was a bit misleading, what I mean was the shim line should become, "owlcarousel": ["jquery"] as the key under shim needs to be the same as under paths. I'd suggest referring to the answers in the following thread for implementing owl slider magento.stackexchange.com/questions/123727/… – Sam Jun 12 at 21:35
  • 2
    Thank you I followed the post on magento.stackexchange.com/questions/123727/ and that worked. – Jayreis Jun 12 at 22:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.