cancel
Showing results for 
Search instead for 
Did you mean: 

Creating an Owl Carousel with the Recently Viewed Products widget (CE 2.2.6)

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Creating an Owl Carousel with the Recently Viewed Products widget (CE 2.2.6)

I've created a custom container to hold a Recently Viewed Products widget but I would like it to become an Owl Carousel. I've overridden 

 

vendor/magento/module-catalog/view/frontend/web/template/product/list/listing.html

. Below is my edit to this file:

 

 

<div if="hasData()"
 class="recently-carousel product-carousel owl-carousel" css="additionalClasses"
 afterRender="function() {
     jQuery('.recently-carousel').owlCarousel({
        nav: true,
        dots: true,
        items: 4,
        margin: 25,
        autoplay: true,
        smartSpeed: 500,
        lazyLoad: true,
        responsive: {
            0: {
                items: 1
            },
            640: {
                items: 2
            },
            1025: {
                items: 3
            },
            1400: {
                items: 4
            }
        }
     });
 }"
 >
<div class="block-content">
    <div css="'products-' + displayMode">
        <ol class="product-items">
            <li class="product-item" repeat="foreach: filteredRows, item: '$row'">
                <div class="product-item-info">
                    <fastForEach args="data: getRegion('general-area'), as: '$col'" >
                        <render args="$col.getBody()"/>
                    </fastForEach>

                    <div class="product-item-details">
                        <fastForEach args="data: getRegion('details-area'), as: '$col'" >
                            <render args="$col.getBody()"/>
                        </fastForEach>

                        <div if="getRegion('action-primary-area')().length || getRegion('action-secondary-area')().length"
                             class="product-item-actions">
                            <div class="actions-primary" if="getRegion('action-primary-area')().length">
                                <fastForEach args="data: getRegion('action-primary-area'), as: '$col'" >
                                    <render args="$col.getBody()"/>
                                </fastForEach>
                            </div>

                            <div if="getRegion('action-secondary-area')().length"
                                 class="actions-secondary"
                                 data-role="add-to-links">
                                <fastForEach args="data: getRegion('action-secondary-area'), as: '$col'" >
                                    <render args="$col.getBody()"/>
                                </fastForEach>
                            </div>
                        </div>

                        <div if="getRegion('description-area')().length"
                             class="product-item-description">
                            <fastForEach args="data: getRegion('description-area'), as: '$col'" >
                                <render args="$col.getBody()"/>
                            </fastForEach>
                        </div>
                    </div>
                </div>
            </li>
        </ol>
    </div>
</div>
</div>


This is creating an Owl Carousel that treats the block-content as an item and so only has one item containing all the products. I've tried adding 

nestedItemSelector: '.product-item'

 and 

itemElement: 'li'

 but this produces the below error:

Uncaught Error: Unable to process binding "if: function(){return hasData() }"
Message: Unable to process binding "repeat: function(){return {foreach:filteredRows,item:'$row'} }"
Message: Repeat binding requires a single element to repeat

Any ideas on how to turn this into a proper Owl Carousel?