fix(storefront): Reviews pagination navigation buttons reload page and does not open the Reviews tab

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)

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);
         });
     });

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);

assets/js/theme/product/reviews.js

@@ -1,49 +1,68 @@
 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);
-            }
-        });
+        const $productReviewLink = $('#productReview_link');
+        $productReviewLink
+            .attr('href', `${$productReviewLink.attr('href')}${window.location.search}#product-reviews`)
+            .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
      */

templates/components/products/product-view.html

@@ -103,7 +103,7 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
                     {{/if}}
                         {{> components/products/ratings rating=product.rating}}
                     {{#if product.num_reviews '>' 0}}
-                        <a href="{{product.url}}#product-reviews" id="productReview_link">
+                        <a href="{{product.url}}{{#if is_ajax}}#product-reviews{{/if}}" id="productReview_link">
                             {{lang 'products.reviews.link_to_review' total=product.num_reviews}}
                         </a>
                     {{else}}

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>

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}}