From 57ebc38212aec75c904eec4e8c95a9ad7da0ea1d Mon Sep 17 00:00:00 2001 From: adildev101 <108662497+adildev101@users.noreply.github.com> Date: Thu, 28 Mar 2024 10:11:10 +0000 Subject: [PATCH] YSHOP2-1372: Add the option to display the states as a drop-down list on the new themes (#174) ## JIRA Ticket [YSHOP2-1372](https://youcanshop.atlassian.net/browse/YSHOP2-1372) ## QA Steps - [ ] `pnpm i` - [ ] `pnpm dev` - go to settings > payment and add a custom field - try to add different types of fields - then verify that the custom fields it's appear on the theme ![image (5)](https://github.com/youcan-shop/cod-theme-2/assets/108662497/5a6eecdf-46f3-40eb-a2d3-1615580a24c9) ## Note Leave empty when you have nothing to say [YSHOP2-1372]: https://youcanshop.atlassian.net/browse/YSHOP2-1372?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --- assets/express-checkout.css | 4 +++ assets/express-checkout.js | 60 +++++++++++++++----------------- assets/main.css | 6 ++-- snippets/express-checkout.liquid | 58 +++++++++++++++--------------- styles/express-checkout.scss | 5 +++ styles/main.scss | 2 +- 6 files changed, 71 insertions(+), 64 deletions(-) diff --git a/assets/express-checkout.css b/assets/express-checkout.css index 7dd9b52b..fc0bc4de 100644 --- a/assets/express-checkout.css +++ b/assets/express-checkout.css @@ -22,6 +22,10 @@ grid-gap: 14px; padding: 16px; } +.express-checkout-fields .dropdown-input { + min-width: 100%; + padding: 0; +} @media (min-width: 768px) { .express-checkout-fields { border: unset; diff --git a/assets/express-checkout.js b/assets/express-checkout.js index c3d12a9d..1fb117a4 100644 --- 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,30 @@ async function placeOrder() { stopLoad('#loading__checkout'); } } + +function displayValidationErrors(err) { + const form = document.querySelector('#express-checkout-form'); + const errorFields = err.meta.fields; + + if (!form || !errorFields) return; + + form.querySelectorAll('.validation-error').forEach(el => el.textContent = ''); + + Object.keys(errorFields).forEach((field) => { + const fieldName = field.startsWith('extra_fields') ? `extra_fields[${field.split('.')[1]}]` : field; + const formElement = form.querySelector(`[name="${fieldName}"]`); + const errorEl = form.querySelector(`.validation-error[data-error-for="${fieldName}"]`); + + if (formElement && errorEl) { + formElement.classList.add('error'); + errorEl.textContent = errorFields[field][0]; + formElement.addEventListener('input', () => { + formElement.classList.remove('error'); + errorEl.textContent = ''; + }); + } else { + notify(`Please check the form's structure. ${fieldName}`, 'error'); + } + }); +} + diff --git a/assets/main.css b/assets/main.css index e579e8c4..1350189e 100644 --- a/assets/main.css +++ b/assets/main.css @@ -50,15 +50,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 index 76d26990..772f51bb 100644 --- a/snippets/express-checkout.liquid +++ b/snippets/express-checkout.liquid @@ -18,14 +18,14 @@ .custom-checkout-{{ checkout_id }}, .express-checkout-fields { - border-color: {{ settings.form_border_colour.hex }}; + border: 1px solid {{ settings.form_border_colour.hex }}; } .custom-checkout-{{ checkout_id }} .express-checkout-fields { grid-gap: {{ settings.inputs_gap }}px; } - .custom-checkout-{{ checkout_id }} input { + .custom-checkout-{{ checkout_id }} input, textarea, .select { padding: 0 {{ settings.input_padding }}px; border-radius: {{ settings.input_border_radius }}px; font-size: {{ settings.input_text_size }}px !important; @@ -40,7 +40,7 @@ {% endif %} {% if settings.input_border_color %} - border-color: {{ settings.input_border_color.hex }}; + border: 1px solid {{ settings.input_border_color.hex }}; {% endif %} } @@ -83,32 +83,34 @@ >
{{ settings.form_title }}
- {%- for field in checkout.fields %} -
- -
+ {% for field in checkout.fields %} +
+ {% case field.type %} + {% when 'select' %} +
+
+ Select + +
+
    + {% for option in field.options %} +
  • {{ option }}
    • + {% endfor %} +
+
+
+ {% when 'textarea' %} + +
+ {% when 'number' %} + +
+ {% when 'text' %} + +
+ {% endcase %}
- {%- endfor %} + {% endfor %} {% if is_sticky == false %}