Overriding Base Template File in Magento 2 – Theme Overriding Guide

magento2overridingtheme-overriding

There is a file that is used asynchronously in the front end called listing.html at the following path.

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

It is used by the recently viewed to render recently viewed items.

I want to override this file in my Vendor/Theme/ folder.

I have already tried the following locations
design/frontend/FossilGroup/default/Magento_Catalog/templates/product/list/ design/frontend/FossilGroup/default/Magento_Catalog/web/template/product/list/ design/frontend/FossilGroup/default/Magento_Catalog/web/templates/product/list/ design/base/FossilGroup/default/Magento_Catalog/template/product/list/ design/base/FossilGroup/default/Magento_Catalog/templates/product/list/ design/base/FossilGroup/Magento_Catalog/template/product/list/ design/base/FossilGroup/Magento_Catalog/templates/product/list/ design/web/FossilGroup/default/Magento_Catalog/templates/product/list/ design/web/FossilGroup/default/Magento_Catalog/template/product/list/

Version: Magento 2.2

Best Answer

Copy this file

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

Paste it here.

  app/design/frontend/Vendor/theme/Magento_Catalog/web/template/product/list/listing.html

Related Solutions

Magento2 – Apply Slick Slider to Recently Viewed Widget

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.

Magento 2.2.1 – How to Override Recently Viewed Template

You have added it to the wrong directory, try this instead:

app/design/frontend/Vendor/theme/Magento_Catalog/web/template/product/list/listing.html

Then recompile following your usual workflow (grunt/gulp/static content deploy).

Related Topic