Fix : [FO] FILTERING - Resize screen to mobile

src/js/constants/selectors-map.ts

@@ -7,6 +7,7 @@ export const facetedsearch = {
   range: '.js-faceted-slider',
   rangeContainer: '.js-faceted-slider-container',
   filterSlider: '.js-faceted-filter-slider',
+  offCanvasFaceted: '#offcanvas-faceted',
 };
 
 export const pageLoader = '.js-page-loader';

src/js/modules/facetedsearch/index.ts

@@ -8,7 +8,8 @@ import wNumb from 'wnumb';
 import initFacets from './update';
 import filterHandler from './filter-handler';
 
-const initSliders = () => {
+// eslint-disable-next-line import/prefer-default-export
+export const initSliders = () => {
   const {Theme} = window;
 
   // Get all slider configurations found in the DOM
@@ -70,6 +71,12 @@ const initSliders = () => {
     const sliderValues = JSON.parse(<string>container.dataset.sliderValues);
 
     if (!container.noUiSlider) {
+      // if we initiate slider with noUiBase he create another one we have to delete it before.
+      const noUiBase = container.querySelector('.noUi-base');
+
+      if (noUiBase) {
+        noUiBase.remove();
+      }
       initiatedSlider = noUiSlider.create(container, {
         start: sliderValues ?? [min, max],
         tooltips: [tooltipsFormat, tooltipsFormat],

src/js/responsive-toggler.test.ts

@@ -1,9 +1,11 @@
 import EVENTS from '@js/constants/events-map';
+import selectorsMap from '@constants/selectors-map';
 import initResponsiveToggler from './responsive-toggler';
 import initEmitter from './prestashop';
 import {
   desktopElement, mobileElement, mobileElementId, contentValue, desktopElementId,
 } from './constants/mocks/swapElements-data';
+import ThemeType = Theme.ThemeType;
 
 beforeAll(() => {
   document.body.innerHTML = `
@@ -18,6 +20,7 @@ beforeAll(() => {
   window.Theme = {
     ...window.Theme,
     events: EVENTS,
+    selectors: selectorsMap,
   };
 
   initEmitter();

src/js/responsive-toggler.ts

@@ -3,6 +3,9 @@
  * file that was distributed with this source code.
  */
 import swapElements from '@helpers/swapElements';
+import {facetedsearch} from '@constants/selectors-map';
+import {initSliders} from '@js/modules/facetedsearch';
+import {Offcanvas} from 'bootstrap';
 
 const {prestashop} = window;
 
@@ -28,15 +31,28 @@ export function toggleMobileStyles() {
         swapElements(source, target);
       }
     });
+
+    // we have to init again sliders because we reconstruct the dom
+    initSliders();
   } else {
-    Array.prototype.forEach.call(document.querySelectorAll("*[id^='_mobile_']"), (el) => {
+    Array.prototype.forEach.call(document.querySelectorAll("*[id^='_mobile_']"), async (el) => {
       const source = document.querySelector(`#${el.id}`);
       const target = document.querySelector(`#${el.id.replace('_mobile_', '_desktop_')}`);
 
       if (target && source) {
         swapElements(source, target);
       }
     });
+
+    // we close the old mobile interface
+    const offCanvasFacetedElement = document.querySelector(facetedsearch.offCanvasFaceted) as HTMLElement;
+
+    if (offCanvasFacetedElement != null) {
+      Offcanvas.getInstance(offCanvasFacetedElement)?.hide();
+    }
+
+    // we have to init again sliders because we reconstruct the dom
+    initSliders();
   }
 
   prestashop.emit(events.responsiveUpdate, {

types/selectors.d.ts

@@ -2,11 +2,13 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+import {qtyInput} from "@constants/selectors-map";
 
 declare type facetedsearch = {
   range: string,
   rangeContainer: string,
   filterSlider: string,
+  offCanvasFaceted: string,
 };
 
 declare type pageLoader = string;
@@ -152,6 +154,6 @@ type SelectorsMap = {
   mobileMenu: mobileMenu,
   visiblePassword: visiblePassword,
   desktopMenu: desktopMenu,
-  quantityInput: quantityInput,
+  qtyInput: quantityInput,
   formValidation: formValidation,
 };