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.
the file you're looking for is probably this one:
vendor/magento/module-catalog/view/base/web/template/product/list/listing.html
But, pay attention it's a UI component so it may be used (as the file name suggest) in many other places
Best Answer
Copy the knockout HTML template to your theme. Copy
to
and keep below div before last div ends in file
and override file listing.js from
and create in
and make below changes
Hope requirejs.config.js is already added in web/js folder