3

I am trying to add owl carousel to recently viewed products in product detail page by making custom theme and creating viewed_grid.phtml in

app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_Reports/view/frontend/templates/widget/viewed/content and requirejs.config.js 

in

app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_Reports . 

But still I am not able to get slider.

2

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

and keep below div before last div ends in file

<div class="clear" data-bind="afterRender: pdpRvowlInit"></div>

and override file listing.js from

vendor/module_catalog/view/base/js/product/list/listing.js 

and create in

app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_Catalog/web/js/product/list/listing.js 

and make below changes

    define([
    'ko',
    'underscore',
    'Magento_Ui/js/grid/listing',
    'jquery',
    'owlCarousel'],function (ko, _, Listing, $) { 'use strict';

//and add  below function

    pdpRvowlInit: function(){
    $('.block-viewed-products-grid .product-items').owlCarousel({
        autoPlay: 3000, //Set AutoPlay to 3 seconds
        items : 3,
        nav: true,
        navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
        itemsDesktop : [1199,5],
        itemsDesktopSmall : [900,4], // betweem 900px and 601px
        itemsTablet: [700,2], // 2 items between 600 and 480
        itemsMobile : [479,1] , // 1 item between 479 and 0
    });}

Hope requirejs.config.js is already added in web/js folder

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.