Change payment UI/UX

themes/classic/templates/checkout/_partials/steps/payment.tpl

@@ -16,10 +16,39 @@
   {if $is_free}
     <p>{l s='No payment needed for this order' d='Shop.Theme.Checkout'}</p>
   {/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=$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">
             {* This is the way an option should be selected when Javascript is enabled *}
             <span class="custom-radio float-xs-left">
@@ -44,13 +73,32 @@
                 </button>
               {/if}
             </form>
+            
+            {assign var='key' value=$option.module_name|default:$option.id}
 
-            <label for="{$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}">
+                <span>{$option.call_to_action_text}</span>
+                {if $option.logo}
+                  <img src="{$option.logo}" loading="lazy">
+                {/if}
+              </label>
+            {/if}
+
+
+            {* <label for="{$option.id}">
               <span>{$option.call_to_action_text}</span>
               {if $option.logo}
                 <img src="{$option.logo}" loading="lazy">
               {/if}
-            </label>
+            </label> *}
 
           </div>
         </div>
@@ -67,7 +115,7 @@
         <div
           id="pay-with-{$option.id}-form"
           class="js-payment-option-form {if $option.id != $selected_payment_option} ps-hidden {/if}"
-        >
+          >
           {if $option.form}
             {$option.form nofilter}
           {else}