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

* Fix error misalignment * Reduce top space. Address feedback.
inovikov78 · Jul 26, 2023 · dc5b855 · dc5b855
1 parent d7a46a1
commit dc5b855
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 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);
 

diff --git a/snippets/quick-order-list-row.liquid b/snippets/quick-order-list-row.liquid
@@ -308,7 +308,11 @@
           {%- endif -%}
         </div>
       {%- endif -%}
-      <div class="variant-item__error" id="Quick-order-list-item-error-{{ variant.id }}" role="alert">
+      <div
+        class="variant-item__error large-up-hide"
+        id="Quick-order-list-item-error-mobile-{{ variant.id }}"
+        role="alert"
+      >
         <small class="variant-item__error-text"></small>
         <svg
           aria-hidden="true"
@@ -432,6 +436,27 @@
     {% # theme-check-enable %}
   </td>
 </tr>
+<tr class="small-hide medium-hide hidden desktop-row-error">
+  <td></td>
+  <td>
+    <div class="variant-item__error" id="Quick-order-list-item-error-desktop-{{ variant.id }}" role="alert">
+      <small class="variant-item__error-text"></small>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        class="icon icon-error"
+        viewBox="0 0 13 13"
+      >
+        <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
+        <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
+        <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
+        <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
+      </svg>
+    </div>
+  </td>
+  <td></td>
+  <td></td>
+</tr>
 
 {%- if product.quantity_price_breaks_configured? -%}
   <volume-pricing class="hidden" id="Volume-{{ variant.id }}">