How to create product recently viewed extension in magento 2 ?

Hi everyone, today I will introduce how to create a recently viewed product extension based on magento 2 recently viewed available

E-commerce stores face fierce competition and, therefore, do not leave any stones left to provide the best shopping experience and service. Magento 2 stores are no exception. Implement the method below to display recently viewed products in Magento 2 and make it easier for customers to find products of their interest.

Step 1:: Create widget.xml

/app/code/Magepow/RecentlyViewed/etc/widget.xml

 

<?xml version="1.0"?>
<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">
<label translate="true">Widget++ 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="learn_more" value="learn_more">
<label translate="true">Learn More Link</label>
</option>

</options>

</parameter>

<parameter name="show_buttons" xsi:type="multiselect" required="false" 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>

</options>

</parameter>

</parameters>
<containers>

<container name="content">
<template name="grid" value="grid" />
</container>

<container name="content.bottom">
<template name="grid" value="grid" />
</container>

<container name="content">
<template name="grid" value="grid" />
</container>

<container name="page.bottom.content">
<template name="grid" value="grid" />
</container>

</containers>

</widget>
</widgets>

Step 2:: Createwidget_recently_viewed.xml file showing product recently viewed frontend

/app/code/Magepow/RecentlyViewed/view/frontend/ui_component/widget_recently_viewed.xml

<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument id="catalog_recently_viewed" class="Magento\Catalog\Block\Widget\RecentlyViewed">
<item name="price" value="price">
<item name="js_config" xsi:type="array">widget_recently_viewed.recently_viewed_datasource</item >
</item>

<settings>
<dep >widget_recently_viewed.recently_viewed_datasource</dep>
</settings>

<dataSource id="recently_viewed_datasource" component="Magento_Catalog/js/product/provider">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="data" xsi:type="array">
<item name="data" xsi:type="array">
<item name="productStorageConfig" xsi:type="array">
<item name="namespace" xsi:type="string">product_data_storage</item>
<item name="className" xsi:type="string">DataStorage</item>
<name="updateRequestConfig" xsi:type="array>
<item name="url" xsi:type="serviceUrl" path="/products-render-info"></item>
</item>
</item>
<name="identifiersConfig" xsi:type="array>
<item name="namespace" xsi:type="string">recently_viewed_product</item>
</item>
<item name="scopeConfig" xsi:type="object">Magento\Framework\App\Config\ScopeConfigInterface</item>
</item>
</argument>
</argument>
<dataProvider class="\Magento\Catalog\Ui\DataProvider\Product\Listing\DataProvider" name="recently_viewed_datasource">
<settings>
<requestFieldName/>
<primaryFieldName/>
</settings>
</dataProvider>
</dataSource>
<columns name="widget_columns" component="Magepow_RecentlyViewed/js/product/list/listing" template="Magepow_RecentlyViewed/product/list/listing">
</columns>
</listing>

Step 3::Now is the display processing Createlisting.js

/app/code/Magepow/RecentlyViewed/view/frontend/web/js/product/list/listing.js

define([
    'ko',
    'underscore',
    'Magento_Ui/js/grid/listing',
    "jquery",
    'mage/storage',
    'mage/url'
], function (ko, _, Listing, $, storage, url) {
return Listing.extend({
defaults: {
additionalClasses: '',
filteredRows: {},
limit: 5,
listens: {
elems: 'filterRowsFromCache',
'${ $.provider }:data.items': 'filterRowsFromServer'
}
},

/** @inheritdoc */
initialize: function () {
this._super();
this.filteredRows = ko.observable();
this.initProductsLimit();
this.hideLoader();
},

initProductsLimit: function () {
if (this.source['page_size']) {
this.limit = this.source['page_size'];
}
return this;
},

initObservable: function () {
this._super()
.track({
rows: []
});
return this;
},

filterRowsFromCache: function () {
this._filterRows(this.rows);
},

filterRowsFromServer: function (rows) {
this._filterRows(rows);
},

_filterRows: function (rows) {
this.filteredRows(_.sortBy(rows, 'added_at').reverse().slice(0, this.limit));
},

getUrl: function (row) {
return row.url;
},

getComponentByCode: function (code) {
var elems = this.elems() ? this.elems() : ko.getObservable(this, 'elems'),
component;
component = _.filter(elems, function (elem) {
return elem.index === code;
}, this).pop();
return component;
},

});
});

Step 4::Now is the display processing Createlisting.html

/app/code/Magepow/RecentlyViewed/view/frontend/web/template/product/list/listing.html

<div  if="!getconfigValue()" class="widget-product recently-viewed magepow-show-widget" css="additionalClasses">
<div class="main-heading">
<h2 class="heading-title block-title">
<h2 role="heading" aria-level="2" text="label" />
</h2>
</div>
<div class="category-products block-content">
<div class="widget-products-grid">
<ol class="product-items magepow magepow-theme">
<li class="product-item" repeat="foreach: filteredRows, item: '$row'">
<div class="product-item-info">
<div class="product-show">
<fastForEach args="data: getRegion('general-area'), as: '$col'">
<render args="$col.getBody()" />
</fastForEach>
</div>
<div class=product-item-details">
<fastForEach 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>
</div>
</li>
</ol>
<script type="text/html" id="person-template"> <span> </span> </script>
</div>
</div>
</div>

Done. Hope this article will helpful for you.