INT-176: Add template to suggest element

Add template to suggest element

Author: Rayn93

CHANGELOG.md

@@ -2,6 +2,7 @@
 ## Unreleased
 ### Change
 - Upgrade Web Components version to v5.1.7
+- Add template to suggest element
 
 ## [v6.5.0] - 2025.08.06
 ### Add

src/Resources/views/storefront/layout/factfinder/suggest.html.twig

@@ -10,51 +10,53 @@
         </template>
       {% endblock %}
 
-      {% block layout_search_suggest_result_suggest_container %}
-        <section class="ff-suggest-container row pb-4">
-          <div data-container="searchTerm" class="col">
-            <h3 class="h5 container-caption">{{ 'ff.suggest.SearchTerms'|trans|striptags }}</h3>
-            <ff-suggest-item type="searchTerm">
-              <a href="#" class="ff-search-term">{{ '{{{name}}}' }}</a>
-            </ff-suggest-item>
-          </div>
+      <template data-role="suggestions">
+        {% block layout_search_suggest_result_suggest_container %}
+          <section class="ff-suggest-container row pb-4">
+            <div data-container="searchTerm" class="col">
+              <h3 class="h5 container-caption">{{ 'ff.suggest.SearchTerms'|trans|striptags }}</h3>
+              <ff-suggest-item type="searchTerm">
+                <a href="#" class="ff-search-term">{{ '{{{name}}}' }}</a>
+              </ff-suggest-item>
+            </div>
 
-          <div data-container="category" class="col">
-            <h3 class="h5 container-caption">{{ 'ff.suggest.Categories'|trans|striptags }}</h3>
-            <ff-suggest-item type="category">
-              <a href="#" class="ff-category">{{ '{{{name}}}' }}</a>
-            </ff-suggest-item>
-          </div>
+            <div data-container="category" class="col">
+              <h3 class="h5 container-caption">{{ 'ff.suggest.Categories'|trans|striptags }}</h3>
+              <ff-suggest-item type="category">
+                <a href="#" class="ff-category">{{ '{{{name}}}' }}</a>
+              </ff-suggest-item>
+            </div>
 
-          <div data-container="brand" class="col">
-            <h3 class="h5 container-caption">{{ 'ff.suggest.Brands'|trans|striptags }}</h3>
-            <ff-suggest-item type="brand">
-              <a href="#" class="ff-brand">{{ '{{{name}}}' }}</a>
-            </ff-suggest-item>
-          </div>
-        </section>
-      {% endblock %}
+            <div data-container="brand" class="col">
+              <h3 class="h5 container-caption">{{ 'ff.suggest.Brands'|trans|striptags }}</h3>
+              <ff-suggest-item type="brand">
+                <a href="#" class="ff-brand">{{ '{{{name}}}' }}</a>
+              </ff-suggest-item>
+            </div>
+          </section>
+        {% endblock %}
 
-      {% block layout_search_suggest_result_product_container %}
-        <section class="ff-suggest-container ff-suggest-container--products">
-          <h3 class="h5 container-caption">{{ 'ff.suggest.Products'|trans|striptags }}</h3>
-          {% block layout_search_suggest_result_product %}
-            <div data-container="productName">
-              <ff-suggest-item type="productName">
-                <div class="search-suggest-product js-result search-suggest-product-link">
-                  <div class="row align-items-center no-gutters">
-                    <div class="col-auto search-suggest-product-image-container">
-                      <img class="search-suggest-product-image" data-image="{{ '{{image}}' }}" alt="photo"/>
+        {% block layout_search_suggest_result_product_container %}
+          <section class="ff-suggest-container ff-suggest-container--products">
+            <h3 class="h5 container-caption">{{ 'ff.suggest.Products'|trans|striptags }}</h3>
+            {% block layout_search_suggest_result_product %}
+              <div data-container="productName">
+                <ff-suggest-item type="productName">
+                  <div class="search-suggest-product js-result search-suggest-product-link">
+                    <div class="row align-items-center no-gutters">
+                      <div class="col-auto search-suggest-product-image-container">
+                        <img class="search-suggest-product-image" data-image="{{ '{{image}}' }}" alt="photo"/>
+                      </div>
+                      <a href="#" class="col search-suggest-product-name">{{ '{{{name}}}' }}</a>
+                      <div class="col-auto search-suggest-product-price">{{ '{{attributes.Price}}' }}</div>
                     </div>
-                    <a href="#" class="col search-suggest-product-name">{{ '{{{name}}}' }}</a>
-                    <div class="col-auto search-suggest-product-price">{{ '{{attributes.Price}}' }}</div>
                   </div>
-                </div>
-              </ff-suggest-item>
-            </div>
-          {% endblock %}
-        </section>
-      {% endblock %}
+                </ff-suggest-item>
+              </div>
+            {% endblock %}
+          </section>
+        {% endblock %}
+      </template>
     </ff-suggest>
   </div>
 {% endblock %}