Merge pull request #550 from tblivet/fix/facetsearch

fix: multiple slider update on facetsearch
PrestaShop · Jan 4, 2024 · 6711c8b · 6711c8b
2 parents 3d20f3e + d53be35
commit 6711c8b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts
@@ -6,6 +6,7 @@
 export const facetedsearch = {
   range: '.js-faceted-slider',
   rangeContainer: '.js-faceted-slider-container',
+  rangeValues: '.js-faceted-values',
   filterSlider: '.js-faceted-filter-slider',
   offCanvasFaceted: '#offcanvas-faceted',
 };

diff --git a/src/js/modules/facetedsearch/index.ts b/src/js/modules/facetedsearch/index.ts
@@ -15,7 +15,6 @@ 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';
@@ -101,7 +100,9 @@ export const initSliders = () => {
           unitPosition === 'suffix' ? `${value}${unitSymbol}` : `${unitSymbol}${value}`),
         );
 
-        facetedValues.innerHTML = formattedValues.join(' - ');
+        const parentFacet = initiatedSlider.target.closest(Theme.selectors.facetedsearch.filterSlider) as HTMLElement;
+        const showValues = parentFacet.querySelector(Theme.selectors.facetedsearch.rangeValues) as HTMLElement;
+        showValues.innerHTML = formattedValues.join(' - ');
       });
     } else {
       container.noUiSlider.updateOptions({
@@ -125,7 +126,9 @@ export const initSliders = () => {
           unitPosition === 'suffix' ? `${value}${unitSymbol}` : `${unitSymbol}${value}`),
         );
 
-        facetedValues.innerHTML = formattedValues.join(' - ');
+        const parentFacet = initiatedSlider.target.closest(Theme.selectors.facetedsearch.filterSlider) as HTMLElement;
+        const showValues = parentFacet.querySelector(Theme.selectors.facetedsearch.rangeValues) as HTMLElement;
+        showValues.innerHTML = formattedValues.join(' - ');
       });
     }
   });