Prevent ui changes from variant selection queues (#2030)

Shopify · Oct 18, 2022 · 147c21e · 147c21e
1 parent 6a9a631
commit 147c21e
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/assets/global.js b/assets/global.js
@@ -840,10 +840,14 @@ class VariantSelects extends HTMLElement {
   }
 
   renderProductInfo() {
+    const requestedVariantId = this.currentVariant.id;
     const activeElementId = document.activeElement.id;
-    fetch(`${this.dataset.url}?variant=${this.currentVariant.id}&section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`)
+    fetch(`${this.dataset.url}?variant=${requestedVariantId}&section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`)
       .then((response) => response.text())
       .then((responseText) => {
+        // prevent unnecessary ui changes from abandoned selections
+        if (this.currentVariant.id !== requestedVariantId) return;
+
         const html = new DOMParser().parseFromString(responseText, 'text/html')
         const destination = document.getElementById(`price-${this.dataset.section}`);
         const source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
@@ -857,7 +861,7 @@ class VariantSelects extends HTMLElement {
 
         if (price) price.classList.remove('visibility-hidden');
         this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);
-        
+
         document.querySelector('variant-radios') ? this.querySelector(`[for="${activeElementId}"]`).focus() : this.querySelector(`#${activeElementId}`).focus();
       });
   }