INT-287: Add Recently viewed component

Add Recently viewed component and update webcomponents library to version 5.2.1

Author: Rayn93

CHANGELOG.md

@@ -3,9 +3,10 @@
 ### Add
 - Add support for Magento v2.4.9
 - Add support for PHP 8.4
+- Add Recently viewed component
 
 ### Update
-- Update WebComponents library to version 5.1.7
+- Update WebComponents library to version 5.2.1
 - Add template to suggest element
 
 ## [v5.2.1] - 2025.07.17

src/ViewModel/ProductBasedComponent.php

@@ -6,6 +6,7 @@
 
 use Magento\Catalog\Api\Data\ProductInterface;
 use Magento\Catalog\Helper\Image;
+use Magento\Catalog\Helper\ImageFactory;
 use Magento\Framework\App\Config\ScopeConfigInterface;
 use Magento\Framework\Registry;
 use Magento\Framework\UrlInterface;
@@ -22,6 +23,7 @@ public function __construct(
         private readonly ScopeConfigInterface $scopeConfig,
         private readonly UrlInterface         $urlBuilder,
         private readonly Registry             $registry,
+        private readonly ImageFactory $imageHelperFactory
     ) {
     }
 
@@ -57,4 +59,15 @@ public function isSsrEnable(): bool
     {
         return (bool) $this->scopeConfig->isSetFlag(self::PATH_USE_SRR);
     }
+
+    public function getImageUrl($product): string
+    {
+        if (!$product) {
+            return '';
+        }
+
+        $imageHelper = $this->imageHelperFactory->create();
+
+        return $imageHelper->init($product, 'product_small_image')->getUrl();
+    }
 }

src/etc/adminhtml/system/components.xml

@@ -51,6 +51,11 @@
             <label>Popular searches</label>
             <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
         </field>
+
+        <field id="recently_viewed" translate="label" type="select" sortOrder="11" showInDefault="1" showInWebsite="1" showInStore="1">
+            <label>Recently Viewed Products</label>
+            <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+        </field>
     </group>
     <group id="components_options" translate="label comment" sortOrder="41" showInDefault="1" showInWebsite="1" showInStore="1">
         <label>Custom Elements Options</label>

src/etc/config.xml

@@ -22,6 +22,7 @@
                 <similar_products>1</similar_products>
                 <paging>1</paging>
                 <popular_searches>1</popular_searches>
+                <recently_viewed>0</recently_viewed>
             </components>
             <data_transfer>
                 <ff_password backend_model="Magento\Config\Model\Config\Backend\Encrypted" />

src/i18n/de_DE.csv

@@ -24,6 +24,7 @@ No,Nein
 "Show","Zeige"
 "products per page","Artikel pro Seite"
 Recommendations,"Empfohlene Produkte"
+"Recently Viewed Products","Zuletzt angesehene Produkte"
 "Add to Cart","In den Warenkorb"
 "{{totalHits}} Items","{{totalHits}} Artikel"
 Search…,Suchen…

src/view/frontend/layout/catalog_product_view.xml

@@ -22,6 +22,11 @@
                     <argument name="view_model" xsi:type="object">Omikron\Factfinder\ViewModel\ProductBasedComponent</argument>
                 </arguments>
             </block>
+            <block class="Magento\Framework\View\Element\Template" name="factfinder.recently_viewed" ifconfig="factfinder/components/recently_viewed" template="Omikron_Factfinder::ff/recently_viewed.phtml">
+                <arguments>
+                    <argument name="view_model" xsi:type="object">Omikron\Factfinder\ViewModel\ProductBasedComponent</argument>
+                </arguments>
+            </block>
         </referenceContainer>
 
         <referenceBlock name="factfinder.feedbacktext">

src/view/frontend/templates/ff/recently_viewed.phtml

@@ -0,0 +1,73 @@
+<?php
+/** @var Magento\Framework\View\Element\Template $block */
+/** @var ?Omikron\Factfinder\ViewModel\ProductBasedComponent $viewModel */
+/** @var Magento\Framework\Escaper $escaper */
+$viewModel = $block->getViewModel();
+$product = $viewModel->getProduct();
+
+if (!$product || !$product->getId()) {
+    return;
+}
+
+$masterProductNumber = $product->getSku();
+
+if ($product->getTypeId() === \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE) {
+    $masterProductNumber = $product->getData('sku');
+}
+
+$imageUrl = $viewModel->getImageUrl($product);
+?>
+
+<script>
+    document.addEventListener('ffCoreReady', ({ factfinder }) => {
+        factfinder.components.recentlyViewed.config({
+            maxLength: 9,
+        });
+
+        factfinder.components.recentlyViewed.addEntry({
+            Name: '<?= $escaper->escapeJs($product->getName()) ?>',
+            Master: '<?= $escaper->escapeJs($masterProductNumber) ?>',
+            ProductNumber: '<?= $escaper->escapeJs($product->getSku()) ?>',
+            Deeplink: '<?= $escaper->escapeJs($product->getProductUrl()) ?>',
+            Price: <?= (float) $product->getFinalPrice() ?>,
+            ImageUrl: '<?= $escaper->escapeJs($imageUrl) ?>',
+        });
+    });
+</script>
+
+
+<ff-recently-viewed wait-for-update>
+    <div class="block upsell">
+        <div class="block-title title">
+            <strong role="heading" aria-level="2"><?= $escaper->escapeHtml(__('Recently Viewed Products')) ?></strong>
+        </div>
+        <div class="block-content content">
+
+            <ff-record-list class="products list items product-items" subscribe="false" unresolved>
+                <template data-role="record">
+                    <ff-record class="item product product-item">
+                        <div class="product-item-info" data-container="product-grid">
+                            <a class="product-image-container" data-redirect="{{Deeplink}}" data-anchor="{{Deeplink}}" data-redirect-target="_self">
+                                <span class="product-image-wrapper">
+                                    <img class="product-image-photo" data-image="{{ImageUrl}}" alt="{{Name}}"/>
+                                </span>
+                            </a>
+
+                            <div class="product details product-item-details">
+                                <div class="product name product-item-name">{{Name}}</div>
+                                <div class="price-box price-final_price" data-role="priceBox">
+                                    <span class="price-container price-final_price tax weee">
+                                        <span data-price-amount="{{masterValues.Price}}" data-price-type="finalPrice" class="price-wrapper">
+                                            <span class="price">{{$ Price}}</span>
+                                        </span>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </ff-record>
+                </template>
+            </ff-record-list>
+
+        </div>
+    </div>
+</ff-recently-viewed>

src/view/frontend/web/ff-web-components/bundle.js

@@ -274,6 +274,13 @@ ff-similar-products {
 }
 
 
+/* ---- ff-recently-viewed ---- */
+
+ff-recently-viewed {
+    display: block;
+}
+
+
 /* ---- ff-onfocus-suggest ---- */
 
 ff-onfocus-suggest {
@@ -727,6 +734,13 @@ ff-slider .ffw-slider-button-right {
     transform: translate(0, -50%);
 }
 
+/* Hidden visibility is important to take nested elements out of the tabindex chain when group is collapsed.
+   `display:none` cannot be used because it breaks the recalculation of the slider's position. */
+ff-asn-group .ffw-wrapper:not([opened]),
+ff-asn-group-slider .ffw-wrapper:not([opened]) {
+    visibility: hidden;
+}
+
 ff-asn-remove-all-filters {
     display: inline-block;
 }