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..5f1afcbd6c 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 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 linkUrl = $('.pagination-link').attr('href'); + const re = /page=[0-9]+/i; + const updatedLinkUrl = linkUrl.replace(re, 'page=1'); + window.history.replaceState({}, document.title, updatedLinkUrl); + } + $(window).trigger('statechange'); + } } export default FacetedSearch;