Save

layout/style-scss/style.scss

@@ -9,8 +9,7 @@ $cGray: #f6f6f6;
 $cGrayLight: #eceff1;
 $cComment: #c3c3c3;
 $form_gray: #e7e7e7;
-$font_nunito: 'Nunito',
-sans-serif;
+$font_nunito: 'Nunito', sans-serif;
 
 @import '_mixins';
 
@@ -726,7 +725,6 @@ input:-webkit-autofill:active {
 
 		@include respond-above(xxl) {
 			.product-mini {
-
 				&:nth-child(11),
 				&:nth-child(12) {
 					display: none;
@@ -3567,7 +3565,6 @@ ul.pager {
 	}
 
 	.pager {
-
 		.first,
 		.last {
 			display: none;
@@ -4140,7 +4137,8 @@ ul.pager {
 			margin-bottom: 30px;
 		}
 
-    .content {}
+		.content {
+		}
 	}
 }
 
@@ -5126,7 +5124,6 @@ ul.pager {
 
 			ul {
 				li {
-
 					a,
 					.menu-trigger {
 						text-transform: none;
@@ -5493,7 +5490,6 @@ ul.pager {
 .products-related {
 	.owl-carousel {
 		.owl-nav {
-
 			.owl-prev,
 			.owl-next {
 				span {
@@ -5628,7 +5624,6 @@ ul.pager {
 	border-radius: 10px;
 
 	.jconfirm-buttons {
-
 		.btn.btn-blue,
 		.btn.btn-orange {
 			background-color: $cRed !important;
@@ -5655,7 +5650,6 @@ ul.pager {
 	#basket {
 		.basket-product {
 			.buttons {
-
 				.int-format.form-control:focus,
 				.int-format.form-control:active {
 					border: 2px solid #000;
@@ -5666,7 +5660,8 @@ ul.pager {
 	}
 
 	.row {
-    .col-12 {}
+		.col-12 {
+		}
 	}
 }
 
@@ -5677,7 +5672,6 @@ ul.pager {
 		#basket {
 			.basket-bottom {
 				.basket-message {
-
 					.form-control:focus,
 					.form-control:active {
 						border: 2px solid #000;
@@ -6241,7 +6235,6 @@ ul.pager {
 }
 
 .swiper {
-
 	.swiper-button-prev,
 	.swiper-button-next {
 		width: 40px;
@@ -6306,3 +6299,86 @@ ul.pager {
 		width: 100%;
 	}
 }
+
+// ******************
+.form-control {
+	&.form-control-phone {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		border-radius: 10px;
+
+		&: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,8 +109,26 @@
   <? if ( $this -> client ):?></div><? endif;?>
 </div>
 <script class="footer">
-  $( function()
-  {
+  $(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)
     {
       e.preventDefault();