What files need to be changed to display additional attributes in recently view products widget?

In the widget settings there is only name, price, image and learn_more available.

For the product attribute name i've spotted the file


<column name="name" component="Magento_Catalog/js/product/name" sortOrder="1" displayArea="details-area">
        <label translate="true">Name</label>

and vendor/magento/module-catalog/view/base/web/template/product/name.html:

<strong if="isAllowed()"
    <a attr="href: $row().url" html="$col.getLabel($row())"/>

I'm really confused about the $col.getLabel($row()), is there any documentation out there that covers this functionality?

What files needs to be changed for adding delivery_time or sku to the widget and where to put them?

Any help would appreciated

  • I need something like this. I have some custom attributes to show in the recently viewed widget. Please help – Abid Malik Jul 17 '19 at 14:11
  • did anyone get solution regarding adding new attribute in recently viewed widget – Vinay Sikarwar Oct 18 '19 at 3:21

I managed to figure this out (albeit using reviews as a source of inspiration). This has been tested and is working on Magento 2.3.3


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Catalog\Ui\DataProvider\Product\ProductRenderCollectorComposite">
        <argument name="productProviders" xsi:type="array">
            <item name="sku" xsi:type="object">\Namespace\Module\Ui\DataProvider\Product\Listing\Collector\Sku</item>


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
    <extension_attributes for="Magento\Catalog\Api\Data\ProductRenderInterface">
        <attribute code="sku" type="string"/>


<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    <widget id="catalog_recently_viewed">
            <parameter name="show_attributes" xsi:type="multiselect" required="true" visible="true">
                    <option name="sku" value="sku">
                        <label translate="true">SKU</label>


namespace Namespace\Module\Ui\DataProvider\Product\Listing\Collector;

use Magento\Catalog\Api\Data\ProductInterface;
use Magento\Catalog\Api\Data\ProductRenderExtensionFactory;
use Magento\Catalog\Api\Data\ProductRenderInterface;
use Magento\Catalog\Ui\DataProvider\Product\ProductRenderCollectorInterface;

class Sku implements ProductRenderCollectorInterface
    /** SKU html key */
    const KEY = "sku";

     * @var ProductRenderExtensionFactory
    private $productRenderExtensionFactory;

     * Sku constructor.
     * @param ProductRenderExtensionFactory $productRenderExtensionFactory
    public function __construct(
        ProductRenderExtensionFactory $productRenderExtensionFactory
    ) {
        $this->productRenderExtensionFactory = $productRenderExtensionFactory;

     * @inheritdoc
    public function collect(ProductInterface $product, ProductRenderInterface $productRender)
        $extensionAttributes = $productRender->getExtensionAttributes();

        if (!$extensionAttributes) {
            $extensionAttributes = $this->productRenderExtensionFactory->create();




<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="widget_columns">
        <column name="sku" component="Namespace_Module/js/product/sku" displayArea="description-area">
                <label translate="true">SKU</label>


], function (Column, columnStatusValidator) {
    'use strict';

    return Column.extend({

         * @param row
         * @returns {boolean}
        hasValue: function (row) {
            return "sku" in row['extension_attributes'];

         * @param row
         * @returns {*}
        getValue: function (row) {
            return row['extension_attributes']['sku'];

         * @param row
         * @returns {*|boolean}
        isAllowed: function (row) {
            return (columnStatusValidator.isValid(this.source(), 'sku', 'show_attributes') && this.hasValue(row) );



<strong if="isAllowed($row())"
   class="product sku">
    <span class="label" text="label" />
    <span class="value" text="getValue($row())" />

One thing you'll need to bear in mind is that recently viewed stores data in browser storage when an item is viewed - it won't update the data that is already there with your new attributes. So when testing please remember to clear your browser storage! (Speaking from experience, this tripped me up for quite a while)

EDIT: Show how to render both label and value in the .html file

  • Thank you very much Dan for that detailed answer and your experiences. I'll check that out as soon as possible :-) – Sebastian Dec 10 '19 at 9:40
  • Thank you for the detailed answer!!! – aravind Dec 13 '19 at 13:40
  • Quality answer, thx a lot! – Antoine Kociuba Feb 9 at 13:11

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.