YSHOP2-1372: Add the option to display the states as a drop-down list…

… on the new themes (#209) * init * update css * update the js error handling
youcan-shop · Mar 28, 2024 · 1abc722 · 1abc722
1 parent da43779
commit 1abc722
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 78 deletions.
diff --git a/assets/express-checkout.css b/assets/express-checkout.css
@@ -63,6 +63,10 @@
   grid-gap: 14px;
   padding: 10px;
 }
+.express-checkout-fields .dropdown-input {
+  min-width: 100%;
+  padding: 0;
+}
 @media (min-width: 768px) {
   .express-checkout-fields {
     border-width: 4px;

diff --git a/assets/express-checkout.js b/assets/express-checkout.js
@@ -1,6 +1,5 @@
 async function placeOrder() {
   const expressCheckoutForm = document.querySelector('#express-checkout-form');
-
   let fields = Object.fromEntries(new FormData(expressCheckoutForm));
 
   load('#loading__checkout');
@@ -20,37 +19,7 @@ async function placeOrder() {
         redirectToThankyouPage();
       })
       .onValidationErr((err) => {
-        const form = document.querySelector('#express-checkout-form');
-        const formFields = Object.keys(err.meta.fields);
-
-        if (!form || !formFields) return;
-
-        formFields.forEach((field) => {
-          const fieldName = field.indexOf('extra_fields') > -1 ? field.replace('extra_fields.', 'extra_fields[') + ']' : field;
-          const input = form.querySelector(`input[name="${fieldName}"]`);
-          const errorEl = form.querySelector(`.validation-error[data-error="${field}"]`);
-
-          if (input) {
-            input.classList.add('error');
-          }
-
-          if (errorEl) {
-            errorEl.innerHTML = err.meta.fields[field][0];
-          }
-
-          input.addEventListener('input', () => {
-            input.classList.remove('error');
-            errorEl.innerHTML = '';
-          });
-        });
-
-        notify(err.detail, 'error');
-
-        const formTop = form.getBoundingClientRect().top;
-
-        if(!document.querySelector('#yc-sticky-checkout')) {
-          window.scrollBy({ top: formTop - window.innerHeight / 3, behavior: 'smooth' });
-        }
+        displayValidationErrors(err);
       })
       .onSkipShippingStep((data, redirectToShippingPage) => {
         redirectToShippingPage();
@@ -64,3 +33,59 @@ async function placeOrder() {
     stopLoad('#loading__checkout');
   }
 }
+
+function displayValidationErrors(err) {
+  const form = document.querySelector('#express-checkout-form');
+  const errorDetails = err.meta.fields;
+
+  if (!form || !Object.keys(errorDetails).length) return;
+
+  form.querySelectorAll('.validation-error').forEach(el => {
+    el.textContent = '';
+    el.previousElementSibling?.classList.remove('error');
+  });
+
+  const setError = (inputName, message) => {
+    const input = form.querySelector(`[name="${inputName}"]`);
+    const errorEl = form.querySelector(`.validation-error[data-error-for="${inputName}"]`);
+
+    if (input && errorEl) {
+      input.classList.add('error');
+      errorEl.textContent = message;
+      return true;
+    }
+    return false;
+  };
+
+  Object.entries(errorDetails).forEach(([field, messages]) => {
+    let inputName = `extra_fields[${field}]`;
+    if (!setError(inputName, messages[0])) {
+      if (field.startsWith('extra_fields.')) {
+        inputName = field.replace('extra_fields.', 'extra_fields[') + ']';
+        if (!setError(inputName, messages[0])) {
+          notify(`Error element not found for field: ${field}`, 'error');
+        }
+      } else {
+        notify(`Error element not found for field: ${field}`, 'error');
+      }
+    }
+  });
+}
+
+function normalizeFieldName(field) {
+  return field.includes('extra_fields')
+    ? field.replace('extra_fields.', 'extra_fields[') + ']'
+    : field;
+}
+
+function clearError(input, errorEl) {
+  input.classList.remove('error');
+  if (errorEl) errorEl.textContent = '';
+}
+
+function scrollToFirstError(form) {
+  const firstError = form.querySelector('.error');
+  if (firstError) {
+    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+}
diff --git a/assets/main.css b/assets/main.css
@@ -51,15 +51,15 @@ a.disabled {
   pointer-events: none;
 }
 
-input {
+input, textarea {
   font-weight: 300 !important;
   border: var(--yc-main-border);
 }
-input.error {
+input.error, textarea.error {
   border-color: var(--yc-error-color) !important;
   outline: 1px solid var(--yc-error-color) !important;
 }
-input + .validation-error {
+input + .validation-error, textarea + .validation-error {
   color: var(--yc-error-color) !important;
   font-size: 12px;
   font-weight: 600;

diff --git a/snippets/express-checkout.liquid b/snippets/express-checkout.liquid
@@ -25,7 +25,7 @@
     grid-gap: {{ settings.inputs_gap }}px;
   }
 
-  .custom-checkout-{{ checkout_id }} input {
+  .custom-checkout-{{ checkout_id }} input, textarea, .select {
     padding: {{ settings.input_padding }}px;
     border-radius: {{ settings.input_border_radius }}px;
     font-size: {{ settings.input_text_size }}px !important;
@@ -39,7 +39,7 @@
     {% endif %}
 
     {% if settings.input_border_color %}
-    border-color: {{ settings.input_border_color.hex }};
+    border: 1px solid {{ settings.input_border_color.hex }};
     {% endif %}
   }
 
@@ -72,55 +72,41 @@
   }
 {% endstyle %}
 
-<form
-  id='express-checkout-form'
-  class='custom-checkout-{{ checkout_id }}
-  {% if is_placeholder %}express-checkout-placeholder{% endif %}'
-  onsubmit="return false;"
->
+<form id='express-checkout-form' class='custom-checkout-{{ checkout_id }} {% if is_placeholder %}express-checkout-placeholder{% endif %}' onsubmit="return false;">
   <div class='express-checkout-fields'>
     <div class='express-checkout-title'>{{ settings.form_title }}</div>
-    {%- for field in checkout.fields %}
+    {% for field in checkout.fields %}
       <div class='express-checkout-field'>
-        <input
-          type='{{ field.type }}'
-          class='w-full'
-          id='{{ field.name }}'
-          {% if field.custom %}
-            name='extra_fields[{{ field.name }}]'
+        {% case field.type %}
+          {% when 'select' %}
+            <div class='dropdown-input select'>
+              <div class='dropbtn'>
+                <span class='option-name'>{{ field.placeholder | default: 'Select option' }}</span>
+                <ion-icon name='chevron-down-outline' class='dropdown-icon'></ion-icon>
+              </div>
+              <ul class='dropdown-content' name='{{ field.name }}'>
+                {% for option in field.options %}
+                  <li value='{{ option }}'>{{ option }}</li>
+                {% endfor %}
+              </ul>
+            </div>
+          {% when 'textarea' %}
+            <textarea id='{{ field.name }}' name='{{ "extra_fields[" | append: field.name | append: "]" if field.custom }}' class='w-full' placeholder='{{ field.placeholder }}' required='{{ field.required }}'></textarea>
           {% else %}
-            name='{{ field.name }}'
-          {% endif %}
-          placeholder='{{ field.placeholder }}'
-          {% if field.required %}
-            required
-          {% endif %}
-        >
-        <div
-          class='validation-error'
-          {% if field.custom %}
-            data-error='extra_fields.{{ field.name }}'
-          {% else %}
-            data-error='{{ field.name }}'
-          {% endif %}
-        ></div>
+            <input type='{{ field.type }}' id='{{ field.name }}' name='{{ "extra_fields[" | append: field.name | append: "]" if field.custom }}' class='w-full' placeholder='{{ field.placeholder }}' required='{{ field.required }}'>
+        {% endcase %}
+        <div class='validation-error' data-error-for='{{ "extra_fields[" | append: field.name | append: "]" if field.custom }}'></div>
       </div>
-    {%- endfor %}
+    {% endfor %}
+
     {% if is_sticky == false %}
-      <button
-        type='submit'
-        class='express-checkout-button'
-        {% if is_placeholder %} disabled {% endif %}
-        onclick='placeOrder(this)'
-      >
-        <span
-          class='spinner hidden'
-          id='loading__checkout'
-        ></span>
+      <button type='submit' class='express-checkout-button' {% if is_placeholder %} disabled {% endif %} onclick='placeOrder(this)'>
+        <span class='spinner hidden' id='loading__checkout'></span>
         <span>{{ settings.express_checkout_cta }}</span>
       </button>
-      {% endif %}
+    {% endif %}
   </div>
 </form>
 
+
 {{ 'express-checkout.js' | asset_url | script_tag_deferred }}
diff --git a/styles/express-checkout.scss b/styles/express-checkout.scss
@@ -71,6 +71,11 @@
   grid-gap: 14px;
   padding: 10px;
 
+  .dropdown-input {
+    min-width: 100%;
+    padding: 0;
+  }
+
   @include breakpoint('md') {
     border-width: 4px;
     border: unset;

diff --git a/styles/main.scss b/styles/main.scss
@@ -52,7 +52,7 @@ a.disabled {
   pointer-events: none;
 }
 
-input {
+input, textarea {
   font-weight: 300 !important;
   border: var(--yc-main-border);