How to connect my custom js slick.min.js files with requirejs-config.js?

Question

I need to make a slider for related-products. In order to override the template copied: app/design/frontend/{Vendor Theme}/{Theme name}/Magento_Catalog/templates/product/list/items.phtml.

there is a code inside items.phtml:

<script>
    (function  () {
        require(["jquery","jquery/jquery-migrate","slick"],function($) {
            jQuery(document).ready(function() {
                jQuery("#related").not('.slick-initialized').slick({
                    slide: 'li',
                    dots: true,
                    infinite: true,
                    speed: 2500,
                    slidesToShow: 4,
                    slidesToScroll: 4
                });
            });
        });
    })();
</script>

Now I wanted to pull the slick plugin code from the items.phtml file into a separate js file and include them via requirejs-config.js.

my requirejs-config.js file :

const config = {
    paths: {
        script: "Magento_Catalog/js/script/slider",
        'slick': "Magento_Catalog/js/slick/slick.min"
    },
    shim: {
        'slick': {
            deps: ['jquery', 'jquery/jquery-migrate']
        }
    }
};

The project structure:

My custom js file is script/slider.js with slick code.

How can I connect my custom slider.js and slick.min.js files with requirejs-config.js?

above I indicated how I am trying to connect them in equirejs-config.js , but this is unsuccessful.

please look at : magento.stackexchange.com/questions/293808/… — Pawan
– Pawan, Commented Mar 29, 2021 at 6:42

Shoaib Munir · Accepted Answer · 2021-03-29 06:55:28Z

Your require-config file looks fine, just one thing need to add, you have used script change it's name and use in quotation. Also add shim dependency for your slider file, like this:

const config = {
    paths: {
        'slider_script': "Magento_Catalog/js/script/slider",
        'slick': "Magento_Catalog/js/slick/slick.min"
    },
    shim: {
        'slick': {
            deps: ['jquery', 'jquery/jquery-migrate']
        },
        'slider_script': {
            deps: ['jquery', 'jquery/jquery-migrate']
        }
    }
};

2nd issue that could effect your slider is, you have used not() function when adding slick, please try to use slick function directly. And instead of not you can add new check like this:

<script>
    (function  () {
        require(["jquery","jquery/jquery-migrate","slick"],function($) {
            jQuery(document).ready(function() {
                if(!jQuery("#related").hasClass("slick-initialized"){
                jQuery("#related").slick({
                    slide: 'li',
                    dots: true,
                    infinite: true,
                    speed: 2500,
                    slidesToShow: 4,
                    slidesToScroll: 4
                });
                }
            });
        });
    })();
</script>

Hope this will help

Stack Exchange Network

How to connect my custom js slick.min.js files with requirejs-config.js?

1 Answer 1

Your Answer

Linked

Hot Network Questions

How to connect my custom js slick.min.js files with requirejs-config.js?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions