Merge pull request #89 from Nosto/SSP-141_filter_styling_for_search_p…

…lp_v4 SSP-141 kawohl.de - Filter Styling for Search PLP v4
Nosto · Oct 14, 2024 · d2ad3d3 · d2ad3d3
2 parents 1ca7c80 + a003f71
commit d2ad3d3
Showing 1 changed file with 47 additions and 46 deletions.
diff --git a/src/Resources/views/storefront/component/listing/filter-panel.html.twig b/src/Resources/views/storefront/component/listing/filter-panel.html.twig
@@ -9,53 +9,54 @@
         {% set filters = slot.data.listing.criteria.extensions.nostoFilters.filters %}
     {% endif %}
 
-    {% block component_filter_panel_item_test_filter %}
-        {% if filters %}
-            {% for filter in filters %}
-                {% if filter is instanceof("\\Nosto\\NostoIntegration\\Search\\Response\\GraphQL\\Filter\\LabelTextFilter") %}
-                    {% sw_include '@Storefront/storefront/component/listing/filter/filter-property-select.html.twig' with {
-                        elements: filter.values,
-                        sidebar: sidebar,
-                        name: filter.id,
-                        displayName: filter.name,
-                        displayType: 'text',
-                        pluginSelector: 'filter-property-select',
-                        propertyName: filter.name
-                    } %}
-                {% endif %}
+    <div class="filter-panel-items-container">
+        {% block component_filter_panel_item_test_filter %}
+            {% if filters %}
+                {% for filter in filters %}
+                    {% if filter is instanceof("\\Nosto\\NostoIntegration\\Search\\Response\\GraphQL\\Filter\\LabelTextFilter") %}
+                        {% sw_include '@Storefront/storefront/component/listing/filter/filter-property-select.html.twig' with {
+                            elements: filter.values,
+                            sidebar: sidebar,
+                            name: filter.id,
+                            displayName: filter.name,
+                            displayType: 'text',
+                            pluginSelector: 'filter-property-select',
+                            propertyName: filter.name
+                        } %}
+                    {% endif %}
 
-                {% if filter is instanceof("\\Nosto\\NostoIntegration\\Search\\Response\\GraphQL\\Filter\\RangeSliderFilter") %}
-                    {% sw_include '@Storefront/storefront/component/listing/filter/filter-range.html.twig' with {
-                        sidebar: sidebar,
-                        name: filter.id,
-                        minKey: filter.minKey,
-                        maxKey: filter.maxKey,
-                        lowerBound: 0,
-                        displayName: filter.name,
-                        minInputValue: filter.min,
-                        maxInputValue: filter.max,
-                        propertyName: filter.name
-                    } %}
-                {% endif %}
+                    {% if filter is instanceof("\\Nosto\\NostoIntegration\\Search\\Response\\GraphQL\\Filter\\RangeSliderFilter") %}
+                        {% sw_include '@Storefront/storefront/component/listing/filter/filter-range.html.twig' with {
+                            sidebar: sidebar,
+                            name: filter.id,
+                            minKey: filter.minKey,
+                            maxKey: filter.maxKey,
+                            lowerBound: 0,
+                            displayName: filter.name,
+                            minInputValue: filter.min,
+                            maxInputValue: filter.max,
+                            propertyName: filter.name
+                        } %}
+                    {% endif %}
 
-                {% if filter is instanceof("\\Nosto\\NostoIntegration\\Search\\Response\\GraphQL\\Filter\\RatingFilter") %}
-                    {% sw_include '@Storefront/storefront/component/listing/filter/filter-rating-select.html.twig' with {
-                        elements: filter.values,
-                        maxPoints: filter.maxPoints,
-                        sidebar: sidebar,
-                        name: filter.id,
-                        hidden: filter.hidden,
-                        displayName: filter.name,
-                        pluginSelector: 'filter-rating-select',
-                        propertyName: filter.name
-                    } %}
-                {% endif %}
-            {% endfor %}
-        {% endif %}
-    {% endblock %}
-
-    {% if not filters %}
-        {{ parent() }}
-    {% endif %}
+                    {% if filter is instanceof("\\Nosto\\NostoIntegration\\Search\\Response\\GraphQL\\Filter\\RatingFilter") %}
+                        {% sw_include '@Storefront/storefront/component/listing/filter/filter-rating-select.html.twig' with {
+                            elements: filter.values,
+                            maxPoints: filter.maxPoints,
+                            sidebar: sidebar,
+                            name: filter.id,
+                            hidden: filter.hidden,
+                            displayName: filter.name,
+                            pluginSelector: 'filter-rating-select',
+                            propertyName: filter.name
+                        } %}
+                    {% endif %}
+                {% endfor %}
+            {% endif %}
+        {% endblock %}
 
+        {% if not filters %}
+            {{ parent() }}
+        {% endif %}
+    </div>
 {% endblock %}