Fix: personalizacja produktu w koszyku

layout/style-scss/style.scss

@@ -11,10 +11,8 @@ $cGrayLight: #eceff1;
 $cComment: #c3c3c3;
 $cWhite: #fff;
 
-$fJosefin: 'Josefin Sans',
+$fJosefin: 'Josefin Sans', sans-serif;
-sans-serif;
+$font_nunito: 'Nunito Sans', sans-serif;
-$font_nunito: 'Nunito Sans',
-sans-serif;
 @import '_mixins';
 
 @keyframes fade_in_show {
@@ -753,7 +751,6 @@ input:-webkit-autofill:active {
 
 		@include respond-above(xxl) {
 			.product-mini {
-
 				&:nth-child(11),
 				&:nth-child(12) {
 					display: none;
@@ -2224,10 +2221,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);
@@ -2303,7 +2302,6 @@ ul.pager {
 
 				.swiper {
 					&:hover {
-
 						.swiper-button-next,
 						.swiper-button-prev {
 							opacity: 1;
@@ -2719,6 +2717,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;
@@ -3773,7 +3825,6 @@ ul.pager {
 	}
 
 	.pager {
-
 		.first,
 		.last {
 			display: none;
@@ -4458,3 +4509,8 @@ div[class^='products-box-'] {
 		display: none !important;
 	}
 }
+
+.btn-save-custom-fields {
+	color: #fff !important;
+	margin-top: 20px;
+}

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

@@ -1,15 +1,55 @@
-<? if ( $this -> custom_fields ): foreach ( $this -> custom_fields as $key => $val ):?>
+<? if ( $this -> custom_fields ) : ?>
-  <? if ( $key ):?>
+  <pre style="display: none;">
+    <?php print_r($this); ?>
+  </pre>
+  <div class="custom-fields-display" data-product-code="<?= htmlspecialchars( $this->product_code ); ?>">
+    <? foreach ( $this -> custom_fields as $key => $val ) : ?>
+      <? $custom_field = ( new \Domain\Product\ProductRepository( $GLOBALS['mdb'] ) )->findCustomFieldCached( $key ); ?>
+      <? $field_type = !empty( $custom_field['type'] ) ? $custom_field['type'] : 'text'; ?>
+
+      <? if ( $field_type == 'text' ) : ?>
         <div class="custom-field">
           <div class="_name">
-        <?
+            <?= htmlspecialchars( $custom_field['name'] ) . ':'; ?>
-          $custom_field = ( new \Domain\Product\ProductRepository( $GLOBALS['mdb'] ) )->findCustomFieldCached( $key );
-          echo $custom_field['name'] . ':';
-        ?>
           </div>
           <div class="_text">
-        <?= $val;?>
+            <?= nl2br( htmlspecialchars( $val ) );?>
+          </div>
+        </div>
+      <? elseif ( $field_type == 'image' && !empty( $val ) ) : ?>
+        <div class="custom-field">
+          <div class="_name">
+            <?= htmlspecialchars( $custom_field['name'] ) . ':'; ?>
+          </div>
+          <div class="_image">
+            <img src="<?= htmlspecialchars( $val );?>" alt="<?= htmlspecialchars( $custom_field['name'] );?>">
+          </div>
+        </div>
+      <? endif; ?>
+    <? endforeach; ?>
+    <a href="#" class="btn btn-sm btn-default btn-edit-custom-fields">Edytuj personalizację</a>
+  </div>
+
+  <div class="custom-fields-edit" data-product-code="<?= htmlspecialchars( $this->product_code ); ?>" style="display: none;">
+    <? foreach ( $this -> custom_fields as $key => $val ) : ?>
+      <? $custom_field = ( new \Domain\Product\ProductRepository( $GLOBALS['mdb'] ) )->findCustomFieldCached( $key ); ?>
+      <? $field_type = !empty( $custom_field['type'] ) ? $custom_field['type'] : 'text'; ?>
+      <? $is_required = !empty( $custom_field['is_required'] ) ? (int)$custom_field['is_required'] : 0; ?>
+
+      <div class="custom-field-edit-row" style="margin-bottom: 5px;">
+        <label>
+          <?= htmlspecialchars( $custom_field['name'] ); ?><?= $is_required ? ' <span style="color:red;">*</span>' : ''; ?>
+        </label>
+        <? if ( $field_type == 'text' ) : ?>
+          <input type="text" class="form-control form-control-sm" name="custom_field[<?= (int)$key; ?>]" value="<?= htmlspecialchars( $val ); ?>" <?= $is_required ? 'required' : ''; ?>>
+        <? elseif ( $field_type == 'image' ) : ?>
+          <input type="text" class="form-control form-control-sm" name="custom_field[<?= (int)$key; ?>]" value="<?= htmlspecialchars( $val ); ?>" placeholder="URL obrazka" <?= $is_required ? 'required' : ''; ?>>
+        <? endif; ?>
+      </div>
+    <? endforeach; ?>
+    <div style="margin-top: 5px;">
+      <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>
 <? endif; ?>
-<? endforeach; endif;?>

templates_user/shop-basket/basket-details.php

@@ -57,7 +57,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

@@ -511,4 +511,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>