From fa094907f0cb59ecf866b8cc2f8cc24ca9ebea1d Mon Sep 17 00:00:00 2001 From: yurytut1993 <66325265+yurytut1993@users.noreply.github.com> Date: Thu, 22 Jul 2021 20:41:32 +0300 Subject: [PATCH] fix(storefront): Reviews pagination navigation buttons reload the whole page and does not open the Reviews tab (#2048) --- CHANGELOG.md | 1 + assets/js/theme/global/quick-view.js | 4 ++ assets/js/theme/product.js | 2 +- assets/js/theme/product/reviews.js | 59 ++++++++++++------- .../components/products/product-view.html | 2 +- templates/components/products/quick-view.html | 4 ++ templates/components/products/reviews.html | 2 +- 7 files changed, 51 insertions(+), 23 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 69935fdda4..be5dc6b02e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## Draft +- Reviews pagination navigation buttons reload page and does not open the Reviews tab. [#2048](https://github.com/bigcommerce/cornerstone/pull/2048) - Fix social share links for product pages and blog posts [#2082](https://github.com/bigcommerce/cornerstone/pull/2082) - 'undefined' is announced with screen reader while changing Product quantity on PDP. [#2094](https://github.com/bigcommerce/cornerstone/pull/2094) - Counter on the Wish Lists tab on Account page has been removed. [#2087](https://github.com/bigcommerce/cornerstone/pull/2087) diff --git a/assets/js/theme/global/quick-view.js b/assets/js/theme/global/quick-view.js index 90fd2005ea..639e1ae14e 100644 --- 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 index b31eeeff93..a81d23e527 100644 --- 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 index d6aba7c5e3..b073193c63 100644 --- a/assets/js/theme/product/reviews.js +++ b/assets/js/theme/product/reviews.js @@ -1,22 +1,32 @@ 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(); } /** @@ -24,19 +34,20 @@ export default class { * 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; } @@ -44,6 +55,14 @@ export default class { 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/product-view.html b/templates/components/products/product-view.html index 9ce3fe3255..904538bf38 100644 --- a/templates/components/products/product-view.html +++ b/templates/components/products/product-view.html @@ -103,7 +103,7 @@

components/products/ratings rating=product.rating}} {{#if product.num_reviews '>' 0}} - + {{lang 'products.reviews.link_to_review' total=product.num_reviews}} {{else}} diff --git a/templates/components/products/quick-view.html b/templates/components/products/quick-view.html index cc2709e5d8..578179ea33 100644 --- a/templates/components/products/quick-view.html +++ b/templates/components/products/quick-view.html @@ -1,3 +1,7 @@
{{> 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}}
diff --git a/templates/components/products/reviews.html b/templates/components/products/reviews.html index 8f8dee1a7c..18cb5cffb3 100644 --- a/templates/components/products/reviews.html +++ b/templates/components/products/reviews.html @@ -40,7 +40,7 @@

{{{ sanitize title }}}
{{/each}} - {{> components/common/paginator pagination.reviews}} + {{> components/common/paginator pagination.reviews reload=true}} {{/if}}