fix(storefront): Reviews pagination navigation buttons reload the who…

…le page and does not open the Reviews tab
bigcommerce · Apr 30, 2021 · f49ff39 · f49ff39
1 parent 31ac15a
commit f49ff39
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Reviews pagination navigation buttons reload the whole page and does not open the Reviews tab. [#2047](https://github.com/bigcommerce/cornerstone/pull/2047)
 - Added settings for payment banners. [#2021](https://github.com/bigcommerce/cornerstone/pull/2021)
 - Use https:// for schema markup. [#2039](https://github.com/bigcommerce/cornerstone/pull/2039)
 - Update focus tooltip styles contrast to achieve accessibility AA Complaince. [#2047](https://github.com/bigcommerce/cornerstone/pull/2047)

diff --git a/assets/js/theme/product/reviews.js b/assets/js/theme/product/reviews.js
@@ -12,38 +12,39 @@ export default class {
         });
 
         this.$reviewsContent = $('#product-reviews');
+        this.$reviewsContentList = $('#productReviews-content', this.$reviewsContent);
         this.$collapsible = $('[data-collapsible]', this.$reviewsContent);
 
         this.initLinkBind();
         this.injectPaginationLink();
-        this.collapseReviews();
+        this.setupReviews();
     }
 
     /**
      * On initial page load, the user clicks on "(12 Reviews)" link
      * The browser jumps to the review page and should expand the reviews section
      */
     initLinkBind() {
-        const $content = $('#productReviews-content', this.$reviewsContent);
-
-        $('#productReview_link').on('click', () => {
-            $('.productView-reviewTabLink').trigger('click');
-            if (!$content.hasClass('is-open')) {
-                this.$collapsible.trigger(CollapsibleEvents.click);
-            }
-        });
+        $('#productReview_link').on('click', () => this.showReviews());
     }
 
-    collapseReviews() {
+    setupReviews() {
         // We're in paginating state, do not collapse
         if (window.location.hash && window.location.hash.indexOf('#product-reviews') === 0) {
-            return;
+            return this.showReviews();
         }
 
         // force collapse on page load
         this.$collapsible.trigger(CollapsibleEvents.click);
     }
 
+    showReviews() {
+        $('.productView-reviewTabLink').trigger('click');
+        if (!this.$reviewsContentList.hasClass('is-open')) {
+            this.$collapsible.trigger(CollapsibleEvents.click);
+        }
+    }
+
     /**
      * Inject ID into the pagination link
      */