Integrate a Related Product Slider in Magento 2

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.

Want to ask a question or leave a comment?

Leave a Comment

(6 Comments)

  • Namita

    requirejs-config.js where we have to put this file

    • Chirag

      You have to put that file inside view/frontend directory.

  • Emily

    I am also facing the same issues. .htaccess file already exist in pub/static directory as well. What is the issue with this code? Please update working code. How to resolve this issue?

  • Renars

    If anyone is having trouble with Magento 2.3 and Slick, the answer with data-mage-init=”{‘slickSlider’: {}}”> worked for me. Checkout the full answer on SO:

    https://stackoverflow.com/questions/52014108/magento-2-1-10-slick-slider-with-ul-li

    Regards,
    Renars

  • Goutam

    css files are not loading into it’s pub/static folder

    • Admin

      Did you run the deploy command? Make sure .htaccess file exist in pub/static directory

  • All the comments are goes into moderation before approval. Irrelevant comment with links directly goes to spam. Your email address will not be published.

    Was this post helpful? Please support Us!

    Follow us on twitter or Like us on facebook.

     


    To Avoid Spam Downloads, We Want Your Email

    We will send you download link right
    away. Please submit form below.
    SEND ME DOWNLOAD LINK
    Close

    Increase Your
    Magento 2
    Knowledge

    Get Weekly Tutorial
    to your Inbox
    Subscribe Me
    close-link
    Subscribe Here