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
Shopify · Sep 23, 2024 · c623d27 · c623d27
1 parent cd041f6
commit c623d27
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git 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
@@ -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">