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

Change payment UI/UX

Browse Source
This commit is contained in:
Roman Pyrih
2025-10-30 11:02:22 +01:00
parent e9ab1b0592
commit addfc0a95d
4 changed files with 3975 additions and 3816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/classic/assets/css/custom.css
View File

File diff suppressed because one or more lines are too long

2
themes/classic/assets/css/custom.css.map
View File

File diff suppressed because one or more lines are too long

247
themes/classic/assets/css/custom.scss
View File

@@ -5,10 +5,9 @@ $cGoldDark: #d3ba67;
$cBgAccent: #eff6f7; $cBgAccent: #eff6f7;
$cBone: #f6f6f6; $cBone: #f6f6f6;
$fInter: 'Inter', $fInter: 'Inter', sans-serif;
sans-serif;
body>main { body > main {
overflow-x: hidden; overflow-x: hidden;
} }
@@ -212,10 +211,12 @@ a {
background: #ffffff; background: #ffffff;
a { a {
img {} img {
}
} }
.highlighted-informations {} .highlighted-informations {
}
.product-add-to-basket { .product-add-to-basket {
display: flex; display: flex;
@@ -288,7 +289,8 @@ a {
font-weight: 700; font-weight: 700;
} }
.discount-product {} .discount-product {
}
&.product-price-discount { &.product-price-discount {
display: flex; display: flex;
@@ -384,8 +386,8 @@ a {
} }
} }
.product-images>li.thumb-container>.thumb.selected, .product-images > li.thumb-container > .thumb.selected,
.product-images>li.thumb-container>.thumb:hover { .product-images > li.thumb-container > .thumb:hover {
border-color: $cGold; border-color: $cGold;
} }
@@ -403,7 +405,7 @@ a {
body#product { body#product {
overflow-x: hidden; overflow-x: hidden;
>main { > main {
overflow: initial; overflow: initial;
} }
@@ -718,7 +720,7 @@ body#product {
input { input {
display: none; display: none;
&:checked+span { &:checked + span {
border: 0 !important; border: 0 !important;
&::before { &::before {
@@ -938,7 +940,7 @@ body#product {
} }
} }
>.control-label { > .control-label {
display: none; display: none;
} }
@@ -949,7 +951,7 @@ body#product {
margin-bottom: 0; margin-bottom: 0;
margin-right: 16px; margin-right: 16px;
>.input-group { > .input-group {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
@@ -1070,7 +1072,7 @@ body#product {
row-gap: 20px; row-gap: 20px;
margin: 40px 0 0 0; margin: 40px 0 0 0;
>div { > div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -1169,7 +1171,7 @@ body#product {
} }
.product-customization { .product-customization {
>.card { > .card {
padding: 24px; padding: 24px;
background: #ece9e2; background: #ece9e2;
@@ -1356,7 +1358,6 @@ body#product {
} }
#product-details { #product-details {
.product-reference, .product-reference,
.product-quantities { .product-quantities {
display: none !important; display: none !important;
@@ -1400,7 +1401,8 @@ body#product {
#blockcart-modal { #blockcart-modal {
.modal-content { .modal-content {
.modal-header {} .modal-header {
}
.modal-body { .modal-body {
.product-name { .product-name {
@@ -1558,7 +1560,7 @@ body#cart {
} }
.product-card-qty { .product-card-qty {
>.input-group { > .input-group {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
@@ -1729,7 +1731,7 @@ body#cart {
} }
} }
>div { > div {
padding-top: 0 !important; padding-top: 0 !important;
} }
} }
@@ -1776,7 +1778,8 @@ body#cart {
} }
} }
.card-block {} .card-block {
}
.cart-overview { .cart-overview {
.cart-items { .cart-items {
@@ -2183,7 +2186,7 @@ body#checkout {
margin-bottom: 16px; margin-bottom: 16px;
background-color: #ece9e2; background-color: #ece9e2;
>.card-block { > .card-block {
padding: 24px 24px 0 24px; padding: 24px 24px 0 24px;
} }
@@ -2337,7 +2340,6 @@ body#order-confirmation {
} }
section { section {
&#content, &#content,
&#content-hook_payment_return, &#content-hook_payment_return,
&#content-hook-order-confirmation-footer { &#content-hook-order-confirmation-footer {
@@ -2394,7 +2396,6 @@ body#order-confirmation {
} }
footer#footer { footer#footer {
.footer-box-newsletter, .footer-box-newsletter,
.footer-box-services, .footer-box-services,
.footer-box-other-info { .footer-box-other-info {
@@ -2421,7 +2422,7 @@ body {
&:not(#ets_blog_page) { &:not(#ets_blog_page) {
main { main {
#left-column { #left-column {
>div.block { > div.block {
display: none !important; display: none !important;
} }
} }
@@ -2452,7 +2453,7 @@ body {
} }
ul.ets-blog-list { ul.ets-blog-list {
>li { > li {
.post-wrapper { .post-wrapper {
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
@@ -2501,7 +2502,7 @@ body {
} }
.ets_blog_sidebar { .ets_blog_sidebar {
>.block { > .block {
box-shadow: none !important; box-shadow: none !important;
border-radius: 10px; border-radius: 10px;
} }
@@ -2537,7 +2538,7 @@ body {
body#category { body#category {
#left-column { #left-column {
>div { > div {
border-radius: 10px; border-radius: 10px;
} }
} }
@@ -2580,7 +2581,6 @@ body#category {
} }
.data-sheet { .data-sheet {
dd, dd,
dt { dt {
font-weight: 400 !important; font-weight: 400 !important;
@@ -2609,7 +2609,7 @@ body#category {
} }
form.elementor-search { form.elementor-search {
>ul.elementor-search__products { > ul.elementor-search__products {
background: #f9f7f2; background: #f9f7f2;
border-radius: 0; border-radius: 0;
border: 1px solid rgba(17, 14, 12, 0.1); border: 1px solid rgba(17, 14, 12, 0.1);
@@ -2657,7 +2657,7 @@ body#category {
#header-menu { #header-menu {
.elementor-nav-menu { .elementor-nav-menu {
>ul { > ul {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
@@ -2798,15 +2798,15 @@ body#category {
} }
.home-box-1 { .home-box-1 {
>.elementor-column-wrap { > .elementor-column-wrap {
>.elementor-widget-wrap { > .elementor-widget-wrap {
display: grid; display: grid;
grid-template-columns: 7fr 5fr; grid-template-columns: 7fr 5fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
grid-template-areas: 'item1 item2''item1 item3'; grid-template-areas: 'item1 item2' 'item1 item3';
gap: 20px; gap: 20px;
>.elementor-element { > .elementor-element {
&:nth-child(1) { &:nth-child(1) {
grid-area: item1; grid-area: item1;
} }
@@ -2842,10 +2842,10 @@ body#category {
} }
} }
>.elementor-widget-container { > .elementor-widget-container {
height: 100%; height: 100%;
>.elementor-cta { > .elementor-cta {
height: 100%; height: 100%;
} }
} }
@@ -2899,8 +2899,8 @@ body#category {
background: rgba(#aa8a5e, 0.25); background: rgba(#aa8a5e, 0.25);
} }
>.elementor-container { > .elementor-container {
>.elementor-row { > .elementor-row {
align-items: center; align-items: center;
} }
} }
@@ -2933,8 +2933,8 @@ body#category {
} }
.footer-box-other-info { .footer-box-other-info {
>.elementor-container { > .elementor-container {
>.elementor-row { > .elementor-row {
column-gap: 80px; column-gap: 80px;
position: relative; position: relative;
@@ -2959,7 +2959,8 @@ article {
&.product-card { &.product-card {
.product-description { .product-description {
.product-title { .product-title {
a {} a {
}
} }
} }
} }
@@ -3148,7 +3149,6 @@ nav.breadcrumb {
} }
body#cms { body#cms {
// Disable custom footer elements // Disable custom footer elements
&.cms-id-5, &.cms-id-5,
&.cms-id-6, &.cms-id-6,
@@ -3202,7 +3202,7 @@ body#cms {
} }
#js-product-list { #js-product-list {
>.products { > .products {
row-gap: 40px; row-gap: 40px;
} }
} }
@@ -3254,7 +3254,7 @@ body#cms {
.elementor-cart__summary { .elementor-cart__summary {
border: none; border: none;
>span { > span {
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
@@ -3441,7 +3441,7 @@ body#authentication {
} }
.register-form { .register-form {
>p { > p {
display: none; display: none;
} }
@@ -3532,7 +3532,7 @@ body#authentication {
.leo-top-menu { .leo-top-menu {
ul.nav.navbar-nav { ul.nav.navbar-nav {
>li { > li {
&:last-child { &:last-child {
padding-right: 0; padding-right: 0;
@@ -3555,7 +3555,7 @@ body#authentication {
align-items: center; align-items: center;
width: 100%; width: 100%;
>li { > li {
position: relative; position: relative;
// padding: 0 23.5px; // padding: 0 23.5px;
padding: 0; padding: 0;
@@ -3565,7 +3565,8 @@ body#authentication {
} }
&.promo-item { &.promo-item {
>a[href="https://masimmo.pl/promocje/"] { >a[href="https://masimmo.pl/promocje/"]
{
span { span {
color: #e79332 !important; color: #e79332 !important;
} }
@@ -3579,7 +3580,7 @@ body#authentication {
} }
&:not(:first-child) { &:not(:first-child) {
>a { > a {
padding-left: 23.5px; padding-left: 23.5px;
@media (max-width: 1200px) { @media (max-width: 1200px) {
@@ -3593,7 +3594,7 @@ body#authentication {
} }
&:not(:last-child) { &:not(:last-child) {
>a { > a {
position: relative; position: relative;
padding-right: 23.5px; padding-right: 23.5px;
@@ -3619,7 +3620,7 @@ body#authentication {
} }
} }
>a { > a {
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
// padding-left: 23.5px; // padding-left: 23.5px;
@@ -3801,8 +3802,8 @@ body#authentication {
} }
.faceted-slider { .faceted-slider {
>li { > li {
>p { > p {
color: #462d26; color: #462d26;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
font-size: 14px; font-size: 14px;
@@ -3837,7 +3838,7 @@ body#authentication {
#contact { #contact {
main { main {
.container { .container {
>.row:nth-child(2) { > .row:nth-child(2) {
display: grid; display: grid;
grid-template-columns: 310px 1fr; grid-template-columns: 310px 1fr;
gap: 32px; gap: 32px;
@@ -4045,8 +4046,8 @@ body#authentication {
margin-bottom: 15px; margin-bottom: 15px;
} }
>div { > div {
>.elementor-row { > .elementor-row {
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
} }
@@ -4055,24 +4056,24 @@ body#authentication {
.header-panel-box-row-2 { .header-panel-box-row-2 {
.header-panel-box-row-2-col-1 { .header-panel-box-row-2-col-1 {
>div { > div {
>.elementor-widget-wrap { > .elementor-widget-wrap {
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
>.elementor-widget-ps-widget-module { > .elementor-widget-ps-widget-module {
margin-bottom: 0; margin-bottom: 0;
width: fit-content; width: fit-content;
} }
>.elementor-widget-ajax-search { > .elementor-widget-ajax-search {
>.elementor-widget-container { > .elementor-widget-container {
border: 1px solid #e9e3d7; border: 1px solid #e9e3d7;
min-height: 44px; min-height: 44px;
} }
form.elementor-search { form.elementor-search {
>.elementor-search__container { > .elementor-search__container {
button.elementor-search__submit { button.elementor-search__submit {
order: 1; order: 1;
} }
@@ -4110,7 +4111,7 @@ section.off-canvas-nav-megamenu {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
>a { > a {
img { img {
width: 100%; width: 100%;
max-width: 200px; max-width: 200px;
@@ -4154,7 +4155,7 @@ section.off-canvas-nav-megamenu {
li.nav-item { li.nav-item {
&.open-sub { &.open-sub {
>a { > a {
border: none !important; border: none !important;
.menu-title { .menu-title {
@@ -4222,8 +4223,8 @@ section.off-canvas-nav-megamenu {
} }
&.promo-item { &.promo-item {
>a { > a {
>.menu-title { > .menu-title {
color: #c40000; color: #c40000;
} }
} }
@@ -4240,7 +4241,6 @@ section.off-canvas-nav-megamenu {
.dropdown-menu-inner { .dropdown-menu-inner {
.mega-col { .mega-col {
// &:not(:first-child) { // &:not(:first-child) {
.menu-title { .menu-title {
// padding-top: 20px; // padding-top: 20px;
@@ -4360,7 +4360,7 @@ form {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
>.label { > .label {
text-align: left; text-align: left;
} }
@@ -4377,7 +4377,7 @@ form {
#moved-category-structure { #moved-category-structure {
.elementor-cta-content { .elementor-cta-content {
>div { > div {
width: 100%; width: 100%;
} }
} }
@@ -4407,3 +4407,114 @@ body.ce-kit-1 {
display: block; display: block;
width: 100%; width: 100%;
} }
section#checkout-payment-step {
.payment-options-custom {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 15px;
row-gap: 10px;
margin-bottom: 20px;
> .js-payment-option-form,
> .js-additional-information {
display: none !important;
}
.payment-option-title {
color: $cBlack;
font-size: 14px;
font-family: $fInter;
font-weight: 700;
text-transform: initial;
margin: 0 !important;
display: block;
width: 100%;
padding-top: 15px;
&-1 {
order: 1;
}
&-2 {
order: 100;
}
&-3 {
order: 200;
}
}
.payment-item {
position: relative;
min-height: 60px;
&[option-name='paynow'] {
order: 2;
}
&[option-name='ps_wirepayment'] {
order: 201;
}
&[option-name='caraty'] {
order: 101;
}
&[option-name='santandercredit'] {
order: 102;
}
&[option-name='ps_cashondelivery'] {
order: 202;
}
&[option-name='ps_checkpayment'] {
order: 203;
}
&[option-name='payment-option-4'] {
order: 103;
}
> .payment-option {
height: 100%;
margin: 0 !important;
> label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 10px;
padding: 10px 15px;
margin: 0;
height: 100%;
color: #462d26;
font-size: 14px;
font-family: $fInter;
font-weight: 500;
line-height: 1;
img {
order: 1;
}
span {
order: 2;
}
}
.custom-radio {
margin: 0 !important;
input {
position: absolute;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background: transparent;
&::before,
&::after {
display: none !important;
}
}
}
}
}
}
}

52
themes/classic/templates/checkout/_partials/steps/payment.tpl
View File

@@ -16,10 +16,39 @@
{if $is_free} {if $is_free}
<p>{l s='No payment needed for this order' d='Shop.Theme.Checkout'}</p> <p>{l s='No payment needed for this order' d='Shop.Theme.Checkout'}</p>
{/if} {/if}
<div class="payment-options {if $is_free}hidden-xs-up{/if}">
{* MARK: Własne ustawienia opcje płatności *}
{assign var='customPaymentOptions' value=[
'paynow' => [
'img' => '/modules/paynow/views/img/logo-paynow.png',
'label' => 'BLIK, karty, szybkie przelewy'
],
'ps_wirepayment' => [
'label' => 'Przelew bankowy'
],
'caraty' => [
'label' => 'Raty CA'
],
'santandercredit' => [
'label' => 'Raty Santander'
],
'payment-option-4' => [
'img' => '/modules/raty/alior.gif',
'label' => 'Raty Alior'
],
'ps_cashondelivery' => [
'label' => 'Płatność przy odbiorze'
]
]}
<div class="payment-options payment-options-custom {if $is_free}hidden-xs-up{/if}">
<p class="payment-option-title payment-option-title-1">Szybkie płatności</p>
<p class="payment-option-title payment-option-title-2">Metody finansowania</p>
<p class="payment-option-title payment-option-title-3">Płatność tradycyjna</p>
{foreach from=$payment_options item="module_options"} {foreach from=$payment_options item="module_options"}
{foreach from=$module_options item="option"} {foreach from=$module_options item="option"}
<div> <div class="payment-item" option-name="{if $option.module_name}{$option.module_name}{else}{$option.id}{/if}">
<div id="{$option.id}-container" class="payment-option clearfix"> <div id="{$option.id}-container" class="payment-option clearfix">
{* This is the way an option should be selected when Javascript is enabled *} {* This is the way an option should be selected when Javascript is enabled *}
<span class="custom-radio float-xs-left"> <span class="custom-radio float-xs-left">
@@ -45,12 +74,31 @@
{/if} {/if}
</form> </form>
{assign var='key' value=$option.module_name|default:$option.id}
{if isset($customPaymentOptions[$key])}
<label for="{$option.id}" class="custom-payment-label">
{if $customPaymentOptions[$key].img}
<img src="{$customPaymentOptions[$key].img}" alt="{$customPaymentOptions[$key].label}" class="custom-payment-icon">
{/if}
<span>{$customPaymentOptions[$key].label}</span>
</label>
{else}
<label for="{$option.id}"> <label for="{$option.id}">
<span>{$option.call_to_action_text}</span> <span>{$option.call_to_action_text}</span>
{if $option.logo} {if $option.logo}
<img src="{$option.logo}" loading="lazy"> <img src="{$option.logo}" loading="lazy">
{/if} {/if}
</label> </label>
{/if}
{* <label for="{$option.id}">
<span>{$option.call_to_action_text}</span>
{if $option.logo}
<img src="{$option.logo}" loading="lazy">
{/if}
</label> *}
</div> </div>
</div> </div>