Magento – How to create Product list widget with owl carousel on Magento 2

toHtml() return block's html output

Process

\vendor\magento\framework\View\Element\AbstractBlock.php

    public function toHtml()
    {
/* dode */
            $this->_beforeToHtml();
            $html = $this->_toHtml();
            $this->_saveCache($html);
/* dode */
        return $html;
    }

Next this goes to \vendor\magento\framework\View\Element\Template.php

protected function _toHtml()
{
    if (!$this->getTemplate()) {
        return '';
    }
    return $this->fetchView($this->getTemplateFile());
}

Renders block html. and $this->fetchView function retrieves the block view from file (template).

Assume you know templates are using block functions and blocks extends core classes ( Template.php or AbstractBlock.php not in all cases ).

The data is populating by using toHtml()

Hope this helps.

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.