we all will get to know what is Widget in Magento 2.
Widgets provide powerful functionalities that are used to add dynamic or static content to store pages or blocks. You can add widgets in any CMS block of Magento 2 to display such content or elements, for example:
In the recently viewed products widget settings there are only name, price, image, and learn_more available.
For the product attribute name i’ve spotted the file
vendor/magento/module-catalog/view/frontend/ui_component/widget_recently_viewed.xml:
<column name="name" component="Magento_Catalog/js/product/name" sortOrder="1" displayArea="details-area"> <settings> <label translate="true">Name</label> <bodyTmpl>Magento_Catalog/product/name</bodyTmpl> </settings> </column>
vendor/magento/module-catalog/view/base/web/template/product/name.html:
<strong if="isAllowed()" class="product-item-name"> <a attr="href: $row().url" html="$col.getLabel($row())"/> </strong>
We are already learned how to create a basic module in Magento 2. We need to create module.xml and registration.php files. You can create module.xml and registration.php from this tutorial.
Here we are using Dolphin as Vendor name and Recently as the name of the module. You can change this according to your Vendor and Module name.
we have a custom product attribute color and we are going to include this attribute to be loaded in the recently viewed widget list view.
Create a widget file widget.xml in app/code/Dolphin/Recently/etc folder with the following code.
<?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="color" value="color"> <label translate="true">Color</label> </option> </options> </parameter> </parameters> </widget> </widgets>
Once apply the above code you will be able to choose the option in Widgets->Choose Widget->Widget Options->Product attributes to show
Create dependency injection file di.xml in the app/code/Dolphin/Recently/etc folder with the following code.
<?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="color" xsi:type="object">\Dolphin\Recently\Ui\DataProvider\Product\Listing\Collector\Color</item> </argument> </arguments> </type> </config>
Create Extention Attribute file extension_attributes.xml in the app/code/Dolphin/Recently/etc folder with the following code.
<?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="color" type="string"/> </extension_attributes> </config>
Create Class file Color.php in the app/code/Dolphin/Recently/Ui/DataProvider/Product/Listing/Collector folder with the following code.
<?php namespace Dolphin\Recently\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 Color * @package Dolphin\Recently\Ui\DataProvider\Product\Listing\Collector */ class Color implements ProductRenderCollectorInterface { const KEY = "color"; /** * @var ProductRenderExtensionFactory */ private $productRenderExtensionFactory; /** * color constructor. * @param ProductRenderExtensionFactory $productRenderExtensionFactory */ public function __construct( ProductRenderExtensionFactory $productRenderExtensionFactory, \Magento\Catalog\Model\ProductFactory $productFactory ) { $this->productRenderExtensionFactory = $productRenderExtensionFactory; $this->productFactory = $productFactory; } /** * @param ProductInterface $product * @param ProductRenderInterface $productRender */ public function collect(ProductInterface $product, ProductRenderInterface $productRender) { $extensionAttributes = $productRender->getExtensionAttributes(); if (!$extensionAttributes) { $extensionAttributes = $this->productRenderExtensionFactory->create(); } if($color = $product->getColor()) { $colorValue= $this->getOptionLabelByValue('color',$color); $extensionAttributes->setColor($colorValue); } $productRender->setExtensionAttributes($extensionAttributes); } public function getOptionLabelByValue($attributeCode,$optionId) { $product = $this->productFactory->create(); $isAttributeExist = $product->getResource()->getAttribute($attributeCode); $optionText = ''; if ($isAttributeExist && $isAttributeExist->usesSource()) { $optionText = $isAttributeExist->getSource()->getOptionText($optionId); } return $optionText; } }
Create widget definition widget_recently_viewed.xml in the app/code/Dolphin/Recently/view/frontend/ui_component folder with the following code.include our attribute as a column in the widget definition.
<?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="color" component="Dolphin_Recently/js/product/color" displayArea="description-area"> <settings> <label translate="true">color</label> <bodyTmpl>Dolphin_Recently/product/color</bodyTmpl> </settings> </column> </columns> </listing>
Create js file color.js in the app/code/Dolphin/Recently/view/frontend/web/js/product folder with the following code.
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 "color" in row['extension_attributes']; }, /** * @param row * @returns {*} */ getValue: function (row) { console.log(row['extension_attributes']['color']); return row['extension_attributes']['color']; }, /** * @param row * @returns {*|boolean} */ isAllowed: function (row) { console.log(columnStatusValidator.isValid(this.source(), 'color', 'show_attributes') && this.hasValue(row) ); return (columnStatusValidator.isValid(this.source(), 'color', 'show_attributes') && this.hasValue(row) ); } }); });
Create html template file color.html in the app/code/Dolphin/Recently/view/frontend/web/template/product folder with the following code.
<strong if="isAllowed($row())" class="product product-item-color color"> <span class="label" text="label"></span> <span class="value" text="getValue($row())"></span> </strong>
Now execute the below command and go to the system configuration page:
[dt_highlight color=”” text_color=”” bg_color=””]php bin/magento setup:upgrade[/dt_highlight]
[dt_highlight color=”” text_color=”” bg_color=””]php bin/magento setup:static-content:deploy -f[/dt_highlight]
[dt_highlight color=”” text_color=”” bg_color=””]php bin/magento cache:flush[/dt_highlight]
Result:
I Hope, This instruction will be helpful for you.
Happy Coding with magento2!! ?
If you have any difficulties regarding this blog, do consider them posting in the Comments section below!
I’m here to help.
Thank you!