I have created a code but slider is not showing up in recently viewed products.
Here is my code –
I have downloaded slick js and css from the following link http://kenwheeler.github.io/slick/
Then i have done the following –
Step 1 –
Copied slick.min.js and slick.js in
app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/js/
Step 2 –
Create requirejs-config.js file in
app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/
with the following code in requirejs-config.js
var config = {
paths: {
slick: 'js/slick'
},
shim: {
slick: {
deps: ['jquery']
}
}
};
Step 3 –
Copied slick.less and slick-theme.less in
app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/css/source/
Step 4 –
Clear cache and deploy files
Step 5 –
Created viewed_grid.phtml in
app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_Reports/view/frontend/templates/widget/viewed/content
with the following code –
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<?php
/**
* @var $block \Magento\Reports\Block\Product\Viewed
*/
?>
<?php
if ($exist = ($block->getRecentlyViewedProducts() && $block->getRecentlyViewedProducts()->getSize())) {
$type = 'widget-viewed';
$mode = 'grid';
$type = $type . '-' . $mode;
$image = 'recently_viewed_products_grid_content_widget';
$title = __('Recently Viewed');
$items = $block->getRecentlyViewedProducts();
$showWishlist = true;
$showCompare = true;
$showCart = true;
$rating = 'short';
$description = ($mode == 'list') ? true : false;
}
?>
<?php if ($exist):?>
<div class="block widget block-viewed-products-<?= /* @escapeNotVerified */ $mode ?>">
<div class="block-title">
<strong role="heading" aria-level="2"><?= /* @escapeNotVerified */ $title ?></strong>
</div>
<div class="block-content">
<?= /* @escapeNotVerified */ '<!-- ' . $image . '-->' ?>
<div class="products-<?= /* @escapeNotVerified */ $mode ?> <?= /* @escapeNotVerified */ $mode ?>">
<ol class="product-items <?= /* @escapeNotVerified */ $type ?>">
<?php $iterator = 1; ?>
<?php foreach ($items as $_item): ?>
<?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>
<div class="product-item-info">
<a href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>" class="product-item-photo">
<?= $block->getImage($_item, $image)->toHtml() ?>
</a>
<div class="product-item-details">
<strong class="product-item-name">
<a title="<?= $block->escapeHtml($_item->getName()) ?>"
href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>" class="product-item-link">
<?= $block->escapeHtml($_item->getName()) ?>
</a>
</strong>
<?php /* @escapeNotVerified */ echo $block->getProductPriceHtml(
$_item,
\Magento\Catalog\Pricing\Price\FinalPrice::PRICE_CODE,
\Magento\Framework\Pricing\Render::ZONE_ITEM_LIST,
[
'price_id_suffix' => '-' . $type
]
) ?>
<?php if ($rating): ?>
<?= $block->getReviewsSummaryHtml($_item, $rating) ?>
<?php endif; ?>
<?php if ($showWishlist || $showCompare || $showCart): ?>
<div class="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 ($showWishlist || $showCompare): ?>
<div class="actions-secondary" data-role="add-to-links">
<?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?>
<a href="#"
class="action towishlist" data-action="add-to-wishlist"
data-post='<?= /* @escapeNotVerified */ $block->getAddToWishlistParams($_item) ?>'
title="<?= /* @escapeNotVerified */ __('Add to Wish List') ?>">
<span><?= /* @escapeNotVerified */ __('Add to Wish List') ?></span>
</a>
<?php endif; ?>
<?php if ($block->getAddToCompareUrl() && $showCompare): ?>
<?php $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');?>
<a href="#" class="action tocompare"
data-post='<?= /* @escapeNotVerified */ $compareHelper->getPostDataParams($_item) ?>'
title="<?= /* @escapeNotVerified */ __('Add to Compare') ?>">
<span><?= /* @escapeNotVerified */ __('Add to Compare') ?></span>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?= ($iterator == count($items)+1) ? '</li>' : '' ?>
<?php endforeach ?>
</ol>
</div>
<?= $block->getPagerHtml() ?>
</div>
</div>
<script>
require([
'jquery',
'slick'
], function ($) {
jQuery(document).ready(function () {
jQuery(".widget-viewed").slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1280,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
});
</script>
<?php endif;?>
Step 6 –
Clear cache and deploy files again
But the slider is still not showing up for recently viewed products in frontend
Please help me in correcting the code or creating a module to show recently viewed product with slick slider 🙂
Best Answer
Incase anyone else needs to do this, here's what I did for Magento 2.3.2. The Recently Viewed widget gets added via knockout, which fires after all the other javascript. So to apply slick I had to use the "afterRender" custom binding.
Once I found which knockout template and viewmodel js recently viewed products used it was pretty straight forward. Here's my code:
Copy
vendor/magento/module-catalog/view/base/web/js/product/list/listing.jsto your theme likeapp/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/js/product/list/listing.jsMake sure jquery/slick is added to the top of the script file, like so (this is assuming you've already added them to require-config.js):
Add a new function like so:
Now copy the knockout HTML template to your theme. Copy
/vendor/magento/module-catalog/view/base/web/template/product/list/listing.htmltoapp/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.htmlI added a new Div, but I'm not sure you need to do that. I added this:Before the last closing div. Hope that helps.