The question:
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 MagentoReportsBlockProductViewed
*/
?>
<?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) ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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) ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="product-item-link">
<?= $block->escapeHtml($_item->getName()) ?>
</a>
</strong>
<?php /* @escapeNotVerified */ echo $block->getProductPriceHtml(
$_item,
MagentoCatalogPricingPriceFinalPrice::PRICE_CODE,
MagentoFrameworkPricingRender::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('MagentoFrameworkDataHelperPostHelper');
$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('MagentoWishlistHelperData')->isAllow() && $showWishlist): ?>
<a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"
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('MagentoCatalogHelperProductCompare');?>
<a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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 🙂
The Solutions:
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
Method 1
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.js to your theme like app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/js/product/list/listing.js
Make 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):
define([
'ko',
'underscore',
'Magento_Ui/js/grid/listing',
'jquery',
'slick'
], function (ko, _, Listing, $) {
Add a new function like so:
pdpRvSlickInit: function(){
$('.block-viewed-products-grid .product-items').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 960,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});
}
Now copy the knockout HTML template to your theme. Copy /vendor/magento/module-catalog/view/base/web/template/product/list/listing.html to app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.html I added a new Div, but I’m not sure you need to do that. I added this:
<div class="clear" data-bind="afterRender: pdpRvSlickInit"></div>
Before the last closing div. Hope that helps.
Method 2
You need to correct your step 2 make as below, Keep requirejs-config.js file in root of your theme instead of web folder.
Create requirejs-config.js file in
app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/
with the following code in requirejs-config.js
var config = {
paths: {
slick: 'js/slick'
},
shim: {
slick: {
deps: ['jquery']
}
}
};
Run
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
Method 3
Use below code:
<script>
require([
'jquery',
'slick'
], function ($) {
$(document).ready(function () {
$(".widget-viewed-grid").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>
Method 4
requirejs-config.js should be as below
var config = {
paths: {
slick: 'js/slick.min'
},
shim: {
slick: {
deps: ['jquery']
}
}
};
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0