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

…le page and does not open the Reviews tab
bigcommerce · Jul 12, 2021 · 0c0edf4 · 0c0edf4
1 parent eae2692
commit 0c0edf4
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Reviews pagination navigation buttons reload page and does not open the Reviews tab. [#2048](https://github.com/bigcommerce/cornerstone/pull/2048)
 
 ## 5.7.0 (07-01-2021)
 - Implement CEV language files into Cornerstone. [#2084](https://github.com/bigcommerce/cornerstone/pull/2084)

diff --git a/assets/js/theme/global/quick-view.js b/assets/js/theme/global/quick-view.js
@@ -1,6 +1,7 @@
 import 'foundation-sites/js/foundation/foundation';
 import 'foundation-sites/js/foundation/foundation.dropdown';
 import utils from '@bigcommerce/stencil-utils';
+import Review from '../product/reviews';
 import ProductDetails from '../common/product-details';
 import { defaultModal, ModalEvents } from './modal';
 import 'slick-carousel';
@@ -41,6 +42,9 @@ export default function (context) {
                 }
             }
 
+            /* eslint-disable no-new */
+            new Review({ $context: modal.$content });
+
             return new ProductDetails(modal.$content.find('.quickView'), context);
         });
     });

diff --git a/assets/js/theme/product.js b/assets/js/theme/product.js
@@ -42,7 +42,7 @@ export default class Product extends PageManager {
 
         if ($reviewForm.length === 0) return;
 
-        const review = new Review($reviewForm);
+        const review = new Review({ $reviewForm });
 
         $('body').on('click', '[data-reveal-id="modal-review-form"]', () => {
             validator = review.registerValidation(this.context);

diff --git a/assets/js/theme/product/reviews.js b/assets/js/theme/product/reviews.js
@@ -1,49 +1,65 @@
 import nod from '../common/nod';
-import { CollapsibleEvents } from '../common/collapsible';
+import collapsibleFactory, { CollapsibleEvents } from '../common/collapsible';
 import forms from '../common/models/forms';
 import { safeString } from '../common/utils/safe-string';
 import { announceInputErrorMessage } from '../common/utils/form-utils';
 
 export default class {
-    constructor($reviewForm) {
-        this.validator = nod({
-            submit: $reviewForm.find('input[type="submit"]'),
-            tap: announceInputErrorMessage,
-        });
+    constructor({ $reviewForm, $context }) {
+        if ($reviewForm && $reviewForm.length) {
+            this.validator = nod({
+                submit: $reviewForm.find('input[type="submit"]'),
+                tap: announceInputErrorMessage,
+            });
+        }
 
-        this.$reviewsContent = $('#product-reviews');
+        this.$context = $context;
+        this.$reviewTabLink = $('.productView-reviewTabLink', this.$context);
+        this.$reviewsContent = $('#product-reviews', this.$context);
+        this.$reviewsContentList = $('#productReviews-content', this.$reviewsContent);
         this.$collapsible = $('[data-collapsible]', this.$reviewsContent);
 
-        this.initLinkBind();
+        if (this.$context) {
+            collapsibleFactory('[data-collapsible]', { $context });
+        } else {
+            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.expandReviews());
     }
 
-    collapseReviews() {
-        // We're in paginating state, do not collapse
-        if (window.location.hash && window.location.hash.indexOf('#product-reviews') === 0) {
+    setupReviews() {
+        // We're in paginating state, reviews should be visible
+        if (
+            window.location.hash
+            && window.location.hash.indexOf('#product-reviews') === 0
+            && this.$reviewsContent.parents('.quickView').length === 0
+        ) {
+            this.expandReviews();
             return;
         }
 
         // force collapse on page load
         this.$collapsible.trigger(CollapsibleEvents.click);
     }
 
+    expandReviews() {
+        this.$reviewTabLink.trigger('click');
+
+        if (!this.$reviewsContentList.hasClass('is-open')) {
+            this.$collapsible.trigger(CollapsibleEvents.click);
+        }
+    }
+
     /**
      * Inject ID into the pagination link
      */

diff --git a/templates/components/products/quick-view.html b/templates/components/products/quick-view.html
@@ -1,3 +1,7 @@
 <div class="modal-body quickView">
     {{> components/products/product-view schema=false}}
+
+    {{#all settings.show_product_reviews theme_settings.show_product_reviews (if theme_settings.show_product_details_tabs '!==' true)}}
+        {{> components/products/reviews reviews=product.reviews product=product urls=urls}}
+    {{/all}}
 </div>
diff --git a/templates/components/products/reviews.html b/templates/components/products/reviews.html
@@ -40,7 +40,7 @@ <h5 itemprop="name" class="productReview-title">{{{ sanitize title }}}</h5>
             </li>
             {{/each}}
         </ul>
-        {{> components/common/paginator pagination.reviews}}
+        {{> components/common/paginator pagination.reviews reload=true}}
     </div>
 </section>
 {{/if}}