- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-25-2018
07:31 AM
10-25-2018
07:31 AM
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?
Labels: