FFWEB-3329: Add Popular Searches

Add Popular Searches
Upgrade Web Components version to v5.1.0
Implement redirection to search result page for searchTerm and brand suggests

Author: Rayn93

CHANGELOG.md

@@ -1,4 +1,15 @@
 # Changelog
+## Unreleased
+### Add
+- Add Popular Searches
+
+### Change
+- Upgrade Web Components default styles
+- Upgrade Web Components version to v5.1.0
+
+### Fix
+- Implement redirection to search result page for searchTerm and brand suggests
+
 ## [v6.0.0] - 2025.02.05
 ### BREAKING
 - IMPORTANT! Update Fact-Finder Web Components library from v4 to v5

assets/css/styles.css

@@ -649,20 +649,16 @@ ff-slider-control .ffw-slider-control-default .ffw-slider-control-line {
     background-color: black;
 }
 
-ff-slider-control .ffw-sliderSection {
-    margin-top: 10px;
-}
-
 ff-slider {
     display: block;
-    z-index: -1001;
     pointer-events: none;
 }
 
 ff-slider .ffw-slider-container {
     top: 0;
     position: relative;
     pointer-events: none;
+    height: 51px;
 }
 
 ff-slider .ffw-triangle {
@@ -697,11 +693,7 @@ ff-slider .ffw-triangle.ffw-no-transition {
 
 ff-slider .ffw-line {
     pointer-events: auto;
-    z-index: 999;
-    top: 50%;
-    position: absolute;
     height: 1px;
-    transform: translateY(-50%);
     background-color: black;
     background-clip: padding-box;
     border-top: 25px solid transparent;
@@ -801,3 +793,24 @@ ff-record { margin-top: 10px !important}
 #productContainer { background: #fff; margin-top: 30px }
 
 .ff-asn { width: 200px; margin-left: 20px; background: #ffffff; }
+
+ff-suggest .ff-popular-searches {
+    width: 300px;
+    padding-bottom: 20px;
+    background: #fff;
+}
+ff-suggest .ff-popular-searches h3 {
+    background: #6a7281;
+    padding: 10px;
+    color: #ffffff;
+}
+
+ff-suggest .ff-popular-searches div {
+    margin: 2px 10px;
+    cursor: pointer;
+}
+
+#searchContainer {
+    background: #fff;
+}
+

assets/js/ff-web-components/bundle.js

@@ -1,3 +1,4 @@
+
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -26,7 +27,13 @@
  * http://polymer.github.io/PATENTS.txt
  */
 
-/*!
- * mustache.js - Logic-less {{mustache}} templates with JavaScript
- * http://github.com/janl/mustache.js
- */
+/**
+@license
+Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/

assets/js/ff-web-components/bundle.js.LICENSE

@@ -147,6 +147,13 @@
             'value'    => false,
             'position' => $settingPosition++,
         ],
+        [
+            'group'    => 'ffFeatures',
+            'name'     => 'ffPopularSearches',
+            'type'     => 'bool',
+            'value'    => false,
+            'position' => $settingPosition++,
+        ],
         [
             'group'    => 'ffFeed',
             'name'     => 'ffExportAttributes',

metadata.php

@@ -18,4 +18,5 @@
     'FF_YOUR_SEARCH_FOR'      => 'Deine Suche nach:',
     'FF_RECOMMENDATION'       => 'Empfohlene Produkte',
     'FF_SIMILAR_PRODUCTS'     => 'Ähnliche Produkte',
+    'FF_POPULAR_SEARCHES'     => 'Beliebte Suchanfragen',
 ];

translations/de/ffwebcomponents_de_lang.php

@@ -18,4 +18,5 @@
     'FF_YOUR_SEARCH_FOR'      => 'Your search for:',
     'FF_RECOMMENDATION'       => 'Recommended Products',
     'FF_SIMILAR_PRODUCTS'     => 'Similar Products',
+    'FF_POPULAR_SEARCHES'     => 'Popular Searches',
 ];

translations/en/ffwebcomponents_en_lang.php

@@ -25,6 +25,7 @@
     'SHOP_MODULE_ffRecommendations'                              => 'Empfehlungen',
     'SHOP_MODULE_ffSimilarProducts'                              => 'Ähnliche Produkte',
     'SHOP_MODULE_ffPushedProducts'                               => 'Pushed products',
+    'SHOP_MODULE_ffPopularSearches'                              => 'Beliebte Suchanfragen',
     'SHOP_MODULE_GROUP_ffFeed'                                   => 'Feed-Einstellungen',
     'SHOP_MODULE_ffExportAttributes'                             => 'Exportierte Attribute',
     'HELP_SHOP_MODULE_ffExportAttributes'                        => 'Wähle die Attribute aus, die du exportieren möchtest. Multi-Attribute werden in einer Spalte gruppiert, und stellen typischerweise Filter dar.',

views/admin_twig/de/ffwebcomponents_de_lang.php

@@ -25,6 +25,7 @@
     'SHOP_MODULE_ffRecommendations'                              => 'Recommendations',
     'SHOP_MODULE_ffSimilarProducts'                              => 'Similar products',
     'SHOP_MODULE_ffPushedProducts'                               => 'Pushed products',
+    'SHOP_MODULE_ffPopularSearches'                              => 'Popular Searches',
     'SHOP_MODULE_GROUP_ffFeed'                                   => 'Feed settings',
     'SHOP_MODULE_ffExportAttributes'                             => 'Exported Attributes',
     'HELP_SHOP_MODULE_ffExportAttributes'                        => 'Select attributes which you want to export. Multi-Attribute set to `No` means that specific attribute will be exported in separate column.',

views/admin_twig/en/ffwebcomponents_en_lang.php

@@ -54,6 +54,23 @@
                 }
             });
 
+            {% if oView.getClassKey() != "search_result" %}
+                factfinder.notifications.addSuggestClickListener(origin => {
+                    if (origin.suggestion.type === `searchTerm` || origin.suggestion.type === `brand`) {
+                        window.location.href =  `?query=${origin.suggestion.searchParams.query}&cl=search_result`;
+
+                        return false;
+                    }
+                });
+
+                factfinder.notifications.addPopularSearchClickListener(({ origin, popularSearch }) => {
+                    window.location = `?query=${popularSearch.name}&cl=search_result`;
+
+                    return false;
+                });
+
+            {% endif %}
+
             {% if oViewConf.getSearchImmediate()|escape("js") and oView.getClassKey() == "search_result" %}
                 const searchParams = factfinder.utils.env.searchParamsFromUrl({ categoryFieldName: `{{oViewConf.getFFStringConfigParam('ffCategoryPathFieldName')}}` });
                 initialSearch(searchParams, { requestOptions: { origin: `initialSearch` } });