Merge pull request PrestaShop#539 from tblivet/issue-534

fix: Bad display in the prices filters while uncheck one of the filters
rodriciru · Aug 10, 2023 · d74b09d · d74b09d
2 parents 158dbe5 + 81e8204
commit d74b09d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl b/modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl
@@ -177,7 +177,7 @@
             {elseif $facet.widgetType == 'slider'}
               {block name='facet_item_slider'}
                 {foreach from=$facet.filters item="filter"}
-                  <div class="accordion-body faceted-filter px-3 js-faceted-filter-slider">
+                  <div class="accordion-body faceted-filter px-0 js-faceted-filter-slider">
                     <div
                       class="faceted-slider js-faceted-slider-container"
                       data-slider-min="{$facet.properties.min}"
@@ -191,6 +191,7 @@
                       data-slider-direction="{$language.is_rtl}"
                   >
                     </div>
+                    <div class="js-faceted-values"></div>  
                   <input 
                     type="hidden"
                     class="form-range-start js-faceted-slider js-faceted-slider-start"

diff --git a/src/js/modules/facetedsearch/index.ts b/src/js/modules/facetedsearch/index.ts
@@ -15,6 +15,7 @@ export const initSliders = () => {
   // Get all slider configurations found in the DOM
   document.querySelectorAll(Theme.selectors.facetedsearch.filterSlider).forEach((filter: HTMLElement) => {
     const container = <target>filter.querySelector(Theme.selectors.facetedsearch.rangeContainer);
+    const facetedValues = document.querySelector('.js-faceted-values') as HTMLElement;
 
     // Init basic slider data
     let unitPosition = 'suffix';
@@ -88,9 +89,20 @@ export const initSliders = () => {
         },
       });
 
+      // Remove tooltips:
+      initiatedSlider.removeTooltips();
+
       initiatedSlider.on('set', (values, handle, unencoded, tap, positions, instance) => {
         filterHandler(values, instance);
       });
+
+      initiatedSlider.on('update', (values) => {
+        const formattedValues: string[] = values.map((value) => (
+          unitPosition === 'suffix' ? `${value}${unitSymbol}` : `${unitSymbol}${value}`),
+        );
+
+        facetedValues.innerHTML = formattedValues.join(' - ');
+      });
     } else {
       container.noUiSlider.updateOptions({
         start: sliderValues ?? [min, max],
@@ -101,9 +113,20 @@ export const initSliders = () => {
         },
       }, true);
 
+      // Remove tooltips:
+      container.noUiSlider.removeTooltips();
+
       container.noUiSlider.on('set', (values, handle, unencoded, tap, positions, instance) => {
         filterHandler(values, instance);
       });
+
+      container.noUiSlider.on('update', (values) => {
+        const formattedValues: string[] = values.map((value) => (
+          unitPosition === 'suffix' ? `${value}${unitSymbol}` : `${unitSymbol}${value}`),
+        );
+
+        facetedValues.innerHTML = formattedValues.join(' - ');
+      });
     }
   });
 };

diff --git a/src/scss/core/modules/_facetedsearch.scss b/src/scss/core/modules/_facetedsearch.scss
@@ -7,7 +7,7 @@ $component-name: search-filters;
   }
 
   .noUi-horizontal {
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
 
     .noUi-handle {
       display: flex;
@@ -17,6 +17,11 @@ $component-name: search-filters;
     }
   }
 
+  .js-faceted-values{
+    font-size: 0.875rem;
+    color: var(--bs-gray-600);
+  }
+
   .facet-dropdown {
     cursor: pointer;
   }