Xcorner 21 cart page

assets/js/theme/cart.js

@@ -10,6 +10,7 @@ import CartItemDetails from './common/cart-item-details'
 import q$, { q$$ } from './global/selector'
 import trigger from './common/utils/trigger'
 import toggle from './global/toggle'
+import addReviewsToCartItems from './custom/add-reviews-to-cart-items'
 
 export default class Cart extends PageManager {
     onReady() {
@@ -30,6 +31,10 @@ export default class Cart extends PageManager {
 
         this.setApplePaySupport()
         this.bindEvents()
+
+        const { storefrontApiToken } = this.context
+
+        addReviewsToCartItems(storefrontApiToken)
     }
 
     setApplePaySupport() {
@@ -261,15 +266,16 @@ export default class Cart extends PageManager {
         let preVal
 
         // cart update
-        q$('.js-cart-update', this.$cartContent)?.addEventListener('click', (event) => {
-            const $target = event.currentTarget
+        q$$('.js-cart-update', this.$cartContent)?.forEach(($btn) => {
+            $btn.addEventListener('click', (event) => {
+                const $target = event.currentTarget
 
-            event.preventDefault()
+                event.preventDefault()
 
-            // update cart quantity
-            cartUpdate($target)
+                // update cart quantity
+                cartUpdate($target)
+            })
         })
-
         // cart qty manually updates
         q$$('.js-cart-item-qty-input', this.$cartContent).forEach(($input) => {
             $input.addEventListener('focus', function onQtyFocus() {

assets/js/theme/cart/shipping-estimator.js

@@ -27,7 +27,7 @@ export default class ShippingEstimator {
             tap: announceInputErrorMessage,
         })
 
-        q$('.js-shipping-estimate-submit', this.$element)?.addEventListener('click', (event) => {
+        q$('.js-shipping-estimate-submit', this.$element).addEventListener('click', (event) => {
             // estimator error messages are being injected in html as a result
             // of user submit; clearing and adding role on submit provides
             // regular announcement of these error messages
@@ -140,7 +140,10 @@ export default class ShippingEstimator {
             // When you change a country, you swap the state/province between an input and a select dropdown
             // Not all countries require the province to be filled
             // We have to remove this class when we swap since nod validation doesn't cleanup for us
-            q$(this.shippingEstimator).querySelector('.js-form-field-success').classList.remove('js-form-field-success')
+            const shippingEstimator = q$(this.shippingEstimator)
+            if (shippingEstimator) {
+                shippingEstimator.querySelector('.js-form-field-success')?.classList.remove('js-form-field-success')
+            }
         })
     }
 
@@ -177,7 +180,7 @@ export default class ShippingEstimator {
             event.preventDefault()
 
             utils.api.cart.getShippingQuotes(params, 'cart/shipping-quotes', (err, response) => {
-                q$('.js-shipping-quotes').innerHTML = response.content
+                q$('.js-shipping-quotes').innerHTML = response?.content
 
                 // bind the select button
                 q$('.js-select-shipping-quote').addEventListener('click', (clickEvent) => {

assets/js/theme/common/state-country.js

@@ -8,26 +8,27 @@ import q$, { q$$ } from '../global/selector'
  * If there are no options from bcapp, a text field will be sent. This will create a select element to hold options after the remote request.
  * @returns {HTMLElement}
  */
-function makeStateRequired(stateElement, context) {
+function makeStateRequired(stateElement) {
     /* eslint-disable no-param-reassign */
-    stateElement.innerHTML = `
-        <select 
-            id=${stateElement.id}
-            name=${stateElement.getAttribute('name')}
-            data-label=${stateElement.dataset.label}
-            data-field-type=${stateElement.dataset.fieldType}
-        >
-        </select>
-    `
+    const selectElement = document.createElement('select')
+
+    selectElement.className = 'c-form__input c-form__input--select u-width-full'
+
+    selectElement.id = stateElement.id
+    selectElement.name = stateElement.getAttribute('name')
+    selectElement.setAttribute('data-label', stateElement.dataset.label)
+    selectElement.setAttribute('data-field-type', stateElement.dataset.fieldType)
+
+    stateElement.replaceWith(selectElement)
 
     const $hiddenInput = q$$('[name*="FormFieldIsText"]')
     $hiddenInput.forEach(($hi) => $hi.remove())
 
     const $newElement = q$('[data-field-type="State"]')
     const $prevElement = $newElement.previousElementSibling
-    if ($prevElement.querySelector('small') === null) {
+    if ($prevElement?.querySelector('small') === null) {
         // String is injected from localizer
-        $prevElement.insertAdjacentHTML('beforeend', `<small>${context.required}</small>`)
+        $prevElement.insertAdjacentHTML('beforeend', `<small class="u-required">*</small>`)
     } else {
         $prevElement.querySelector('small').style.display = 'block'
     }
@@ -43,22 +44,25 @@ function makeStateRequired(stateElement, context) {
  */
 function makeStateOptional(stateElement) {
     /* eslint-disable no-param-reassign */
-    stateElement.innerHTML = `
-        <input 
-            type="text"
-            id=${stateElement.id}
-            name=${stateElement.getAttribute('name')}
-            data-label=${stateElement.dataset.label}
-            data-field-type=${stateElement.dataset.fieldType}
-            class="js-form-input"
-        />
-    `
+    const inputElement = document.createElement('input')
+    inputElement.type = 'text'
+
+    inputElement.className = 'js-form-input c-form__input u-width-full'
+
+    inputElement.id = stateElement.id
+    inputElement.name = stateElement.getAttribute('name')
+    inputElement.setAttribute('data-label', stateElement.dataset.label)
+    inputElement.setAttribute('data-field-type', stateElement.dataset.fieldType)
+
+    stateElement.replaceWith(inputElement)
 
     const $newElement = q$('[data-field-type="State"]')
     if ($newElement !== null) {
         insertStateHiddenField($newElement)
 
-        $newElement.previousElementSibling.querySelector('small').style.display = 'none'
+        if ($newElement.previousElementSibling?.querySelector('small')) {
+            $newElement.previousElementSibling.querySelector('small').style.display = 'none'
+        }
     }
 
     return $newElement
@@ -75,7 +79,7 @@ function addOptions(statesArray, $selectElement, options) {
 
     container.push(`<option value="">${statesArray.prefix}</option>`)
 
-    if (!isEmpty($selectElement)) {
+    if (isEmpty($selectElement)) {
         statesArray.states.forEach((stateObj) => {
             if (options.useIdForStates) {
                 container.push(`<option value="${stateObj.id}">${stateObj.name}</option>`)

assets/js/theme/common/utils/form-utils.js

@@ -321,13 +321,14 @@ const Validators = {
      * @param field
      */
     cleanUpStateValidation: (field) => {
-        const $fieldClassElement = q$(`[data-type="${field.dataset.fieldType}"]`)
-
-        Object.keys(nod.classes).forEach((value) => {
-            if ($fieldClassElement.classList.contains(nod.classes[value])) {
-                $fieldClassElement.classList.remove(nod.classes[value])
-            }
-        })
+        if (field.dataset.fieldType) {
+            const $fieldClassElement = q$(`[data-field-type="${field.dataset.fieldType}"]`)
+            Object.keys(nod.classes).forEach((value) => {
+                if ($fieldClassElement.classList.contains(nod.classes[value])) {
+                    $fieldClassElement.classList.remove(nod.classes[value])
+                }
+            })
+        }
     },
 }
 

assets/js/theme/custom/add-reviews-to-cart-items.js

@@ -0,0 +1,56 @@
+/**
+ * Add reviews to cart items via GraphQL
+ */
+export default function addReviewsToCartItems(storefrontApiToken) {
+    const cartItems = document.querySelectorAll('.js-item-row')
+    if (cartItems.length > 0) {
+        cartItems.forEach((product) => {
+            const productId = product.getAttribute('data-type-product-id')
+            fetch('/graphql', {
+                method: 'POST',
+                credentials: 'same-origin',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${storefrontApiToken}`,
+                },
+                body: JSON.stringify({
+                    query: `
+                        query getProductRating {
+                            site {
+                                product(entityId: ${productId}) {
+                                    reviewSummary {
+                                        numberOfReviews
+                                        summationOfRatings
+                                    }
+                                }
+                            }
+                        }
+                    `,
+                }),
+            })
+                .then((res) => res.json())
+                .then((data) => {
+                    const summationOfRatings = data?.data?.site?.product?.reviewSummary?.summationOfRatings
+                    const numberOfReviews = data?.data?.site?.product?.reviewSummary?.numberOfReviews
+                    const ratingElement = document.querySelector(`[data-type-product-id="${productId}"] .c-cart__item-rating`)
+                    const ratingLink = document.querySelector(`[data-type-product-id="${productId}"] .c-cart__item-rating-link`)
+
+                    ratingLink.innerHTML = `${numberOfReviews} reviews`
+
+                    if (ratingElement) {
+                        ratingElement.setAttribute('data-product-rating', summationOfRatings)
+                        const filledStars = ratingElement.querySelectorAll('.c-cart-item__filled-stars svg')
+                        const unfilledStars = ratingElement.querySelectorAll('.c-cart-item__unfilled-stars svg')
+
+                        for (let i = 0; i < summationOfRatings; i++) {
+                            filledStars[i].classList.remove('u-hidden')
+                        }
+
+                        for (let i = 0; i < 5 - summationOfRatings; i++) {
+                            unfilledStars[i].classList.remove('u-hidden')
+                        }
+                    }
+                })
+        })
+    }
+}