Fix error misalignment for Quick order list (Shopify#2887)

* Fix error misalignment * Reduce top space. Address feedback.
m-k-enterprises · Feb 18, 2024 · 2c2a542 · 2c2a542
1 parent 9fae2c8
commit 2c2a542
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css
@@ -529,6 +529,10 @@ quick-order-list-remove-button:hover .icon-remove {
     vertical-align: middle;
   }
 
+  .quick-order-list__table .desktop-row-error td {
+    padding-top: 0;
+  }
+
   .quick-order-list__table .variant-item--unit-price td {
     vertical-align: top;
 
@@ -694,4 +698,4 @@ quick-order-list .tax-note {
   margin-bottom: 2rem;
   display: block;
   width: 100%;
-}
+}
diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
@@ -348,8 +348,13 @@ class QuickOrderList extends HTMLElement {
   }
 
   updateLiveRegions(id, message) {
-    const variantItemError = document.getElementById(`Quick-order-list-item-error-${id}`);
-    if (variantItemError) variantItemError.querySelector('.variant-item__error-text').innerHTML = message;
+    const variantItemErrorDesktop = document.getElementById(`Quick-order-list-item-error-desktop-${id}`);
+    const variantItemErrorMobile = document.getElementById(`Quick-order-list-item-error-mobile-${id}`);
+    if (variantItemErrorDesktop) {
+      variantItemErrorDesktop.querySelector('.variant-item__error-text').innerHTML = message;
+      variantItemErrorDesktop.closest('tr').classList.remove('hidden');
+    }
+    if (variantItemErrorMobile) variantItemErrorMobile.querySelector('.variant-item__error-text').innerHTML = message;
 
     this.variantItemStatusElement.setAttribute('aria-hidden', true);