Magento 2 Related Products – How to Show in Thumbnail Slider

magento2related-productssliderup-sells

I want to show related products and/or products to upsell in a thumbnail slider on product page. I am using a child theme derived from Luma.

How should I achieve this? Is there anyway to integrate Flex slider in my theme?

Best Answer

I assume that you are using a custom theme name Vendor_customtheme

You can follow the below steps to implement OwlCarousel Slider for Related Product in the product detail page.

Note: Below example describe OwlCarousel implementation for Related Products in the product detail page.

You need to update app/design/frontend/Vendor/customtheme/Magento_Theme/Magento_Catalog/templates/product/list/items.phtml file to implement OwlCarousel for Related Products.

Step 1: Download OwlCarousel from here: Owl Carousel

Please put all OwlCarousel JS files owl.carousel.min.js and owlcarousel.js in this directory app/design/frontend/Vendor/customtheme/Magento_Catalog/web/js

After that put all OwlCarousel CSS files owl.carousel.css and owl.theme.default.css etc... in this directory app/design/frontend/Vendor/customtheme/web/css/owlcarousel/assets

Step 2: Include OwlCarousel CSS files using default_head_blocks.xml layout XML file.

For that create app/design/frontend/Vendor/customtheme/Magento_Theme/layout/default_head_blocks.xml file.

You can check default_head_blocks.xml file code as below.

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>                
        <css src="css/owlcarousel/assets/owl.carousel.min.css" />
        <css src="css/owlcarousel/assets/owl.theme.default.min.css" />
    </head>
</page>

Step 3: Include OwlCarousel JS using requirejs config file.

For that create file app/design/frontend/Vendor/customtheme/Magento_Catalog/requirejs-config.js file.

You can check requirejs-config.js file code as below.

var config = {
    paths: {            
            'owlcarousel': "Magento_Catalog/js/owlcarousel"
        },   
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        }
    }
};

Step 4: Update items.phtml file.

Copy file /vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml and paste here app/design/frontend/Vendor/customtheme/Magento_Theme/Magento_Catalog/templates/product/list/items.phtml

Now update the item.phtml file to implement OwlCarousel

You can check items.phtml file code as below.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/* @var $block \Magento\Catalog\Block\Product\AbstractProduct */
?>

<?php
switch ($type = $block->getType()) {

    case 'related-rule':
        if ($exist = $block->hasItems()) {
            $type = 'related';
            $class = $type;

            $image = 'related_products_list';
            $title = __('Related Products');
            $items = $block->getAllItems();
            $limit = $block->getPositionLimit();
            $shuffle = (int) $block->isShuffled();
            $canItemsAddToCart = $block->canItemsAddToCart();

            $showAddTo = false;
            $showCart = false;
            $templateType = null;
            $description = false;
        }
    break;

    case 'related':
        /** @var \Magento\Catalog\Block\Product\ProductList\Related $block */
        if ($exist = $block->getItems()->getSize()) {
            $type = 'related';
            $class = $type;

            $image = 'related_products_list';
            $title = __('Related Products');
            $items = $block->getItems();
            $limit = 0;
            $shuffle = 0;
            $canItemsAddToCart = $block->canItemsAddToCart();

            $showAddTo = true;
            $showCart = false;
            $templateType = null;
            $description = false;
        }
    break;

    case 'upsell-rule':
        if ($exist = $block->hasItems()) {
            $type = 'upsell';
            $class = $type;

            $image = 'upsell_products_list';
            $title = __('We found other products you might like!');
            $items = $block->getAllItems();
            $limit = $block->getPositionLimit();
            $shuffle = (int) $block->isShuffled();

            $showAddTo = false;
            $showCart = false;
            $templateType = null;
            $description = false;
            $canItemsAddToCart = false;
        }
    break;

    case 'upsell':
        /** @var \Magento\Catalog\Block\Product\ProductList\Upsell $block */
        if ($exist = count($block->getItemCollection()->getItems())) {
            $type = 'upsell';
            $class = $type;

            $image = 'upsell_products_list';
            $title = __('You may also like');
            $items = $block->getItemCollection()->getItems();
            $limit = $block->getItemLimit('upsell');
            $shuffle = 0;

            $showAddTo = false;
            $showCart = false;
            $templateType = null;
            $description = false;
            $canItemsAddToCart = false;
        }
    break;

    case 'crosssell-rule':
        /** @var \Magento\Catalog\Block\Product\ProductList\Crosssell $block */
        if ($exist = $block->hasItems()) {
            $type = 'crosssell';
            $class = $type;

            $image = 'cart_cross_sell_products';
            $title = __('More Choices:');
            $items = $block->getItemCollection();

            $showAddTo = true;
            $showCart = true;
            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
            $description = false;
            $canItemsAddToCart = false;
        }
    break;

    case 'crosssell':
        /** @var \Magento\Catalog\Block\Product\ProductList\Crosssell $block */
        if ($exist = count($block->getItems())) {
            $type = 'crosssell';
            $class = $type;

            $image = 'cart_cross_sell_products';
            $title = __('More Choices:');
            $items = $block->getItems();

            $showAddTo = true;
            $showCart = true;
            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
            $description = false;
            $canItemsAddToCart = false;
        }
    break;

    case 'new':
        if ($exist = $block->getProductCollection()) {
            $type = 'new';
            $mode = 'grid';
            $type = $type . ' ' . $mode;

            $class = 'widget' . ' ' . $type;

            $image = 'new_products_content_widget_grid';
            $title = __('New Products');
            $items = $exist;

            $showAddTo = true;
            $showCart = true;
            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
            $description = ($mode == 'list') ? true : false;
            $canItemsAddToCart = false;
        }
    break;

    case 'other':
    break;
}
?>

