Project-Pro/marianek.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: personalizacja produktu w koszyku

Browse Source
This commit is contained in:
Roman Pyrih
2026-05-12 14:10:26 +02:00
parent 56c982f99e
commit d8c793b84c
6 changed files with 3800 additions and 3645 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layout/style-css/style.css
View File

File diff suppressed because one or more lines are too long

2
layout/style-css/style.css.map
View File

File diff suppressed because one or more lines are too long

116
layout/style-scss/style.scss
View File

@@ -11,10 +11,8 @@ $cGrayLight: #eceff1;
$cComment: #c3c3c3; $cComment: #c3c3c3;
$cWhite: #fff; $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'; @import '_mixins';
@keyframes fade_in_show { @keyframes fade_in_show {
@@ -120,7 +118,7 @@ input:-webkit-autofill:active {
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled):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: $cBlue; background: $cBlue;
border: none; border: none;
} }
@@ -133,7 +131,7 @@ input:-webkit-autofill:active {
.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled):active:focus,
.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; box-shadow: none;
} }
@@ -632,7 +630,7 @@ input:-webkit-autofill:active {
margin-left: -15px; margin-left: -15px;
justify-content: center; justify-content: center;
>li { > li {
@include respond-between(sm, md) { @include respond-between(sm, md) {
&#link-5 { &#link-5 {
display: none; display: none;
@@ -645,11 +643,11 @@ input:-webkit-autofill:active {
} }
} }
>i { > i {
display: none; display: none;
} }
>a { > a {
font-family: 'Nunito Sans', sans-serif; font-family: 'Nunito Sans', sans-serif;
color: $cText; color: $cText;
font-size: 18px; font-size: 18px;
@@ -674,14 +672,14 @@ input:-webkit-autofill:active {
} }
&:hover { &:hover {
>ul { > ul {
display: flex; display: flex;
animation: fade_in_show 0.5s; animation: fade_in_show 0.5s;
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
>ul { > ul {
left: 0; left: 0;
width: 100%; width: 100%;
display: none; display: none;
@@ -690,7 +688,7 @@ input:-webkit-autofill:active {
background: #fff; background: #fff;
@include transition; @include transition;
>li { > li {
width: calc(100% / 4); width: calc(100% / 4);
margin-bottom: 25px; margin-bottom: 25px;
@@ -713,7 +711,7 @@ input:-webkit-autofill:active {
} }
} }
>a { > a {
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
} }
@@ -753,7 +751,6 @@ input:-webkit-autofill:active {
@include respond-above(xxl) { @include respond-above(xxl) {
.product-mini { .product-mini {
&:nth-child(11), &:nth-child(11),
&:nth-child(12) { &:nth-child(12) {
display: none; display: none;
@@ -1424,10 +1421,10 @@ input:-webkit-autofill:active {
&.level-0 { &.level-0 {
padding: 0 0 15px 0; padding: 0 0 15px 0;
>li { > li {
padding-bottom: 10px; padding-bottom: 10px;
>a { > a {
font-family: 'Nunito Sans', sans-serif; font-family: 'Nunito Sans', sans-serif;
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
@@ -2116,12 +2113,12 @@ ul.pager {
visibility: hidden; visibility: hidden;
} }
.grow-wrap>textarea { .grow-wrap > textarea {
resize: none; resize: none;
overflow: hidden; overflow: hidden;
} }
.grow-wrap>textarea, .grow-wrap > textarea,
.grow-wrap::after { .grow-wrap::after {
border: 1px solid #d5d5d5; border: 1px solid #d5d5d5;
padding: 0.5rem; padding: 0.5rem;
@@ -2224,10 +2221,12 @@ ul.pager {
opacity: 1; opacity: 1;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, background-image: linear-gradient(
to right,
#000, #000,
#000 50%, #000 50%,
rgba(0, 0, 0, 0.3) 50%); rgba(0, 0, 0, 0.3) 50%
);
background-size: 200% 100%; background-size: 200% 100%;
background-position: 100%; background-position: 100%;
transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
@@ -2303,7 +2302,6 @@ ul.pager {
.swiper { .swiper {
&:hover { &:hover {
.swiper-button-next, .swiper-button-next,
.swiper-button-prev { .swiper-button-prev {
opacity: 1; opacity: 1;
@@ -2529,7 +2527,7 @@ ul.pager {
.reviews_data { .reviews_data {
#widget-container { #widget-container {
.rating-details { .rating-details {
&>div { & > div {
background: $cWhite; background: $cWhite;
} }
} }
@@ -2617,7 +2615,7 @@ ul.pager {
.basket-options { .basket-options {
padding-top: 25px; padding-top: 25px;
>.content { > .content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
@@ -2719,6 +2717,60 @@ ul.pager {
} }
#transport-methods { #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) { @include respond-below(sm) {
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
@@ -3047,7 +3099,7 @@ ul.pager {
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
>* { > * {
width: 100%; width: 100%;
} }
@@ -3435,8 +3487,8 @@ ul.pager {
max-width: 600px; max-width: 600px;
} }
>.container { > .container {
>.row { > .row {
.col-xl-4 { .col-xl-4 {
order: 1; order: 1;
} }
@@ -3461,8 +3513,8 @@ ul.pager {
#main-menu { #main-menu {
#menu-container-1 { #menu-container-1 {
ul.level-0 { ul.level-0 {
>li { > li {
>ul { > ul {
padding: 25px; padding: 25px;
} }
} }
@@ -3496,7 +3548,7 @@ ul.pager {
} }
.basket-summary-address { .basket-summary-address {
>.basket-address-form { > .basket-address-form {
.left { .left {
.addresses { .addresses {
.address { .address {
@@ -3773,7 +3825,6 @@ ul.pager {
} }
.pager { .pager {
.first, .first,
.last { .last {
display: none; display: none;
@@ -4458,3 +4509,8 @@ div[class^='products-box-'] {
display: none !important; display: none !important;
} }
} }
.btn-save-custom-fields {
color: #fff !important;
margin-top: 20px;
}

58
templates_user/shop-basket/_partials/product-custom-fields.php
View File

@@ -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="custom-field">
<div class="_name"> <div class="_name">
<? <?= htmlspecialchars( $custom_field['name'] ) . ':'; ?>
$custom_field = ( new \Domain\Product\ProductRepository( $GLOBALS['mdb'] ) )->findCustomFieldCached( $key );
echo $custom_field['name'] . ':';
?>
</div> </div>
<div class="_text"> <div class="_text">
<?= $val;?> <?= nl2br( htmlspecialchars( $val ) );?>
</div> </div>
</div> </div>
<? endif;?> <? elseif ( $field_type == 'image' && !empty( $val ) ) : ?>
<? endforeach; endif;?> <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; ?>

3
templates_user/shop-basket/basket-details.php
View File

@@ -57,7 +57,8 @@
<hr> <hr>
<? endif; ?> <? endif; ?>
<?= \Shared\Tpl\Tpl::view( 'shop-basket/_partials/product-custom-fields', [ <?= \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'] ):?> <? if ( $product['additional_message'] ):?>
<div class="basket-product-message"> <div class="basket-product-message">

58
templates_user/shop-basket/basket.php
View File

@@ -511,4 +511,62 @@
console.warn('#orlen_point_id nie został znaleziony.'); 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> </script>