WIP

Shopify · Feb 4, 2025 · 140be9d · 140be9d
1 parent 1eb131d
commit 140be9d
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 80 deletions.
diff --git a/assets/cart.js b/assets/cart.js
@@ -5,7 +5,7 @@ class CartRemoveButton extends HTMLElement {
     this.addEventListener('click', (event) => {
       event.preventDefault();
       const cartItems = this.closest('cart-items') || this.closest('cart-drawer-items');
-      cartItems.updateQuantity(this.dataset.index, 0);
+      cartItems.updateQuantity(this.dataset.index, 0, event);
     });
   }
 }
@@ -76,6 +76,7 @@ class CartItems extends HTMLElement {
       this.updateQuantity(
         index,
         inputValue,
+        event,
         document.activeElement.getAttribute('name'),
         event.target.dataset.quantityVariantId
       );
@@ -143,7 +144,7 @@ class CartItems extends HTMLElement {
     ];
   }
 
-  updateQuantity(line, quantity, name, variantId) {
+  updateQuantity(line, quantity, event, name, variantId) {
     this.enableLoading(line);
 
     const body = JSON.stringify({
@@ -158,55 +159,58 @@ class CartItems extends HTMLElement {
         return response.text();
       })
       .then((state) => {
-        const parsedState = JSON.parse(state);
-        const quantityElement =
-          document.getElementById(`Quantity-${line}`) || document.getElementById(`Drawer-quantity-${line}`);
-        const items = document.querySelectorAll('.cart-item');
-
-        if (parsedState.errors) {
-          quantityElement.value = quantityElement.getAttribute('value');
-          this.updateLiveRegions(line, parsedState.errors);
-          return;
-        }
-
-        this.classList.toggle('is-empty', parsedState.item_count === 0);
-        const cartDrawerWrapper = document.querySelector('cart-drawer');
-        const cartFooter = document.getElementById('main-cart-footer');
-
-        if (cartFooter) cartFooter.classList.toggle('is-empty', parsedState.item_count === 0);
-        if (cartDrawerWrapper) cartDrawerWrapper.classList.toggle('is-empty', parsedState.item_count === 0);
-
-        this.getSectionsToRender().forEach((section) => {
-          const elementToReplace =
-            document.getElementById(section.id).querySelector(section.selector) || document.getElementById(section.id);
-          elementToReplace.innerHTML = this.getSectionInnerHTML(
-            parsedState.sections[section.section],
-            section.selector
-          );
-        });
-        const updatedValue = parsedState.items[line - 1] ? parsedState.items[line - 1].quantity : undefined;
-        let message = '';
-        if (items.length === parsedState.items.length && updatedValue !== parseInt(quantityElement.value)) {
-          if (typeof updatedValue === 'undefined') {
-            message = window.cartStrings.error;
-          } else {
-            message = window.cartStrings.quantityError.replace('[quantity]', updatedValue);
+        CartPerformance.measure("cart-performance:change:paint-updated-sections", () => {
+          const parsedState = JSON.parse(state);
+          const quantityElement =
+            document.getElementById(`Quantity-${line}`) || document.getElementById(`Drawer-quantity-${line}`);
+          const items = document.querySelectorAll('.cart-item');
+
+          if (parsedState.errors) {
+            quantityElement.value = quantityElement.getAttribute('value');
+            this.updateLiveRegions(line, parsedState.errors);
+            return;
+          }
+
+          this.classList.toggle('is-empty', parsedState.item_count === 0);
+          const cartDrawerWrapper = document.querySelector('cart-drawer');
+          const cartFooter = document.getElementById('main-cart-footer');
+
+          if (cartFooter) cartFooter.classList.toggle('is-empty', parsedState.item_count === 0);
+          if (cartDrawerWrapper) cartDrawerWrapper.classList.toggle('is-empty', parsedState.item_count === 0);
+
+          this.getSectionsToRender().forEach((section) => {
+            const elementToReplace =
+              document.getElementById(section.id).querySelector(section.selector) || document.getElementById(section.id);
+            elementToReplace.innerHTML = this.getSectionInnerHTML(
+              parsedState.sections[section.section],
+              section.selector
+            );
+          });
+          const updatedValue = parsedState.items[line - 1] ? parsedState.items[line - 1].quantity : undefined;
+          let message = '';
+          if (items.length === parsedState.items.length && updatedValue !== parseInt(quantityElement.value)) {
+            if (typeof updatedValue === 'undefined') {
+              message = window.cartStrings.error;
+            } else {
+              message = window.cartStrings.quantityError.replace('[quantity]', updatedValue);
+            }
+          }
+          this.updateLiveRegions(line, message);
+
+          const lineItem =
+            document.getElementById(`CartItem-${line}`) || document.getElementById(`CartDrawer-Item-${line}`);
+          if (lineItem && lineItem.querySelector(`[name="${name}"]`)) {
+            cartDrawerWrapper
+              ? trapFocus(cartDrawerWrapper, lineItem.querySelector(`[name="${name}"]`))
+              : lineItem.querySelector(`[name="${name}"]`).focus();
+          } else if (parsedState.item_count === 0 && cartDrawerWrapper) {
+            trapFocus(cartDrawerWrapper.querySelector('.drawer__inner-empty'), cartDrawerWrapper.querySelector('a'));
+          } else if (document.querySelector('.cart-item') && cartDrawerWrapper) {
+            trapFocus(cartDrawerWrapper, document.querySelector('.cart-item__name'));
           }
-        }
-        this.updateLiveRegions(line, message);
-
-        const lineItem =
-          document.getElementById(`CartItem-${line}`) || document.getElementById(`CartDrawer-Item-${line}`);
-        if (lineItem && lineItem.querySelector(`[name="${name}"]`)) {
-          cartDrawerWrapper
-            ? trapFocus(cartDrawerWrapper, lineItem.querySelector(`[name="${name}"]`))
-            : lineItem.querySelector(`[name="${name}"]`).focus();
-        } else if (parsedState.item_count === 0 && cartDrawerWrapper) {
-          trapFocus(cartDrawerWrapper.querySelector('.drawer__inner-empty'), cartDrawerWrapper.querySelector('a'));
-        } else if (document.querySelector('.cart-item') && cartDrawerWrapper) {
-          trapFocus(cartDrawerWrapper, document.querySelector('.cart-item__name'));
-        }
+        });
 
+        CartPerformance.measureFromEvent("cart-performance:change:click-event", event);
         publish(PUB_SUB_EVENTS.cartUpdate, { source: 'cart-items', cartData: parsedState, variantId: variantId });
       })
       .catch(() => {

diff --git a/assets/global.js b/assets/global.js
@@ -1267,3 +1267,33 @@ class BulkAdd extends HTMLElement {
 if (!customElements.get('bulk-add')) {
   customElements.define('bulk-add', BulkAdd);
 }
+
+class CartPerformance {
+  static measureFromEvent(benchmarkName, event) {
+    const startMarker = performance.mark(`${benchmarkName}:start`, {
+      startTime: event.timeStamp
+    });
+
+    const endMarker = performance.mark(`${benchmarkName}:end`);
+
+    performance.measure(
+      benchmarkName,
+      `${benchmarkName}:start`,
+      `${benchmarkName}:end`
+    );
+  }
+
+  static measure(benchmarkName, callback) {
+    const startMarker = performance.mark(`${benchmarkName}:start`);
+
+    callback();
+
+    const endMarker = performance.mark(`${benchmarkName}:end`);
+
+    performance.measure(
+      benchmarkName,
+      `${benchmarkName}:start`,
+      `${benchmarkName}:end`
+    );
+  }
+}
diff --git a/assets/product-form.js b/assets/product-form.js
@@ -79,7 +79,7 @@ if (!customElements.get('product-form')) {
                 'modalClosed',
                 () => {
                   setTimeout(() => {
-                    this.measurePerformance("cart-performance:add-to-cart:click-event:paint-updated-sections", () => {
+                    CartPerformance.measure("cart-performance:add-to-cart:click-event:paint-updated-sections", () => {
                       this.cart.renderContents(response);
                     });
                   });
@@ -88,7 +88,7 @@ if (!customElements.get('product-form')) {
               );
               quickAddModal.hide(true);
             } else {
-              this.measurePerformance("cart-performance:add-to-cart:click-event:paint-updated-sections", () => {
+              CartPerformance.measure("cart-performance:add-to-cart:click-event:paint-updated-sections", () => {
                 this.cart.renderContents(response);
               });
             }
@@ -102,7 +102,7 @@ if (!customElements.get('product-form')) {
             if (!this.error) this.submitButton.removeAttribute('aria-disabled');
             this.querySelector('.loading__spinner').classList.add('hidden');
 
-            this.measurePerformanceFromStartingEvent("cart-performance:add-to-cart:click-event", evt);
+            CartPerformance.measureFromEvent("cart-performance:add-to-cart:click-event", evt);
           });
       }
 
@@ -134,34 +134,6 @@ if (!customElements.get('product-form')) {
       get variantIdInput() {
         return this.form.querySelector('[name=id]');
       }
-
-      measurePerformanceFromStartingEvent(benchmarkName, event) {
-        const startMarker = performance.mark(`${benchmarkName}:start`, {
-          startTime: event.timeStamp
-        });
-
-        const endMarker = performance.mark(`${benchmarkName}:end`);
-
-        performance.measure(
-          benchmarkName,
-          `${benchmarkName}:start`,
-          `${benchmarkName}:end`
-        );
-      }
-
-      measurePerformance(benchmarkName, callback) {
-        const startMarker = performance.mark(`${benchmarkName}:start`);
-
-        callback();
-
-        const endMarker = performance.mark(`${benchmarkName}:end`);
-
-        performance.measure(
-          benchmarkName,
-          `${benchmarkName}:start`,
-          `${benchmarkName}:end`
-        );
-      }
     }
   );
 }