<?php if ($exist):?>
<div class="clearfix"></div>
    <?php if ($type == 'related' || $type == 'upsell'): ?>
        <?php if ($type == 'related'): ?>
            <div class="block <?= /* @escapeNotVerified */ $class ?>" data-mage-init='{"relatedProducts":{"relatedCheckbox":".related.checkbox"}}' data-limit="<?= /* @escapeNotVerified */ $limit ?>" data-shuffle="<?= /* @escapeNotVerified */ $shuffle ?>">
        <?php else: ?>
            <div class="block <?= /* @escapeNotVerified */ $class ?>" data-mage-init='{"upsellProducts":{}}' data-limit="<?= /* @escapeNotVerified */ $limit ?>" data-shuffle="<?= /* @escapeNotVerified */ $shuffle ?>">
        <?php endif; ?>
    <?php else: ?>
        <div class="block <?= /* @escapeNotVerified */ $class ?>">
    <?php endif; ?>
    <div class="block-title title">
        <strong id="block-<?= /* @escapeNotVerified */ $class ?>-heading" role="heading" aria-level="2"><?= /* @escapeNotVerified */ $title ?></strong>
    </div>
    <div class="block-content content" aria-labelledby="block-<?= /* @escapeNotVerified */ $class ?>-heading">
        <?php if ($type == 'related' && $canItemsAddToCart): ?>
        <div class="block-actions">
            <?= /* @escapeNotVerified */ __('Check items to add to the cart or') ?>
            <button type="button" class="action select" role="select-all"><span><?= /* @escapeNotVerified */ __('select all') ?></span></button>
        </div>
        <?php endif; ?>
        <div class="products wrapper grid products-grid products-<?= /* @escapeNotVerified */ $type ?>">
            <div id="relateditem_carousel"  class="products list items product-items owl-carousel owl-theme">           
                <?php $iterator = 1; ?>
                <?php foreach ($items as $_item): ?>
                
                <?php $available = ''; ?>
                <?php if (!$_item->isComposite() && $_item->isSaleable() && $type == 'related'): ?>
                    <?php if (!$_item->getRequiredOptions()): ?>
                        <?php $available = 'related-available'; ?>
                    <?php endif; ?>
                <?php endif; ?>
                <?php if ($type == 'related' || $type == 'upsell'): ?>
                    <?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<div class="item product product-item" style="display: none;">' : '</div><div class="item product product-item" style="display: none;">' ?>
                <?php else: ?>
                    <?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<div class="item product product-item">' : '</div><div class="item product product-item">' ?>
                <?php endif; ?>
                <div class="product-item-info <?= /* @escapeNotVerified */ $available ?>">
                    <?= /* @escapeNotVerified */ '<!-- ' . $image . '-->' ?>
                    <a href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>" class="product photo product-item-photo">
                        <?= $block->getImage($_item, $image)->toHtml() ?>
                    </a>
                    <div class="product details product-item-details">
                        <!--<strong class="product name product-item-name"><a class="product-item-link" title="<?= $block->escapeHtml($_item->getName()) ?>" href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>">
                            <?= $block->escapeHtml($_item->getName()) ?></a>
                        </strong>-->

                        <!--<?= /* @escapeNotVerified */ $block->getProductPrice($_item) ?>-->

                            <?php if ($templateType): ?>
                                <?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
                            <?php endif; ?>

                            <?php if ($canItemsAddToCart && !$_item->isComposite() && $_item->isSaleable() && $type == 'related'): ?>
                                <?php if (!$_item->getRequiredOptions()): ?>
                                    <div class="field choice related">
                                        <input type="checkbox" class="checkbox related" id="related-checkbox<?= /* @escapeNotVerified */ $_item->getId() ?>" name="related_products[]" value="<?= /* @escapeNotVerified */ $_item->getId() ?>" />
                                        <label class="label" for="related-checkbox<?= /* @escapeNotVerified */ $_item->getId() ?>"><span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span></label>
                                    </div>
                                <?php endif; ?>
                            <?php endif; ?>

                            <?php if ($showAddTo || $showCart): ?>
                                <div class="product actions product-item-actions">
                                    <?php if ($showCart): ?>
                                        <div class="actions-primary">
                                            <?php if ($_item->isSaleable()): ?>
                                                <?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)): ?>
                                                    <button class="action tocart primary" data-mage-init='{"redirectUrl": {"url": "<?= /* @escapeNotVerified */ $block->getAddToCartUrl($_item) ?>"}}' type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
                                                        <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                                                    </button>
                                                <?php else: ?>
                                                    <?php $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
                                                    $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
                                                    ?>
                                                    <button class="action tocart primary"
                                                            data-post='<?= /* @escapeNotVerified */ $postData ?>'
                                                            type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
                                                        <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                                                    </button>
                                                <?php endif; ?>
                                            <?php else: ?>
                                                <?php if ($_item->getIsSalable()): ?>
                                                    <div class="stock available"><span><?= /* @escapeNotVerified */ __('In stock') ?></span></div>
                                                <?php else: ?>
                                                    <div class="stock unavailable"><span><?= /* @escapeNotVerified */ __('Out of stock') ?></span></div>
                                                <?php endif; ?>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>

                                    <?php if ($showAddTo): ?>
                                        <div class="secondary-addto-links actions-secondary" data-role="add-to-links">
                                            <?php if ($addToBlock = $block->getChildBlock('addto')): ?>
                                                <?= $addToBlock->setProduct($_item)->getChildHtml() ?>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?= ($iterator == count($items)+1) ? '</div>' : '' ?>
                <?php endforeach ?>
                </div>               
        </div>
    </div>
</div>
<script type="text/javascript">
    requirejs(['jquery','owlcarousel'],function(jQuery,owlCarousel){
        (function($) {
            $(window).load(function () {
                $('#relateditem_carousel').owlCarousel({
                items:4,
                lazyLoad:false,
                loop:false,
                margin:10,
                nav:false,
                dots:false,
                autoplay:true,
                response:true,
                autoplayHoverPause:false,
                autoWidth:false,
                responsive : {
                    0 : {
                        items:1,
                    },
                    420 : {
                        items:2,
                    },
                    768 : {
                        items:3,
                    },
                    991 : {
                        items:4,
                    }
                }
                });
            });
        })(jQuery);
    });
</script>   
<?php endif;?>

Step 5: Now run following CLI commands from your Magento root.

sudo rm -rf pub/static/frontend/*
sudo rm -rf var/cache/*

enter image description here

Related Topic