Dedupe quick add modal option value ids (Shopify#3504)

* Deduplicate the option value IDs after option value selection changes in quick add modal
Misha-Puff · Jul 1, 2024 · 6af2411 · 6af2411
1 parent 6a74d7e
commit 6af2411
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 25 deletions.
diff --git a/assets/global.js b/assets/global.js
@@ -26,27 +26,14 @@ class SectionId {
 }
 
 class HTMLUpdateUtility {
-  #preProcessCallbacks = [];
-  #postProcessCallbacks = [];
-
-  constructor() {}
-
-  addPreProcessCallback(callback) {
-    this.#preProcessCallbacks.push(callback);
-  }
-
-  addPostProcessCallback(callback) {
-    this.#postProcessCallbacks.push(callback);
-  }
-
   /**
    * Used to swap an HTML node with a new node.
    * The new node is inserted as a previous sibling to the old node, the old node is hidden, and then the old node is removed.
    *
    * The function currently uses a double buffer approach, but this should be replaced by a view transition once it is more widely supported https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
    */
-  viewTransition(oldNode, newContent) {
-    this.#preProcessCallbacks.forEach((callback) => callback(newContent));
+  static viewTransition(oldNode, newContent, preProcessCallbacks = [], postProcessCallbacks = []) {
+    preProcessCallbacks?.forEach((callback) => callback(newContent));
 
     const newNodeWrapper = document.createElement('div');
     HTMLUpdateUtility.setInnerHTML(newNodeWrapper, newContent.outerHTML);
@@ -62,7 +49,7 @@ class HTMLUpdateUtility {
     oldNode.parentNode.insertBefore(newNode, oldNode);
     oldNode.style.display = 'none';
 
-    this.#postProcessCallbacks.forEach((callback) => callback(newNode));
+    postProcessCallbacks?.forEach((callback) => callback(newNode));
 
     setTimeout(() => oldNode.remove(), 500);
   }

diff --git a/assets/product-info.js b/assets/product-info.js
@@ -6,9 +6,10 @@ if (!customElements.get('product-info')) {
       quantityForm = undefined;
       onVariantChangeUnsubscriber = undefined;
       cartUpdateUnsubscriber = undefined;
-      swapProductUtility = undefined;
       abortController = undefined;
       pendingRequestUrl = null;
+      preProcessHtmlCallbacks = [];
+      postProcessHtmlCallbacks = [];
 
       constructor() {
         super();
@@ -29,7 +30,7 @@ if (!customElements.get('product-info')) {
       }
 
       addPreProcessCallback(callback) {
-        this.swapProductUtility.addPreProcessCallback(callback);
+        this.preProcessHtmlCallbacks.push(callback);
       }
 
       initQuantityHandlers() {
@@ -50,11 +51,10 @@ if (!customElements.get('product-info')) {
       }
 
       initializeProductSwapUtility() {
-        this.swapProductUtility = new HTMLUpdateUtility();
-        this.swapProductUtility.addPreProcessCallback((html) =>
+        this.preProcessHtmlCallbacks.push((html) =>
           html.querySelectorAll('.scroll-trigger').forEach((element) => element.classList.add('scroll-trigger--cancel'))
         );
-        this.swapProductUtility.addPostProcessCallback((newNode) => {
+        this.postProcessHtmlCallbacks.push((newNode) => {
           window?.Shopify?.PaymentButton?.init();
           window?.ProductModel?.loadShopifyXR();
           publish(PUB_SUB_EVENTS.sectionRefreshed, {
@@ -106,11 +106,21 @@ if (!customElements.get('product-info')) {
           // If we are in an embedded context (quick add, featured product, etc), only swap product info.
           // Otherwise, refresh the entire page content and sibling sections.
           if (this.dataset.updateUrl === 'false') {
-            this.swapProductUtility.viewTransition(this, html.querySelector('product-info'));
+            HTMLUpdateUtility.viewTransition(
+              this,
+              html.querySelector('product-info'),
+              this.preProcessHtmlCallbacks,
+              this.postProcessHtmlCallbacks
+            );
           } else {
             document.querySelector('head title').innerHTML = html.querySelector('head title').innerHTML;
 
-            this.swapProductUtility.viewTransition(document.querySelector('main'), html.querySelector('main'));
+            HTMLUpdateUtility.viewTransition(
+              document.querySelector('main'),
+              html.querySelector('main'),
+              this.preProcessHtmlCallbacks,
+              this.postProcessHtmlCallbacks
+            );
           }
         };
       }
@@ -159,7 +169,13 @@ if (!customElements.get('product-info')) {
 
       updateOptionValues(html) {
         const variantSelects = html.querySelector('variant-selects');
-        if (variantSelects) this.variantSelectors.innerHTML = variantSelects.innerHTML;
+        if (variantSelects) {
+          HTMLUpdateUtility.viewTransition(
+            this.variantSelectors,
+            variantSelects,
+            this.preProcessHtmlCallbacks,
+          );
+        }
       }
 
       handleUpdateProductInfo(productUrl) {

diff --git a/assets/quick-add.js b/assets/quick-add.js
@@ -100,7 +100,7 @@ if (!customElements.get('quick-add-modal')) {
 
       updateImageSizes(productElement) {
         const product = productElement.querySelector('.product');
-        const desktopColumns = product.classList.contains('product--columns');
+        const desktopColumns = product?.classList.contains('product--columns');
         if (!desktopColumns) return;
 
         const mediaImages = product.querySelectorAll('.product__media img');