How To Add Custom Attribute (PRICE and SKU) Data To Recently Viewed Products Widget

Question

In the widget settings, only name, price, image, and 'learn more' are available.

How can we add SKU and PRICE?

Answer 1

Try the below code and I tested it working fine. Create one module for that below is the code.

app/code/MageMohit/CustomAttRecentlyViewedWidget/registration.php

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'MageMohit_CustomAttRecentlyViewedWidget',
    __DIR__
);

app/code/MageMohit/CustomAttRecentlyViewedWidget/etc/module.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="MageMohit_CustomAttRecentlyViewedWidget" />
</config>

app/code/MageMohit/CustomAttRecentlyViewedWidget/etc/di.xml

<?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">
    <arguments>
        <argument name="productProviders" xsi:type="array">
            <item name="sku" xsi:type="object">\MageMohit\CustomAttRecentlyViewedWidget\Ui\DataProvider\Product\Listing\Collector\Sku</item>
        </argument>
    </arguments>
</type>
</config>

app/code/MageMohit/CustomAttRecentlyViewedWidget/etc/extension_attributes.xml

<?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"/>
    </extension_attributes>
</config>

app/code/MageMohit/CustomAttRecentlyViewedWidget/etc/widget.xml

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

app/code/MageMohit/CustomAttRecentlyViewedWidget/Ui/DataProvider/Product/Listing/Collector/Sku.php

<?php
namespace MageMohit\CustomAttRecentlyViewedWidget\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();
        }

        if ($product->getSku()) {
            $extensionAttributes->setSku($product->getSku());
        }

        $productRender->setExtensionAttributes($extensionAttributes);
    }
}

app/code/MageMohit/CustomAttRecentlyViewedWidget/view/frontend/ui_component/widget_recently_viewed.xml

<?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="MageMohit_CustomAttRecentlyViewedWidget/js/product/sku" sortOrder="2" displayArea="details-area">
            <settings>
                <label translate="true">SKU</label>
                <bodyTmpl>MageMohit_CustomAttRecentlyViewedWidget/product/sku</bodyTmpl>
            </settings>
        </column>
    </columns>
</listing>

app/code/MageMohit/CustomAttRecentlyViewedWidget/view/frontend/web/js/product/sku.js

define([
    'Magento_Ui/js/grid/columns/column',
    'Magento_Catalog/js/product/list/column-status-validator'
], 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) );
        }

    });
});

app/code/MageMohit/CustomAttRecentlyViewedWidget/view/frontend/web/template/product/sku.html

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

OUTPUT:

Thanks.

Answer 2

For that you can override the widget.xml for catalog_recently_viewed widget and add your parameters like below.

[Vendor][Module]\etc\widget.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    
    <widget id="catalog_recently_viewed" class="Magento\Catalog\Block\Widget\RecentlyViewed"
            placeholder_image="Magento_Catalog::images/product_widget_viewed.png">
        <label translate="true">Recently Viewed Products</label>
        <description translate="true">List of Products Recently Viewed by Visitor</description>
        <parameters>
            <parameter name="uiComponent" xsi:type="text" required="false" visible="false">
                <label translate="true">UI Component</label>
                <value>widget_recently_viewed</value>
            </parameter>
            <parameter name="page_size" xsi:type="text" required="true" visible="true">
                <label translate="true">Number of Products to display</label>
                <value>5</value>
            </parameter>
            <parameter name="show_attributes" xsi:type="multiselect" required="true" visible="true">
                <label translate="true">Product attributes to show</label>
                <options>
                    <option name="name" value="name">
                        <label translate="true">Name</label>
                    </option>
                    <option name="image" value="image">
                        <label translate="true">Image</label>
                    </option>
                    <option name="price" value="price">
                        <label translate="true">Price</label>
                    </option>
                    <option name="sku" value="sku">
                        <label translate="true">SKU</label>
                    </option>
                    <option name="learn_more" value="learn_more">
                        <label translate="true">Learn More Link</label>
                    </option>
                </options>
            </parameter>
            <parameter name="show_buttons" xsi:type="multiselect" required="true" visible="true">
                <label translate="true">Buttons to show</label>
                <options>
                    <option name="add_to_cart" value="add_to_cart">
                        <label translate="true">Add to Cart</label>
                    </option>
                    <option name="add_to_compare" value="add_to_compare">
                        <label translate="true">Add to Compare</label>
                    </option>
                    <option name="add_to_wishlist" value="add_to_wishlist">
                        <label translate="true">Add to Wishlist</label>
                    </option>
                </options>
            </parameter>
            <parameter name="template" xsi:type="select" required="true" visible="true">
                <label>Template</label>
                <options>
                    <option name="grid" value="product/widget/viewed/grid.phtml" selected="true">
                        <label translate="true">Viewed Products Grid Template</label>
                    </option>
                    <option name="list" value="product/widget/viewed/list.phtml">
                        <label translate="true">Viewed Products List Template</label>
                    </option>
                    <option name="sidebar" value="product/widget/viewed/sidebar.phtml">
                        <label translate="true">Viewed Products Sidebar Template</label>
                    </option>
                </options>
            </parameter>
        </parameters>
        <containers>
            <container name="sidebar.main">
                <template name="default" value="sidebar" />
            </container>
            <container name="content">
                <template name="grid" value="grid" />
                <template name="list" value="list" />
            </container>
            <container name="sidebar.additional">
                <template name="default" value="sidebar" />
            </container>
        </containers>
    </widget>
</widgets>

Try above code and let me know if need any help.

Thanks

Answer 3

To achieve this, you can override the widget.xml file for the catalog_recently_viewed widget in your custom module and add your parameters as shown below in Vendor\Module\etc\widget.xml:

<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget id="catalog_recently_viewed">
        <parameters>
            <parameter name="show_attributes" xsi:type="multiselect" required="true" visible="true">
                <options>
                    <option name="custom_sku" value="custom_sku">
                        <label translate="true">Custom SKU</label>
                    </option>
                        <option name="custom_price" value="custom_price">
                        <label translate="true">Custom Price</label>
                    </option>
                </options>
            </parameter>
        </parameters>
    </widget>
</widgets>

Please let us know if you need any additional information.