fix(CP): ES-156 Fixed the filtering issues with price range filter selection

assets/js/test-unit/theme/common/faceted-search.spec.js

@@ -46,6 +46,12 @@ describe('FacetedSearch', () => {
                         '<input name="min_price" value="0">' +
                         '<input name="max_price" value="100">' +
                     '</form>' +
+                    '<form id="facet-range-form-with-other-facets">' +
+                        '<input name="brand[]" value="item1">' +
+                        '<input name="brand[]" value="item2">' +
+                        '<input name="min_price" value="0">' +
+                        '<input name="max_price" value="50">' +
+                    '</form>' +
                 '</div>' +
             '</div>';
 
@@ -216,13 +222,35 @@ describe('FacetedSearch', () => {
             expect(urlUtils.goToUrl).not.toHaveBeenCalled();
         });
 
-        it('should prevent default event', function() {
+        it('should prevent default event', () => {
             hooks.emit(eventName, event);
 
             expect(event.preventDefault).toHaveBeenCalled();
         });
     });
 
+    describe('when price range form is submitted with other facets selected', () => {
+        let event;
+        let eventName;
+
+        beforeEach(() => {
+            eventName = 'facetedSearch-range-submitted';
+            event = {
+                currentTarget: '#facet-range-form-with-other-facets',
+                preventDefault: jasmine.createSpy('preventDefault'),
+            };
+
+            spyOn(urlUtils, 'goToUrl');
+            spyOn(facetedSearch.priceRangeValidator, 'areAll').and.returnValue(true);
+        });
+
+        it('send `min_price` and `max_price` query params if form is valid', () => {
+            hooks.emit(eventName, event);
+
+            expect(urlUtils.goToUrl).toHaveBeenCalledWith('/context.html?brand[]=item1&brand[]=item2&min_price=0&max_price=50');
+        });
+    });
+
     describe('when sort filter is submitted', () => {
         let event;
         let eventName;

assets/js/test-unit/theme/common/url-utils.spec.js

@@ -24,5 +24,25 @@ describe('Url Utilities', () => {
 
             expect(queryString).toEqual(expectedQueryString);
         });
+
+        it('should parse the input query params from the input array and return the query string object', () => {
+            const queryInput = [
+                'brand[]=38',
+                'brand[]=39',
+                'brand[]=40',
+                'search_query=',
+                'min_price=15',
+                'max_price=40',
+            ];
+            const expectedResult = {
+                'brand[]': ['38', '39', '40'],
+                max_price: '40',
+                min_price: '15',
+                search_query: '',
+            };
+            const queryStringObj = urlUtil.parseQueryParams(queryInput);
+
+            expect(queryStringObj).toEqual(expectedResult);
+        });
     });
 });

assets/js/theme/common/faceted-search.js

@@ -380,10 +380,17 @@ class FacetedSearch {
             return;
         }
 
-        const url = Url.parse(window.location.href);
-        const queryParams = decodeURI($(event.currentTarget).serialize());
+        const url = Url.parse(window.location.href, true);
+        let queryParams = decodeURI($(event.currentTarget).serialize()).split('&');
+        queryParams = urlUtils.parseQueryParams(queryParams);
 
-        urlUtils.goToUrl(Url.format({ pathname: url.pathname, search: `?${queryParams}` }));
+        for (const key in queryParams) {
+            if (queryParams.hasOwnProperty(key)) {
+                url.query[key] = queryParams[key];
+            }
+        }
+
+        urlUtils.goToUrl(Url.format({ pathname: url.pathname, search: urlUtils.buildQueryString(url.query) }));
     }
 
     onStateChange() {

assets/js/theme/common/url-utils.js

@@ -45,6 +45,26 @@ const urlUtils = {
 
         return out.substring(1);
     },
+
+    parseQueryParams: (queryData) => {
+        const params = {};
+
+        for (let i = 0; i < queryData.length; i++) {
+            const temp = queryData[i].split('=');
+
+            if (temp[0] in params) {
+                if (Array.isArray(params[temp[0]])) {
+                    params[temp[0]].push(temp[1]);
+                } else {
+                    params[temp[0]] = [params[temp[0]], temp[1]];
+                }
+            } else {
+                params[temp[0]] = temp[1];
+            }
+        }
+
+        return params;
+    },
 };
 
 export default urlUtils;