update for reviews in quick view working

bigcommerce · Jun 4, 2021 · 545c242 · 545c242
1 parent c19d077
commit 545c242
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 13 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)
 - Fixed possibility to select 'None' on multi unrequired Swatch Options. [#2068](https://github.com/bigcommerce/cornerstone/pull/2068)
 - Translation Gap: Account -> Wish List -> Name required message. [#2060](https://github.com/bigcommerce/cornerstone/pull/2060)
 - Translation Gap: Cart -> Shipping estimator error messages. [#2066](https://github.com/bigcommerce/cornerstone/pull/2066)

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 } from './modal';
 import 'slick-carousel';
@@ -34,6 +35,9 @@ export default function (context) {
                 $carousel.slick();
             }
 
+            /* 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,21 +1,30 @@
 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.setupReviews();
     }
@@ -25,12 +34,16 @@ export default class {
      * The browser jumps to the review page and should expand the reviews section
      */
     initLinkBind() {
-        $('#productReview_link').on('click', () => this.expandReviews());
+        $('#productReview_link').on('click', this.expandReviews);
     }
 
     setupReviews() {
         // We're in paginating state, reviews should be visible
-        if (window.location.hash && window.location.hash.indexOf('#product-reviews') === 0) {
+        if (
+            window.location.hash
+            && window.location.hash.indexOf('#product-reviews') === 0
+            && this.$reviewsContent.parents('.quickView').length === 0
+        ) {
             this.expandReviews();
             return;
         }
@@ -40,7 +53,8 @@ export default class {
     }
 
     expandReviews() {
-        $('.productView-reviewTabLink').trigger('click');
+        this.$reviewTabLink.trigger('click');
+
         if (!this.$reviewsContentList.hasClass('is-open')) {
             this.$collapsible.trigger(CollapsibleEvents.click);
         }

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