Integrate a Related Product Slider in Magento 2

In Magento 2 related products are displayed as a grid on product view page after product details section. Most of the project requirement is to make this section slider instead of a grid. In this article, we will be going to integrate Slick Slider into related product section.

When you debug the code of related product section you will find that related product section render from vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml file. As we all know we can not directly modify the files from vendor directory as it is part of Magento 2 core code. So we will be going to override this file under our custom theme Codextblog/luma_custom. If you are not familiar with how to create custom theme in Magento 2, here’s my previous article explaining about custom theme.

Step 1 : Override items.phtml file under our theme.

Copy the items.phtml file from vendor/magento/module-catalog/view/frontend/templates/product/list directory and paste it under app/design/frontend/Codextblog/luma_custom/Magento_Catalog/templates/product/list/ directory.

Replace the line no around 176 with the following line no 3 and add the following slick slider jquery (line no 6 to 21) at the end of the file

//replace this line - this will add id="related" attribute to <ol> element
 
<ol class="products list items product-items" id="<?php echo $type;?>">

//slick slider jquery code at the end of the file
<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: 1500,
                    slidesToShow: 4,
                    slidesToScroll: 4
                });
            });
        });
    })();
    </script>

Here we have added an id attribute to “ol” element and bind the slick jquery code. Now let’s add the slick slider jquery files and CSS files.

Step 2 : Download slick slider and add the slick.min.js under app/design/frontend/Codextblog/luma_custom/Magento_Catalog/web/js directory.

Step 3 : Download slick slider and add the slick-theme.css and slick.css under app/design/frontend/Codextblog/luma_custom/Magento_Catalog/web/css directory.

Step 4 : Create requirejs-config.js and add the following code

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

The paths object tells Magento 2 about the location of our slick.min js and shim object tells the dependency of slick slider. As slick slider is depends on jquery and jquery-migrate library, we have added these two library as a dependency.

Step 5 : Go to Magento 2 installation root directory from cmd and run below command

php bin/magento setup:static-content:deploy

This command will generate the static files of slick css and js and put it under pub/static/frontend/Codextblog/luma_custom/en_US/Magento_Catalog/css and pub/static/frontend/Codextblog/luma_custom/en_US/Magento_Catalog/js directory.
 

Note : Some of the CSS from Luma theme overrides the default styling of slider so you need to tweaks some design in your theme to adjust slider styling.

If you liked this post, then please like us on Facebook and follow us on Twitter.