🐛 Combined listings bugfixes (Shopify#3492)

* (Shopify#3492) Fix volume pricing message jumpiness when switching between combined listings; update page title when switching between combined listings; fix unselected option value bug in Safari * Update ID deduplication for quick add modal
Rabter1 · Jun 4, 2024 · faa9caf · faa9caf
1 parent 8352758
commit faa9caf
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 17 deletions.
diff --git a/assets/component-volume-pricing.css b/assets/component-volume-pricing.css
@@ -19,7 +19,7 @@ volume-pricing li {
   justify-content: space-between;
 }
 
-.volume-pricing-note {
+div.volume-pricing-note {
   margin-top: -2.6rem;
 }
 

diff --git a/assets/global.js b/assets/global.js
@@ -51,8 +51,6 @@ class HTMLUpdateUtility {
     const newNodeWrapper = document.createElement('div');
     HTMLUpdateUtility.setInnerHTML(newNodeWrapper, newContent.outerHTML);
     const newNode = newNodeWrapper.firstChild;
-    oldNode.parentNode.insertBefore(newNode, oldNode);
-    oldNode.style.display = 'none';
 
     // dedupe IDs
     const uniqueKey = Date.now();
@@ -61,6 +59,9 @@ class HTMLUpdateUtility {
       element.form && element.setAttribute('form', `${element.form.getAttribute('id')}-${uniqueKey}`);
     });
 
+    oldNode.parentNode.insertBefore(newNode, oldNode);
+    oldNode.style.display = 'none';
+
     this.#postProcessCallbacks.forEach((callback) => callback(newNode));
 
     setTimeout(() => oldNode.remove(), 500);

diff --git a/assets/product-info.js b/assets/product-info.js
@@ -80,9 +80,7 @@ if (!customElements.get('product-info')) {
         let callback = () => {};
         let productUrl = this.getProductInfoUrl(targetUrl, variant?.id);
         if (this.dataset.url !== targetUrl) {
-          this.updateURL(targetUrl, variant?.id);
-          this.updateShareUrl(targetUrl, variant?.id);
-          callback = this.handleSwapProduct();
+          callback = this.handleSwapProduct(targetUrl, variant);
           productUrl = this.getProductInfoUrl(targetUrl, variant?.id, true);
         } else if (!variant) {
           this.setUnavailable();
@@ -91,24 +89,24 @@ if (!customElements.get('product-info')) {
             this.updateOptionValues(html);
           };
         } else {
-          this.updateURL(targetUrl, variant.id);
-          this.updateShareUrl(targetUrl, variant.id);
           this.updateVariantInputs(variant.id);
-          callback = this.handleUpdateProductInfo(variant);
+          callback = this.handleUpdateProductInfo(targetUrl, variant);
         }
 
         this.renderProductInfo(productUrl, target.id, callback);
       }
 
-      handleSwapProduct() {
+      handleSwapProduct(baseUrl, variant) {
         return (html) => {
           this.productModal?.remove();
+          this.updateURL(baseUrl, variant?.id);
 
           // 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'));
           } else {
+            document.querySelector('head title').innerHTML = html.querySelector('head title').innerHTML;
             this.swapProductUtility.viewTransition(document.querySelector('main'), html.querySelector('main'));
           }
         };
@@ -127,6 +125,13 @@ if (!customElements.get('product-info')) {
           .then(() => {
             // set focus to last clicked option value
             document.querySelector(`#${targetId}`)?.focus();
+          })
+          .catch((error) => {
+            if (error.name === 'AbortError') {
+              console.log('Fetch aborted by user');
+            } else {
+              console.error(error);
+            }
           });
       }
 
@@ -152,11 +157,12 @@ if (!customElements.get('product-info')) {
         if (variantSelects) this.variantSelectors.innerHTML = variantSelects.innerHTML;
       }
 
-      handleUpdateProductInfo(variant) {
+      handleUpdateProductInfo(baseUrl, variant) {
         return (html) => {
           this.pickupAvailability?.update(variant);
           this.updateMedia(html, variant?.featured_media?.id);
           this.updateOptionValues(html);
+          this.updateURL(baseUrl, variant?.id);
 
           const updateSourceFromDestination = (id, shouldHide = (source) => false) => {
             const source = html.getElementById(`${id}-${this.sectionId}`);
@@ -203,14 +209,12 @@ if (!customElements.get('product-info')) {
       }
 
       updateURL(url, variantId) {
-        if (this.dataset.updateUrl === 'false') return;
-        window.history.replaceState({}, '', `${url}${variantId ? `?variant=${variantId}` : ''}`);
-      }
-
-      updateShareUrl(url, variantId) {
         this.querySelector('share-url')?.updateUrl(
           `${window.shopUrl}${url}${variantId ? `?variant=${variantId}` : ''}`
         );
+
+        if (this.dataset.updateUrl === 'false') return;
+        window.history.replaceState({}, '', `${url}${variantId ? `?variant=${variantId}` : ''}`);
       }
 
       setUnavailable() {

diff --git a/assets/quick-add.js b/assets/quick-add.js
@@ -77,7 +77,16 @@ if (!customElements.get('quick-add-modal')) {
 
       preventDuplicatedIDs(productElement) {
         const sectionId = productElement.dataset.section;
-        productElement.outerHTML = productElement.outerHTML.replaceAll(sectionId, `quickadd-${sectionId}`);
+
+        const oldId = sectionId;
+        const newId = `quickadd-${sectionId}`;
+        productElement.innerHTML = productElement.innerHTML.replaceAll(oldId, newId);
+        Array.from(productElement.attributes).forEach((attribute) => {
+          if (attribute.value.includes(oldId)) {
+            productElement.setAttribute(attribute.name, attribute.value.replace(oldId, newId));
+          }
+        });
+
         productElement.dataset.originalSection = sectionId;
       }