INT-285: Add Recently viewed component

CHANGELOG.md

@@ -2,6 +2,10 @@
 ## Unreleased
 ### Add
 - Add support for PHP 8.4
+- Add Recently viewed component
+
+### Change
+- Upgrade Web Components version to v5.2.1
 
 ## [v6.5.2] - 2026.03.02
 ### Add

src/Config/Communication.php

@@ -78,6 +78,7 @@ public function getFactFinderFeatures(): array
             'useSimilarProducts'         => (bool) $this->config('useSimilarProducts'),
             'usePushedProductsCampaigns' => (bool) $this->config('usePushedProductsCampaigns'),
             'usePopularSearches'         => (bool) $this->config('usePopularSearches'),
+            'useRecentlyViewed'          => (bool) $this->config('useRecentlyViewed'),
         ];
     }
 }

src/Resources/config/config.xml

@@ -157,6 +157,12 @@
             <label>Popular searches</label>
             <defaultValue>true</defaultValue>
         </input-field>
+
+        <input-field type="bool">
+            <name>useRecentlyViewed</name>
+            <label>Recently Viewed Products</label>
+            <defaultValue>false</defaultValue>
+        </input-field>
     </card>
 
     <card>

src/Resources/public/ff-web-components/default-styles.css

@@ -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;
 }

src/Resources/views/storefront/components/factfinder/recently_viewed.html.twig

@@ -0,0 +1,42 @@
+{% block component_factfinder_recently_viewed %}
+  <ff-recently-viewed wait-for-update>
+    <h3>Recently viewed:</h3>
+
+    <ff-record-list subscribe="false" class="row grid-row grid-view">
+      <template data-role="record">
+        <ff-record class="cms-listing-col col-sm-6 col-lg-4 col-xl-3">
+          <div class="card product-box box-standard">
+            <div class="card-body">
+              <div class="product-image-wrapper">
+                <a class="product-image-link is-standard" title="{{ '{{Name}}' }}"
+                   data-redirect="{{ '{{Deeplink}}' }}" data-anchor="{{ '{{Deeplink}}' }}"
+                   data-redirect-target="_self">
+                  <img class="product-image is-standard" data-image="{{ '{{ImageUrl}}' }}"
+                       alt="{{ '{{Name}}' }}" title="{{ '{{Name}}' }}"/>
+                </a>
+              </div>
+              <div class="product-info">
+                <a class="product-name stretched-link" title="{{ '{{Name}}' }}" data-redirect-target="_self"
+                   data-redirect="{{ '{{Deeplink}}' }}" data-anchor="{{ '{{Deeplink}}' }}">
+                  {{ '{{Name}}' }}
+                </a>
+                <div class="product-description">{{ '{{Description}}' }}</div>
+                <div class="product-price-info">
+                  <p class="product-price">{{ '{{ $ Price}}' }} *</p>
+                </div>
+                <div class="product-action">
+                  <div class="d-grid">
+                    <a class="btn btn-light btn-detail" title="{{ '{{Name}}' }}" data-redirect-target="_self"
+                       data-redirect="{{ '{{Deeplink}}' }}" data-anchor="{{ '{{Deeplink}}' }}">
+                      {{ 'listing.boxProductDetails'|trans|sw_sanitize }}
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ff-record>
+      </template>
+    </ff-record-list>
+  </ff-recently-viewed>
+{% endblock %}

src/Resources/views/storefront/element/cms-element-product-description-reviews.html.twig

@@ -35,5 +35,9 @@
       } %}
     {% endif %}
 
+    {% if page.extensions.factfinder.features.useRecentlyViewed %}
+      {% sw_include '@Parent/storefront/components/factfinder/recently_viewed.html.twig' %}
+    {% endif %}
+
   </div>
 {% endblock %}

src/Resources/views/storefront/page/product-detail/meta.html.twig

@@ -0,0 +1,35 @@
+{% sw_extends '@Storefront/storefront/page/product-detail/meta.html.twig' %}
+
+{% block layout_head_canonical %}
+  {{ parent() }}
+
+
+  {% if page.extensions.factfinder.features.useRecentlyViewed and page.product %}
+    {% set product = page.product %}
+
+    {% set masterProductNumber = product.productNumber %}
+
+    {% if product.parentId and product.parent and product.parent.productNumber %}
+      {% set masterProductNumber = product.parent.productNumber %}
+    {% endif %}
+
+    <script>
+      document.addEventListener(`ffCoreReady`, ({ factfinder }) => {
+        factfinder.components.recentlyViewed.config({
+          maxLength: 5,
+        });
+
+        factfinder.components.recentlyViewed.addEntry({
+          Name: '{{ product.translated.name|escape('js') }}',
+          Master: '{{ masterProductNumber|escape('js') }}',
+          ProductNumber: '{{ product.productNumber|escape('js') }}',
+          Deeplink: '{{ seoUrl('frontend.detail.page', {'productId': product.id})|escape('js') }}',
+          Price: {{ product.calculatedPrice.unitPrice|default(0) }},
+          ImageUrl: '{{ product.cover.media.url|escape('js') }}'
+        });
+      });
+    </script>
+  {% endif %}
+
+
+{% endblock %}