1

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:

enter image description here

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.

1
0

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

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.