feat: Add phone number validation to order confirmation

- Implemented phone number normalization and validation in custom_js.js.
- Added alert class to phone input on validation failure.
- Disabled confirm button until a valid phone number is entered.
- Updated custom.scss to style alert state for phone input.
- Modified footer.tpl to include a new custom JavaScript file.
- Updated head.tpl to reflect the new version of custom.css.
- Minor formatting adjustments in existing CSS and JS files.

themes/charme/assets/css/custom.scss

@@ -426,4 +426,8 @@ body#product {
       display: none !important;
     }
   }
+}
+
+.form-control.alert {
+  border: 1px solid #cc0000 !important;
 }

themes/charme/assets/js/custom.js

@@ -727,4 +727,4 @@ $(window).on('resize', function(){
     }, 100);
 
 
-});
+});

themes/charme/assets/js/custom_js.js

@@ -0,0 +1,57 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const phoneInput = document.querySelector('input[name="phone"]');
+  const confirmBtn = document.getElementById('confirm_order');
+  if (!phoneInput || !confirmBtn) return;
+
+  const STATE = { internalChange: false, activated: false };
+
+  function normalizePhone(val) {
+    let v = (val || '').replace(/\D+/g, '');
+    if (v.length > 9) v = v.slice(0, 9);
+    return v;
+  }
+
+  function isValidPhone() {
+    return normalizePhone(phoneInput.value).length === 9;
+  }
+
+  function setBtnDisabled(disabled) {
+    if (confirmBtn.disabled !== disabled) {
+      STATE.internalChange = true;       // znacznik: to nasza zmiana
+      confirmBtn.disabled = disabled;
+      STATE.internalChange = false;
+    }
+  }
+
+  function applyPhoneValidation() {
+    const normalized = normalizePhone(phoneInput.value);
+    if (phoneInput.value !== normalized) phoneInput.value = normalized;
+
+    if (isValidPhone()) {
+      phoneInput.classList.remove('alert');
+      setBtnDisabled(false);
+    } else {
+      phoneInput.classList.add('alert');
+      setBtnDisabled(true);
+    }
+  }
+
+  // Aktywacja dopiero przy pierwszym focusie
+  phoneInput.addEventListener('focus', function onFirstFocus() {
+    if (STATE.activated) return;
+    STATE.activated = true;
+
+    phoneInput.addEventListener('input', applyPhoneValidation, { passive: true });
+    // pierwsze sprawdzenie – bez emitowania zdarzeń, by nie triggerować cudzych handlerów
+    applyPhoneValidation();
+
+    // Pilnowanie przycisku, gdy inny skrypt zmieni jego stan
+    const observer = new MutationObserver(function (mutations) {
+      if (STATE.internalChange) return; // ignoruj nasze własne zmiany
+      // Tylko jeśli numer niepoprawny – wymuś blokadę
+      if (!isValidPhone()) setBtnDisabled(true);
+    });
+
+    observer.observe(confirmBtn, { attributes: true, attributeFilter: ['disabled'] });
+  }, { once: true });
+});

themes/charme/templates/_partials/footer.tpl

@@ -60,9 +60,10 @@
       {else}
       <div class="col-md-12">
       {/if}
-	  
+
 	    {hook h='displayCopyrightContainer'}
 	  </div>
     </div>
   </div>
-</div>
+</div>
+<script type="text/javascript" src="https://wyczarujprezent.pl/themes/charme/assets/js/custom_js.js?ver=1.003"></script>

themes/charme/templates/_partials/head.tpl

@@ -53,8 +53,7 @@
 {block name='stylesheets'}
   {include file="_partials/stylesheets.tpl" stylesheets=$stylesheets}
 {/block}
-
-<link rel="stylesheet" href="/themes/charme/assets/css/custom.css?ver=1.10028">
+<link rel="stylesheet" href="/themes/charme/assets/css/custom.css?ver=1.10030">
 
 {block name='javascript_head'}
   {include file="_partials/javascript.tpl" javascript=$javascript.head vars=$js_custom_vars}