0

I want to show related products and upsells products in a thumbnail slider on product page. I am using Luma child theme. How to achieve this?

Is there anyway to integrate Flex slider in my theme?

Thanks

0

I assume that you are using a custom theme name Vendor_customtheme

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

Note : Below example describe Owl Slider implementation for "Related Products" in product detail page. You need to update app/design/frontend/Vendor/customtheme/Magento_Theme/Magento_Catalog/templates/product/list/items.phtml file to implement Owl Sliders for "up sells products"

step 1) Download ( Owl carousel) .

Please put all Owl carousel JS files (owl.carousel.min.js,owlcarousel.js) under

app/design/frontend/Vendor/customtheme/Magento_Catalog/web/js

put all Owl carousel Css files (owl.carousel.css, owl.theme.default.css etc) under

app/design/frontend/Vendor/customtheme/web/css/owlcarousel/assets

step 2) Include owl css files using default_head_blocks.xml layout xml file

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

File : default_head_blocks.xml

<?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 owl js using requirejs config file.

Create file app/design/frontend/Vendor/customtheme/Magento_Catalog/requirejs-config.js

File : requirejs-config.js

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

step 4) Update itemms.phtml file.

copy file /vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml

Paste file: app/design/frontend/Vendor/customtheme/Magento_Theme/Magento_Catalog/templates/product/list/items.phtml

Now update the item.phtml file to implement owl slider

File : items.phtml

<?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

  • What about upsell products? Will Upsell also show in slider after update this code? – Shoaib Saleem Dec 3 '18 at 5:30
0

You can updates the file app/design/frontend/Vendor/customtheme/Magento_Theme/Magento_Catalog/templates/product/list/items.phtml to display both Upsell Items and Relates items as a slider in product detail page.

File : items.phtml

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

/* @var $block \Magento\Catalog\Block\Product\AbstractProduct */
?>
<?php
//    $_helper = $this->helper('Magento\Catalog\Helper\Output');
//    $_product = $block->getProduct();
?>
<?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 = true;
            $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 = __('We found other products you might 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;

    default:
        $exist = null;
}
?>

<?php if ($exist): ?>
    <!--Start related products  Code-->
    <?php if ($type == 'related') { ?>
        <div class="block-title title">
            <strong id="block-<?= /* @escapeNotVerified */ $class ?>-heading" role="heading" aria-level="2"><?= /* @escapeNotVerified */ $title ?></strong>
        </div>          
        <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()): ?>
                    <?php if (!$_item->getRequiredOptions()): ?>
                        <?php $available = 'related-available'; ?>
                    <?php endif; ?>
                <?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>

        <!--End related products  Code-->
    <?php } elseif ($type == 'upsell') { ?>    
        <!--Start upsell products  Code-->
        <div class="block-title title">
            <strong id="block-<?= /* @escapeNotVerified */ $class ?>-heading" role="heading" aria-level="2"><?= /* @escapeNotVerified */ $title ?> </strong>
        </div>
        <div id="upsellitem_carousel"  class="products list items product-items owl-carousel owl-theme">            
            <?php $iterator = 1; ?>
            <?php foreach ($items as $_item): ?>                
                <?php $available = ''; ?>                
                <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>
        <!--End upsell products  Code-->
    <?php } else { ?>                 
        <!--Start crosssell products  Code-->
        <div class="block <?= /* @escapeNotVerified */ $class ?>">
            <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">

                <div class="products wrapper grid products-grid products-<?= /* @escapeNotVerified */ $type ?>">
                    <ol class="products list items product-items">
                        <?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) ? '<li class="item product product-item" style="display: none;">' : '</li><li class="item product product-item" style="display: none;">' ?>
                            <?php else: ?>
                                <?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li 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) ? '</li>' : '' ?>
        <?php endforeach ?>
                    </ol>
                </div>
            </div>
        </div>
        <!--End crosssell products  Code-->    
    <?php } ?>
    <script type="text/javascript">
        requirejs(['jquery', 'owlcarousel'], function (jQuery, owlCarousel) {
            (function ($) {
                $(window).load(function () {
                    //init Related Product owl carousel
                    $('#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,
                            }
                        }
                    });
                    //init Upsell Product owl carousel
                    $('#upsellitem_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; ?>

enter image description here

  • Thanks for your help.I have done this task.I just put carousel id dynamically using $type check. – Shoaib Saleem Dec 3 '18 at 11:41
  • No need to use all code within else condition. – Shoaib Saleem Dec 3 '18 at 11:43
0

Here is my updated code.

<?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 = __('Complete the Look');
            $items = $block->getItems();
            $limit = 0;
            $shuffle = 0;
            $canItemsAddToCart = $block->canItemsAddToCart();

            $showAddTo = true;
            $showCart = false;
            $templateType = null;
            $description = false;
            $carousel_id  = 'relateditem_carousel';
        }
    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;
            $carousel_id      = 'upsellitem_carousel';
        }
    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="<?php echo $carousel_id?>"  class="products list items product-items owl-carousel owl-theme owl-loaded">           
                <?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>
                    <?php if ($type != 'related'): ?>
                    <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 ($type == 'upsell'): ?>
                <div data-block="minicart" class="minicart-wrapper">
                    <a class="action showcart" href="<?= /* @escapeNotVerified */ $block->getAddToCartUrl($_item) ?>"></a>
                </div><?php endif; ?>

                            <?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>
                        <?php endif; ?>
                    </div>
                    <?= ($iterator == count($items)+1) ? '</div>' : '' ?>
                <?php endforeach ?>
                </div>               
        </div>
    </div>
</div>
<script type="text/javascript">
    requirejs(['jquery','Ves_All/lib/owl.carousel/owl.carousel.min'],function(jQuery,owlCarousel){
        (function($) {
            $(window).load(function () {
                $('#relateditem_carousel').owlCarousel({
                  autoPlay: 3000, //Set AutoPlay to 3 seconds

                  items : 3,
                  nav: true,
                  navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>", "<i class='fa fa-angle-right' aria-hidden='true'></i>"],
                  itemsDesktop : [1199,3],
                  itemsDesktopSmall : [900,3], // betweem 900px and 601px
                  itemsTablet: [700,2], // 2 items between 600 and 480
                  itemsMobile : [479,1] , // 1 item between 479 and 0
                });

                $('#upsellitem_carousel').owlCarousel({
                  autoPlay: 3000, //Set AutoPlay to 3 seconds

                  items : 5,
                  nav: true,
                  navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>", "<i class='fa fa-angle-right' aria-hidden='true'></i>"],
                  itemsDesktop : [1199,5],
                  itemsDesktopSmall : [900,4], // betweem 900px and 601px
                  itemsTablet: [700,2], // 2 items between 600 and 480
                  itemsMobile : [479,1] , // 1 item between 479 and 0
                });



            });
        })(jQuery);
    });
</script>   
<?php endif;?>

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.