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

Table of Contents

  1. Introduction
  2. Setting Up the Environment
  3. Step 1: Create a Custom Module
  4. Step 2: Extend the Product Model
  5. Step 3: Override Widget Template
  6. Step 4: Update Layout XML
  7. Step 5: Test and Deploy
  8. Conclusion
  9. FAQ
Shopify - App image

Introduction

Imagine you are browsing an e-commerce website, and you come across products you've viewed before but can't quite recall their details. Conveniently, a widget shows the recently viewed products, but it only displays the name, image, and a 'learn more' button. Wouldn't it be more helpful if this widget also showed the price and SKU? This blog post delves into enhancing your Magento 2.4.5 store by adding these custom attributes to the Recently Viewed Products widget, providing a better user experience and potentially boosting your sales.

Are you a Magento site owner or developer looking to make your recently viewed products widget more informative? You’ve landed on the right post. Here, we will guide you step-by-step on how to add custom attributes like PRICE and SKU to this widget in Magento 2.4.5.

Setting Up the Environment

Before diving into modifications, ensure your development environment is set up correctly:

  1. Magento Installation: Ensure you have a running Magento 2.4.5 instance.
  2. Access to Codebase: Use FTP, SSH, or a similar method to access your Magento codebase.
  3. Backup: Always back up your site before making changes to the core files.

Step 1: Create a Custom Module

To avoid touching the core files, we'll create a custom module for this enhancement.

  1. Create Directories:

    • app/code/YourVendor/RecentlyViewed
    • app/code/YourVendor/RecentlyViewed/etc
    • app/code/YourVendor/RecentlyViewed/etc/module.xml
    • app/code/YourVendor/RecentlyViewed/registration.php

  2. Define 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="YourVendor_RecentlyViewed" setup_version="1.0.0"/>
</config>

  3. Create registration.php:

    <?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'YourVendor_RecentlyViewed',
    __DIR__
);
?>

Step 2: Extend the Product Model

To make sure additional attributes like PRICE and SKU are available, we need to extend the product model.

  1. Create product attributes XML file:

    • app/code/YourVendor/RecentlyViewed/etc/frontend/events.xml
    <?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework/Event/etc/events.xsd">
    <event name="catalog_block_product_list_collection">
        <observer name="add_custom_attributes" instance="YourVendor\RecentlyViewed\Observer\AddCustomAttributes"/>
    </event>
</config>

  2. Create Observer Class:

    • app/code/YourVendor/RecentlyViewed/Observer/AddCustomAttributes.php
    <?php
namespace YourVendor\RecentlyViewed\Observer;

use Magento\Framework\Event\ObserverInterface;

class AddCustomAttributes implements ObserverInterface
{
    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        $collection = $observer->getEvent()->getCollection();
        $collection->addAttributeToSelect('price');
        $collection->addAttributeToSelect('sku');
    }
}
?>

Step 3: Override Widget Template

The next step is to override the template file used by the Recently Viewed Products widget.

  1. Create widget templates directory:

    • app/code/YourVendor/RecentlyViewed/view/frontend/templates

  2. Copy existing template: Locate the original template file in vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml and copy it to your custom module’s template directory.

  3. Modify the template to include SKU and PRICE:

    • app/code/YourVendor/RecentlyViewed/view/frontend/templates/product/list/items.phtml
    <?php
foreach ($_productCollection as $_product): ?>
    <div class="product-item">
        <div class="product-item-info">
            <a href="<?php echo $_product->getProductUrl(); ?>" class="product-item-photo">
                <span class="product-item-image">
                    <img src="<?php echo $block->getImage($_product, 'product_base_image')->getImageUrl(); ?>" alt="<?php echo htmlspecialchars($_product->getName(), ENT_QUOTES, 'UTF-8'); ?>">
                </span>
            </a>
            <div class="product-item-details">
                <strong class="product-item-name"><a href="<?php echo $_product->getProductUrl(); ?>"><?php echo htmlspecialchars($_product->getName(), ENT_QUOTES, 'UTF-8'); ?></a></strong>
                <div class="product-item-price">
                    <?php echo $block->getPriceHtml($_product); ?>
                </div>
                <div class="product-item-sku">
                    SKU: <?php echo htmlspecialchars($_product->getSku(), ENT_QUOTES, 'UTF-8'); ?>
                </div>
            </div>
        </div>
    </div>
<?php endforeach; ?>

Step 4: Update Layout XML

To ensure Magento uses our custom template for the widget, we need to update the layout XML.

  1. Create Layout Update:

    • app/code/YourVendor/RecentlyViewed/view/frontend/layout/default.xml
    <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="recently_viewed.products">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">YourVendor_RecentlyViewed::product/list/items.phtml</argument>
            </action>
        </referenceBlock>
    </body>
</page>

Step 5: Test and Deploy

Make sure to clear all caches and run setup:upgrade command to register your module:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
php bin/magento cache:flush

Testing

  1. Recently Viewed Products Widget: Navigate to any product page and view a few products to populate the Recently Viewed Products widget.
  2. Check Attributes: Ensure that both PRICE and SKU are displayed correctly in the widget entries.

Conclusion

By following these steps, you can successfully add custom attributes like PRICE and SKU to the Recently Viewed Products widget in Magento 2.4.5. This not only enhances the user experience but also provides essential information upfront, helping customers make informed decisions quickly. Stay ahead of the competition by customizing your Magento storefront to provide an enriched shopping experience.

FAQ

Q1: Can I add more custom attributes to the widget? Yes, follow the same approach and modify the observer to include additional attributes as needed.

Q2: What if I face issues after implementing the custom module? Ensure all caches are cleared, and re-index the data. Always back up your site before making any changes.

Q3: Will this customization affect my site's performance? Adding a few extra attributes generally has a minimal effect, but it’s always good to monitor the performance, especially if your site has high traffic.