STRF-7232 Fix to make browser back button navigate pagination properl…

…y when faceted search is enabled
bigcommerce · Dec 6, 2019 · faf6e9b · faf6e9b
1 parent a164f02
commit faf6e9b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Draft
 - Add jquery-migrate to Modal test [#1599](https://github.com/bigcommerce/cornerstone/pull/1599)
 - Upgrade core-js to version 3 [#1598](https://github.com/bigcommerce/cornerstone/pull/1598)
+- Fix to make browser back button navigate pagination properly when faceted search is enabled [#1606](https://github.com/bigcommerce/cornerstone/pull/1606)
 
 ## 4.3.0 (2019-11-12)
 - Fixes body text color not taking effect for cart item headings on mobile / tablet [#1586](https://github.com/bigcommerce/cornerstone/pull/1586)

diff --git a/assets/js/theme/common/faceted-search.js b/assets/js/theme/common/faceted-search.js
@@ -298,6 +298,7 @@ class FacetedSearch {
 
         // DOM events
         $(window).on('statechange', this.onStateChange);
+        $(window).on('popstate', this.onPopState);
         $(document).on('click', this.options.showMoreToggleSelector, this.onToggleClick);
         $(document).on('toggle.collapsible', this.options.accordionToggleSelector, this.onAccordionToggle);
         $(document).on('keyup', this.options.facetedSearchFilterItems, this.filterFacetItems);
@@ -312,6 +313,7 @@ class FacetedSearch {
     unbindEvents() {
         // DOM events
         $(window).off('statechange', this.onStateChange);
+        $(window).off('popstate', this.onPopState);
         $(document).off('click', this.options.showMoreToggleSelector, this.onToggleClick);
         $(document).off('toggle.collapsible', this.options.accordionToggleSelector, this.onAccordionToggle);
         $(document).off('keyup', this.options.facetedSearchFilterItems, this.filterFacetItems);
@@ -408,6 +410,17 @@ class FacetedSearch {
             this.collapsedFacets = _.without(this.collapsedFacets, id);
         }
     }
+
+    onPopState() {
+        const currentUrl = window.location.href;
+        const searchParams = new URLSearchParams(currentUrl);
+        // If searchParams does not contain a page value then modify url query string to have page=1
+        if (!searchParams.has('page')) {
+            const url = $('.pagination-list li:first-child a').attr('href');
+            window.history.replaceState({}, document.title, url);
+        }
+        $(window).trigger('statechange');
+    }
 }
 
 export default FacetedSearch;