From c623d27c44a77a07dddc35d11daf28c0f3fd20ea 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
---
 assets/quick-order-list.js       | 25 ++++++++++++++++++++-----
 snippets/quick-order-list.liquid |  4 +++-
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
index d4a77ffac57..2469884506e 100644
--- a/assets/quick-order-list.js
+++ b/assets/quick-order-list.js
@@ -211,11 +211,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',
@@ -260,9 +262,20 @@ if (!customElements.get('quick-order-list')) {
           if (elementToReplace) {
             if (section.selector === `#${this.quickOrderListId} .js-contents` && this.ids.length > 0) {
               this.ids.flat().forEach((i) => {
-                elementToReplace.querySelector(`#Variant-${i}`).innerHTML = this.getSectionInnerHTML(
+                document
+                  .querySelectorAll(`.quick-order-list__container .variant-item[data-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 +286,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">