INT-285: Add Recently viewed component

Add Recently viewed component

Author: Rayn93

CHANGELOG.md

@@ -1,4 +1,12 @@
 # Changelog
+## Unreleased
+### Add
+- Add Recently viewed component
+
+### Change
+- Upgrade Web Components version to v5.2.1
+- Remove deprecation for fputcsv()
+
 ## [v7.2.2] - 2026.04.17
 ### Fix
 - Fix ImageUrl for products without image

docs/assets/feature-settings.png

@@ -83,6 +83,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/Config/Communication.php

@@ -23,7 +23,7 @@ public function addEntity(array $entity): void
     {
         $this->fileResource = $this->fileResource ?? new File('php://output', 'w');
         ob_start();
-        $this->fileResource->fputcsv($entity, $this->delimiter);
+        $this->fileResource->fputcsv($entity, $this->delimiter, '"', '\\');
         $this->output->writeln(rtrim(ob_get_clean()));
     }
 }

src/Export/Stream/ConsoleOutput.php

@@ -23,6 +23,6 @@ public function __construct($fileResource, string $delimiter = ';')
 
     public function addEntity(array $entity): void
     {
-        fputcsv($this->fileResource, $entity, $this->delimiter);
+        fputcsv($this->fileResource, $entity, $this->delimiter, '"', '\\');
     }
 }

src/Export/Stream/CsvFile.php

@@ -166,6 +166,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/config/config.xml

@@ -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/public/ff-web-components/bundle.js

@@ -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/public/ff-web-components/default-styles.css

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