From fc82fde432ceb2b0bc1d947c4bd20dc4dd058469 Mon Sep 17 00:00:00 2001
From: Michael Silber <michael@cfxdesign.com>
Date: Sun, 22 Sep 2024 20:53:56 -0400
Subject: [PATCH] Update multiple quick add modals for parity throughout
 multiple sections

Refresh quick order list elements after rendering

Simplify the refresh

Better variable naming

Better refresh after render

Clean up variant selector
---
 assets/quick-order-list.js       | 28 ++++++++++++++++++++++------
 snippets/quick-order-list.liquid |  4 +++-
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
index d4a77ffac57..830d2c78698 100644
--- a/assets/quick-order-list.js
+++ b/assets/quick-order-list.js
@@ -201,6 +201,7 @@ if (!customElements.get('quick-order-list')) {
             id: this.quickOrderListId,
             section: document.getElementById(this.quickOrderListId).dataset.section,
             selector: `#${this.quickOrderListId} .js-contents`,
+            variantSelector: `.quick-order-list__container .variant-item[data-variant-id="[variant-id]"]`,
           },
           {
             id: 'cart-icon-bubble',
@@ -211,11 +212,13 @@ if (!customElements.get('quick-order-list')) {
             id: `quick-order-list-live-region-text-${this.dataset.productId}`,
             section: 'cart-live-region-text',
             selector: '.shopify-section',
+            selectorAll: `.quick-order-list__live-region-text[data-product-id="${this.dataset.productId}"]`,
           },
           {
             id: `quick-order-list-total-${this.dataset.productId}-${this.dataset.section}`,
             section: document.getElementById(this.quickOrderListId).dataset.section,
             selector: `#${this.quickOrderListId} .quick-order-list__total`,
+            selectorAll: `.quick-order-list__total[data-product-id="${this.dataset.productId}"]`,
           },
           {
             id: 'CartDrawer',
@@ -258,11 +261,22 @@ if (!customElements.get('quick-order-list')) {
               ? sectionElement.querySelector(section.selector)
               : sectionElement;
           if (elementToReplace) {
-            if (section.selector === `#${this.quickOrderListId} .js-contents` && this.ids.length > 0) {
+            if (section.variantSelector && this.ids.length > 0) {
               this.ids.flat().forEach((i) => {
-                elementToReplace.querySelector(`#Variant-${i}`).innerHTML = this.getSectionInnerHTML(
+                document
+                  .querySelectorAll(section.variantSelector.replace('[variant-id]', i))
+                  .forEach((variantElementToReplace) => {
+                    variantElementToReplace.innerHTML = this.getSectionInnerHTML(
+                      parsedState.sections[section.section],
+                      `#Variant-${i}`
+                    );
+                  });
+              });
+            } else if (section.selectorAll) {
+              document.querySelectorAll(section.selectorAll).forEach((allElementToReplace) => {
+                allElementToReplace.innerHTML = this.getSectionInnerHTML(
                   parsedState.sections[section.section],
-                  `#Variant-${i}`
+                  section.selector
                 );
               });
             } else {
@@ -273,9 +287,11 @@ if (!customElements.get('quick-order-list')) {
             }
           }
         });
-        this.defineInputsAndQuickOrderTable();
-        this.addMultipleDebounce();
-        this.ids = [];
+        document.querySelectorAll(`quick-order-list[data-product-id="${this.dataset.productId}"]`).forEach((el) => {
+          el.defineInputsAndQuickOrderTable();
+          el.addMultipleDebounce();
+          el.ids = [];
+        });
       }
 
       getTableHead() {
diff --git a/snippets/quick-order-list.liquid b/snippets/quick-order-list.liquid
index 704ce9c8d75..848aa1f448e 100644
--- a/snippets/quick-order-list.liquid
+++ b/snippets/quick-order-list.liquid
@@ -102,10 +102,11 @@
       </div>
 
       <p
-        class="visually-hidden"
+        class="quick-order-list__live-region-text visually-hidden"
         id="quick-order-list-live-region-text-{{ product.id }}"
         aria-live="polite"
         role="status"
+        data-product-id="{{ product.id }}"
       ></p>
       <p
         class="visually-hidden"
@@ -126,6 +127,7 @@
       <div
         class="quick-order-list__total{% unless is_modal %} gradient{% endunless %}"
         id="quick-order-list-total-{{ product.id }}-{{ section.id }}"
+        data-product-id="{{ product.id }}"
       >
         <div class="quick-order-list-total__info">
           <div class="quick-order-list-total__column small-hide medium-hide">