From adc1b86a6abf135644d730e548352c59781b20af Mon Sep 17 00:00:00 2001
From: William Kwon <william.kwon@bigcommerce.com>
Date: Mon, 2 Dec 2019 14:49:08 -0800
Subject: [PATCH] STRF-7232 fix faceted search pagination

---
 CHANGELOG.md                             |  1 +
 assets/js/theme/common/faceted-search.js | 15 +++++++++++++++
 assets/js/theme/common/url-utils.js      |  5 +++++
 3 files changed, 21 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1df9122afd..72b0ee1ee9 100644
--- 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
index 4c2c193e27..ccdd823315 100644
--- 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,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;
diff --git a/assets/js/theme/common/url-utils.js b/assets/js/theme/common/url-utils.js
index 79184b73fc..55f1d371ad 100644
--- a/assets/js/theme/common/url-utils.js
+++ b/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;