Merge branch 'main' of http://91.189.216.43:3000/jacek.pyziak/shopPRO

layout/style-scss/style.scss

@@ -8,8 +8,7 @@ $cTextLight: #3a3a3a;
 $cGray: #f6f6f6;
 $cGrayLight: #eceff1;
 $cComment: #c3c3c3;
-$fJosefin: 'Josefin Sans',
+$fJosefin: 'Josefin Sans', sans-serif;
-sans-serif;
 @import '_mixins';
 
 @keyframes fade_in_show {
@@ -683,7 +682,6 @@ input:-webkit-autofill:active {
 
 		@include respond-above(xxl) {
 			.product-mini {
-
 				&:nth-child(11),
 				&:nth-child(12) {
 					display: none;
@@ -1753,7 +1751,8 @@ ul.pager {
 			text-align: right;
 		}
 
-    ._input {}
+		._input {
+		}
 	}
 
 	.product-message {
@@ -2109,10 +2108,12 @@ ul.pager {
 					opacity: 1;
 					-webkit-background-clip: text;
 					-webkit-text-fill-color: transparent;
-          background-image: linear-gradient(to right,
+					background-image: linear-gradient(
+						to right,
 						#000,
 						#000 50%,
-              rgba(0, 0, 0, 0.3) 50%);
+						rgba(0, 0, 0, 0.3) 50%
+					);
 					background-size: 200% 100%;
 					background-position: 100%;
 					transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
@@ -3375,7 +3376,6 @@ ul.pager {
 	}
 
 	.pager {
-
 		.first,
 		.last {
 			display: none;
@@ -3864,3 +3864,84 @@ div[class^='products-box-'] {
 		}
 	}
 }
+// ******************
+.form-control {
+	&.form-control-phone {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+
+		&:has(> .form-control-input:focus) {
+			color: #495057;
+			background-color: #fff;
+			border-color: #80bdff;
+			outline: 0;
+			box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+		}
+		&:hover {
+			&[tooltip] {
+				position: relative;
+			}
+			&[tooltip]:before {
+				content: '';
+				display: none;
+				content: '';
+				border-left: 5px solid transparent;
+				border-right: 5px solid transparent;
+				border-bottom: 5px solid #343a40;
+				position: absolute;
+				top: 30px;
+				left: 85px;
+				z-index: 8;
+				font-size: 0;
+				line-height: 0;
+				width: 0;
+				height: 0;
+			}
+			&[tooltip]:after {
+				display: none;
+				content: attr(tooltip);
+				position: absolute;
+				top: 35px;
+				left: 50px;
+				padding: 5px 8px;
+				background: #343a40;
+				color: #fff;
+				z-index: 9;
+				font-size: 0.75em;
+				// height: 18px;
+				line-height: 18px;
+				-webkit-border-radius: 3px;
+				-moz-border-radius: 3px;
+				border-radius: 3px;
+				white-space: nowrap;
+				word-wrap: normal;
+			}
+			&[tooltip]:hover:before,
+			&[tooltip]:hover:after {
+				display: block;
+			}
+		}
+
+		.form-control-phone-code {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+
+			span {
+				font-family: 'Open Sans', sans-serif;
+				font-size: 14px;
+			}
+		}
+		.form-control-input {
+			border: none;
+			height: calc(2.25rem - 2px);
+
+			&:focus {
+				border: none;
+				outline: none;
+				box-shadow: none;
+			}
+		}
+	}
+}

templates/shop-basket/address-form.php

@@ -70,7 +70,21 @@
       </div>
     </div>
     <div class="form-group">
-      <input type="text" id="phone" name="phone" class="form-control" required placeholder="<?= ucfirst( \S::lang( 'telefon' ) );?>" value="<?= htmlspecialchars( $address_current['phone'] );?>">
+      <div class="form-control form-control-phone" tooltip="Wprowadź numer w formacie: 123456789">
+        <div class="form-control-phone-code">
+          <img src="/images/system/lang_pl.png" alt="">
+          <span>+48</span>
+        </div>
+        <input
+          type="tel"
+          id="phone"
+          name="phone"
+          class="form-control form-control-input"
+          required
+          placeholder="<?= ucfirst(\S::lang('telefon')); ?>"
+          value="<?= htmlspecialchars($address_current['phone']); ?>"
+          pattern="[0-9]{9}">
+      </div>
     </div>
     <div class="form-group">
       <div class="row">
@@ -95,6 +109,25 @@
   <? if ( $this -> client ):?></div><? endif;?>
 </div>
 <script class="footer">
+  $(document).ready(function () {
+    function validatePhone() {
+      var phone = $('#phone');
+      var phonePattern = /^[0-9]{9}$/;
+      
+      if (!phone.val() || !phonePattern.test(phone.val())) {
+        $('#order-send').prop('disabled', true);
+      } else {
+        $('#order-send').prop('disabled', false);
+      }
+    }
+
+    $('#phone').on('input', function () {
+      validatePhone();
+    });
+
+    validatePhone();
+  });
+
   $( function()
   {
     $( 'body' ).on( click_event, '.addresses .address .btn-select', function(e)