STRF-7232 fix faceted search pagination

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)

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,19 @@ class FacetedSearch {
             this.collapsedFacets = _.without(this.collapsedFacets, id);
         }
     }
+
+    onPopState() {
+        const currentUrl = window.location.href;
+        const pattern = new RegExp(/\?.+=.*/g);
+        // if url does not contain query string then redirect to page 1
+        if (!pattern.test(currentUrl)) {
+            const $link = $('.pagination-link');
+            const url = $link.attr('href');
+
+            $link.toggleClass('is-selected');
+            urlUtils.replaceUrl(url);
+        }
+    }
 }
 
 export default FacetedSearch;

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

@@ -8,6 +8,11 @@ const urlUtils = {
         $(window).trigger('statechange');
     },
 
+    replaceUrl: (url) => {
+        window.history.replaceState({}, document.title, url);
+        $(window).trigger('statechange');
+    },
+
     replaceParams: (url, params) => {
         const parsed = Url.parse(url, true);
         let param;