fix write review functionality

xfiveco · Jun 9, 2023 · f50a3c7 · f50a3c7
1 parent 62ffd10
commit f50a3c7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/assets/js/theme/custom/toggle.js b/assets/js/theme/custom/toggle.js
@@ -12,6 +12,20 @@ function updateAttributes($element) {
     // If the attribute doesn't exists, it defaults to false which is desirable
     const ariaExpanded = $element.getAttribute('aria-expanded') === 'true'
     $element.setAttribute('aria-expanded', !ariaExpanded)
+
+    /* eslint-disable no-param-reassign */
+    if ('hasUHidden' in $element.dataset) {
+        $element.classList.add('u-hidden')
+        delete $element.dataset.hasUHidden
+
+        return
+    }
+
+    if ($element.classList.contains('u-hidden')) {
+        $element.classList.remove('u-hidden')
+        $element.dataset.hasUHidden = true
+    }
+    /* eslint-enable no-param-reassign */
 }
 
 /**

diff --git a/assets/js/theme/product.js b/assets/js/theme/product.js
@@ -10,6 +10,7 @@ import { classifyForm } from './common/utils/form-utils'
 import modalFactory from './global/modal'
 import q$, { q$$ } from './global/selector'
 import trigger from './common/utils/trigger'
+import toggle from './custom/toggle'
 
 export default class Product extends PageManager {
     constructor(context) {
@@ -46,6 +47,9 @@ export default class Product extends PageManager {
 
         const review = new Review({ $reviewForm })
 
+        toggle('[data-reveal-id="modal-review-form"]', { update: ['#modal-review-form'] })
+        toggle('#modal-review-form .js-modal-review-close', { update: ['#modal-review-form'] })
+
         q$('[data-reveal-id="modal-review-form"]').addEventListener('click', () => {
             validator = review.registerValidation(this.context)
             this.ariaDescribeReviewInputs($reviewForm)

diff --git a/templates/components/products/modals/writeReview.html b/templates/components/products/modals/writeReview.html
@@ -1,4 +1,4 @@
-<div id="js-modal-review-form" class="js-reveal u-hidden">
+<div id="modal-review-form" class="js-reveal u-hidden">
     {{inject 'reviewRating' (lang 'forms.validate.reviews.rating')}}
     {{inject 'reviewSubject' (lang 'forms.validate.reviews.title')}}
     {{inject 'reviewComment' (lang 'forms.validate.reviews.comment')}}
@@ -7,7 +7,15 @@
         <div class="js-modal-header-title">
             {{lang 'products.reviews.write_a_review'}}
         </div>
-        {{> components/common/modal/modal-close-btn}}
+        <button 
+            class="js-modal-review-close"
+            type="button"
+            title="{{lang 'common.close'}}"
+            {{additional_attr}}
+        >
+            <span class="u-hidden-visually">{{lang 'common.close'}}</span>
+            <span aria-hidden="true">&#215;</span>
+        </button>
     </div>
     <div class="js-modal-body">
         <div>

diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -129,10 +129,11 @@ <h1 class="js-product-view-title">
                 {{/if}}
                 {{#if settings.show_product_reviews}}
                     <a 
-                        href="{{product.url}}{{#if is_ajax}}#write_review{{/if}}"
-                        {{#unless is_ajax}}
+                        {{#if is_ajax}}
+                            href="{{product.url}}#write_review"
+                        {{else}}
                             data-reveal-id="modal-review-form"
-                        {{/unless}}
+                        {{/if}}
                         role="button"
                     >
                        {{lang 'products.reviews.new'}}