cancel
Showing results for 
Search instead for 
Did you mean: 

How to add custom JS library to theme

How to add custom JS library to theme

Hello

 

i'm trying to add custom js & css ( front-end framework UIKIT)

 

First i add ccs in :

 

default_head_blocks.xml

 

 

<css src="https://cdn.jsdelivr.net/npm/uikit@3.6.22/dist/css/uikit.min.css" src_type="url"/>

That part is working

 

then, i add the js through requirejs-config.js

 var config = {
    map: {
        '*': {
            'jquery.uikit':           'js/uikit.min',
        }
    },
    paths: {
        "jquery.uikit": "js/uikit.min",
    },
    shim: {
        'jquery.uikit': {
            'deps': ['jquery'],
            'exports': 'UIkit',
        },
        'jquery.bootstrap': {
            'deps': ['jquery']
        }
    },
    deps: [
        'jquery/jquery.mobile.custom',
        'mage/common',
        'mage/dataPost',
        'mage/bootstrap'
    ],
    config: {
        shim: {
            'bootstrap': {
                deps: ['jquery']
            },
            'jquerySteps': {
                deps: ['jquery']
            }
        },
        mixins: {
            'Magento_Theme/js/view/breadcrumbs': {
                'Magento_Theme/js/view/add-home-breadcrumb': true
            },
            'jquery/ui-modules/dialog': {
                'jquery/patches/jquery-ui': true
            }
        }
    }
};

that seems working also

 

in my .phtml ( slider)

<script>
requirejs(['jquery','jquery.uikit'], function(jQuery, UIkit){ jQuery( document ).ready(function() { UIkit.slider('#el-slider').startAutoplay(); }); });
</script>

so it works, it recognize the Uikit, but .slider through : Uncaught TypeError: Cannot read property 'slider' of undefined

 

i thinks i'm not far to make it works ! 

 

Thanks a lot for any help

 

1 REPLY 1

Re: How to add custom JS library to theme

Please follow the below links :

1) https://magento.stackexchange.com/questions/156035/how-to-add-a-custom-javascript-to-theme-in-magent... 

2) https://webkul.com/blog/include-use-custom-js-file-require-js-magento2/ 

Problem Solved !!
Click on 'Kudos' & Accept as Solution to encourage to write more answers !