Magento 2 – Override Recently Viewed Products Template

It seems you have to set pager and sorting in your custom phtml file.

I have followed below steps pr add pagination and sorting.

In your block file add below code for add pagination:

public function __construct(
    \Magento\Catalog\Block\Product\Context $context,
    \Magento\Catalog\Model\ProductFactory $productFactory,
    \Magento\Framework\Url\Helper\Data $urlHelper,
    array $data = []
) {
    $this->_productFactory = $productFactory;
    $this->urlHelper = $urlHelper;
    parent::__construct($context, $data);

    // Get your custom collection here

    $collection = $this->getCustomCollection();

    $this->setCollection($collection);
}

public function _prepareLayout()
{

    parent::_prepareLayout();
    if ($this->getCollection()) {

        // create pager block for collection 

        $toolbar = $this->getToolbarBlock();

        $pager = $this->getLayout()->createBlock(
            'Magento\Theme\Block\Html\Pager', 'list.pager'
        )->setCollection(
            $this->getCollection() // assign collection to pager
        );
        $toolbar->setChild('product_list_toolbar_pager', $pager); // set pager block in layout
        // called prepare sortable parameters
        $collection = $this->getCollection();

        // use sortable parameters
        $orders = $this->getAvailableOrders();

        if ($orders) {
            $toolbar->setAvailableOrders($orders);
        }
        $sort = $this->getSortBy();
        if ($sort) {
            $toolbar->setDefaultOrder($sort);
        }
        $dir = $this->getDefaultDirection();
        if ($dir) {
            $toolbar->setDefaultDirection($dir);
        }
        $modes = $this->getModes();
        if ($modes) {
            $toolbar->setModes($modes);
        }
        $toolbar->setCollection($collection);

        $this->setChild('toolbar', $toolbar);
        $this->getCollection()->load();
    }

    return $this;
}

public function getToolbarHtml()
{
    return $this->getChildHtml('toolbar');
}

public function getToolbarBlock()
{
    $blockName = $this->getToolbarBlockName();
    if ($blockName) {
        $block = $this->getLayout()->getBlock($blockName);
        if ($block) {
            return $block;
        }
    }
    $block = $this->getLayout()->createBlock($this->_defaultToolbarBlock, uniqid(microtime()));

    return $block;
}

public function getMode()
{
    return $this->getChildBlock('toolbar')->getCurrentMode();
}

Also define below property:

protected $_defaultToolbarBlock = 'Magento\Catalog\Block\Product\ProductList\Toolbar';

In phtml file add below code before and after listing:

<?php echo $block->getToolbarHtml() ?>

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.