Fix product edit combination in basket

.vscode/ftp-kr.json

@@ -6,7 +6,7 @@
   "protocol": "ftp",
   "port": 0,
   "fileNameEncoding": "utf8",
-  "autoUpload": false,
+  "autoUpload": true,
   "autoDelete": false,
   "autoDownload": false,
   "ignoreRemoteModification": true,

layout/style-scss/style.scss

@@ -9,8 +9,7 @@ $cGray: #f6f6f6;
 $cGrayLight: #eceff1;
 $cComment: #c3c3c3;
 $form_gray: #e7e7e7;
-$font_nunito: 'Nunito',
+$font_nunito: 'Nunito', sans-serif;
-sans-serif;
 
 @import '_mixins';
 
@@ -124,7 +123,7 @@ input:-webkit-autofill:active {
 
 .btn-success:not(:disabled):not(.disabled):active,
 .btn-success:not(:disabled):not(.disabled).active,
-.show>.btn-success.dropdown-toggle {
+.show > .btn-success.dropdown-toggle {
 	background: $cRed;
 	border: none;
 }
@@ -137,7 +136,7 @@ input:-webkit-autofill:active {
 
 .btn-success:not(:disabled):not(.disabled):active:focus,
 .btn-success:not(:disabled):not(.disabled).active:focus,
-.show>.btn-success.dropdown-toggle:focus {
+.show > .btn-success.dropdown-toggle:focus {
 	box-shadow: none;
 }
 
@@ -643,18 +642,18 @@ input:-webkit-autofill:active {
 					margin-left: -15px;
 					gap: 20px;
 
-          >li {
+					> li {
 						@include respond-between(sm, md) {
 							&#link-5 {
 								display: none;
 							}
 						}
 
-            >i {
+						> i {
 							display: none;
 						}
 
-            >a {
+						> a {
 							font-family: $font_nunito;
 							color: $cText;
 							font-size: 18px;
@@ -679,14 +678,14 @@ input:-webkit-autofill:active {
 						}
 
 						&:hover {
-              >ul {
+							> ul {
 								display: flex;
 								animation: fade_in_show 0.5s;
 								flex-wrap: wrap;
 							}
 						}
 
-            >ul {
+						> ul {
 							left: 0;
 							width: 100%;
 							display: none;
@@ -695,7 +694,7 @@ input:-webkit-autofill:active {
 							background: #fff;
 							@include transition;
 
-              >li {
+							> li {
 								width: calc(100% / 4);
 								margin-bottom: 25px;
 
@@ -719,7 +718,7 @@ input:-webkit-autofill:active {
 									}
 								}
 
-                >a {
+								> a {
 									font-weight: 600;
 									font-size: 16px;
 									white-space: nowrap;
@@ -760,7 +759,6 @@ input:-webkit-autofill:active {
 
 		@include respond-above(xxl) {
 			.product-mini {
-
 				&:nth-child(11),
 				&:nth-child(12) {
 					display: none;
@@ -1433,10 +1431,10 @@ input:-webkit-autofill:active {
 			&.level-0 {
 				padding: 0 0 15px 0;
 
-        >li {
+				> li {
 					padding-bottom: 10px;
 
-          >a {
+					> a {
 						font-family: $font_nunito;
 						font-weight: 600;
 						color: $cText;
@@ -2165,12 +2163,12 @@ ul.pager {
 					visibility: hidden;
 				}
 
-        .grow-wrap>textarea {
+				.grow-wrap > textarea {
 					resize: none;
 					overflow: hidden;
 				}
 
-        .grow-wrap>textarea,
+				.grow-wrap > textarea,
 				.grow-wrap::after {
 					border: 1px solid #d5d5d5;
 					padding: 0.5rem;
@@ -2462,7 +2460,7 @@ ul.pager {
 	.basket-options {
 		padding-top: 25px;
 
-    >.content {
+		> .content {
 			display: flex;
 			justify-content: space-between;
 			flex-wrap: wrap;
@@ -2564,6 +2562,60 @@ ul.pager {
 			}
 
 			#transport-methods {
+				.free-delivery-bar {
+					background: #3a3a3a;
+					border-radius: 8px;
+					padding: 15px 20px;
+					margin-top: 15px;
+					display: flex;
+					align-items: center;
+					gap: 15px;
+					color: #fff;
+
+					&.success {
+						background: #28a745;
+					}
+
+					&__icon {
+						font-size: 28px;
+						flex-shrink: 0;
+					}
+
+					&__content {
+						flex: 1;
+					}
+
+					&__text {
+						font-size: 14px;
+						font-weight: 600;
+						margin-bottom: 8px;
+					}
+
+					&__progress {
+						height: 8px;
+						background: #555;
+						border-radius: 4px;
+						overflow: hidden;
+					}
+
+					&__progress-fill {
+						height: 100%;
+						background: linear-gradient(90deg, #28a745, #5cb85c);
+						border-radius: 4px;
+						transition: width 0.3s ease;
+					}
+
+					&__remaining {
+						font-size: 12px;
+						margin-top: 5px;
+						color: #ccc;
+
+						strong {
+							color: #ff9800;
+						}
+					}
+				}
+
 				@include respond-below(sm) {
 					width: 100%;
 					margin-bottom: 15px;
@@ -2892,7 +2944,7 @@ ul.pager {
 		align-items: center;
 		flex-wrap: wrap;
 
-    >* {
+		> * {
 			width: 100%;
 		}
 
@@ -3289,8 +3341,8 @@ ul.pager {
 			max-width: 600px;
 		}
 
-    >.container {
+		> .container {
-      >.row {
+			> .row {
 				.col-xl-4 {
 					order: 1;
 				}
@@ -3315,8 +3367,8 @@ ul.pager {
 	#main-menu {
 		#menu-container-1 {
 			ul.level-0 {
-        >li {
+				> li {
-          >ul {
+					> ul {
 						padding: 25px;
 					}
 				}
@@ -3358,7 +3410,7 @@ ul.pager {
 	}
 
 	.basket-summary-address {
-    >.basket-address-form {
+		> .basket-address-form {
 			.left {
 				.addresses {
 					.address {
@@ -3632,7 +3684,6 @@ ul.pager {
 	}
 
 	.pager {
-
 		.first,
 		.last {
 			display: none;
@@ -3670,10 +3721,8 @@ ul.pager {
 		background: #fff;
 		width: 100%;
 		max-width: 800px;
-    box-shadow:
+		box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
-      0 7px 8px -4px rgba(0, 0, 0, 0.2),
+			0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
-      0 13px 19px 2px rgba(0, 0, 0, 0.14),
-      0 5px 24px 4px rgba(0, 0, 0, 0.12);
 		max-height: 100%;
 
 		.shop-alert-title {
@@ -4207,7 +4256,8 @@ ul.pager {
 			margin-bottom: 30px;
 		}
 
-    .content {}
+		.content {
+		}
 	}
 }
 
@@ -5193,7 +5243,6 @@ ul.pager {
 
 			ul {
 				li {
-
 					a,
 					.menu-trigger {
 						text-transform: none;
@@ -5559,7 +5608,6 @@ ul.pager {
 .products-related {
 	.owl-carousel {
 		.owl-nav {
-
 			.owl-prev,
 			.owl-next {
 				span {
@@ -5694,7 +5742,6 @@ ul.pager {
 	border-radius: 10px;
 
 	.jconfirm-buttons {
-
 		.btn.btn-blue,
 		.btn.btn-orange {
 			background-color: $cRed !important;
@@ -5721,7 +5768,6 @@ ul.pager {
 	#basket {
 		.basket-product {
 			.buttons {
-
 				.int-format.form-control:focus,
 				.int-format.form-control:active {
 					border: 2px solid #000;
@@ -5732,7 +5778,8 @@ ul.pager {
 	}
 
 	.row {
-    .col-12 {}
+		.col-12 {
+		}
 	}
 }
 
@@ -5743,7 +5790,6 @@ ul.pager {
 		#basket {
 			.basket-bottom {
 				.basket-message {
-
 					.form-control:focus,
 					.form-control:active {
 						border: 2px solid #000;
@@ -6164,7 +6210,7 @@ ul.pager {
 		}
 
 		.row {
-      >div {
+			> div {
 				&:hover {
 					img {
 						animation-name: buzz-out-on-hover;
@@ -6305,7 +6351,6 @@ ul.pager {
 }
 
 .swiper {
-
 	.swiper-button-prev,
 	.swiper-button-next {
 		width: 40px;
@@ -6464,3 +6509,14 @@ ul.pager {
 		display: none;
 	}
 }
+
+.btn-save-custom-fields {
+	color: #fff !important;
+	border-radius: 10px;
+	transition: 0.3s;
+	margin-top: 20px;
+
+	&:hover {
+		background-color: $cText;
+	}
+}

templates/shop-basket/_partials/product-custom-fields.php

@@ -45,7 +45,7 @@
       </div>
     <? endforeach; ?>
     <div style="margin-top: 5px;">
-      <a href="#" class="btn btn-sm btn-primary btn-save-custom-fields">Zapisz</a>
+      <a href="#" class="btn btn-sm btn-success btn-save-custom-fields">Zapisz</a>
       <a href="#" class="btn btn-sm btn-default btn-cancel-custom-fields">Anuluj</a>
     </div>
   </div>

templates_user/shop-basket/basket-details.php

@@ -45,7 +45,8 @@
               <hr>
             <? endif; ?>
             <?= \Shared\Tpl\Tpl::view( 'shop-basket/_partials/product-custom-fields', [
-              'custom_fields' => $position['custom_fields']
+              'custom_fields' => $position['custom_fields'],
+              'product_code'  => $position_hash
             ] ); ?>
             <? if ( $product['additional_message'] ):?>
               <div class="basket-product-message">

templates_user/shop-basket/basket.php

@@ -537,4 +537,62 @@
       console.warn('#orlen_point_id nie został znaleziony.');
     }
   });
+  
+  // edycja personalizacji produktu w koszyku
+  $(document).on('click', '.btn-edit-custom-fields', function(e) {
+    e.preventDefault();
+    var $display = $(this).closest('.custom-fields-display');
+    var productCode = $display.data('product-code');
+    $display.hide();
+    $display.siblings('.custom-fields-edit[data-product-code="' + productCode + '"]').show();
+  });
+
+  $(document).on('click', '.btn-cancel-custom-fields', function(e) {
+    e.preventDefault();
+    var $edit = $(this).closest('.custom-fields-edit');
+    var productCode = $edit.data('product-code');
+    $edit.hide();
+    $edit.siblings('.custom-fields-display[data-product-code="' + productCode + '"]').show();
+  });
+
+  $(document).on('click', '.btn-save-custom-fields', function(e) {
+    e.preventDefault();
+    var $edit = $(this).closest('.custom-fields-edit');
+    var productCode = $edit.data('product-code');
+
+    var valid = true;
+    $edit.find('input[required]').each(function() {
+      if ($.trim($(this).val()) === '') {
+        $(this).css('border-color', 'red');
+        valid = false;
+      } else {
+        $(this).css('border-color', '');
+      }
+    });
+
+    if (!valid) {
+      alert('Wypełnij wszystkie wymagane pola');
+      return;
+    }
+
+    var formData = { product_code: productCode };
+    $edit.find('input[name^="custom_field"]').each(function() {
+      formData[$(this).attr('name')] = $(this).val();
+    });
+
+    $.ajax({
+      type: 'POST',
+      cache: false,
+      url: '/shopBasket/basket_update_custom_fields',
+      data: formData,
+      success: function(response) {
+        var data = jQuery.parseJSON(response);
+        if (data.result === 'ok') {
+          location.reload();
+        } else {
+          alert(data.message || 'Wystąpił błąd');
+        }
+      }
+    });
+  });
 </script>