Magento 2 - How to show related products in a thumbnail slider?
https://magento.stackexchange.com/questions/251998
-
06-02-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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?
Solution 3
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;
}
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="owlcarousel_<?=$type?>" 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 () {
$('#owlcarousel_<?=$type?>').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
});
});
})(jQuery);
});
</script>
<?php endif;?>
OTHER TIPS
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/*
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; ?>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
