feat: edit payment option to work with ps_checkout

PrestaShop · Jul 28, 2023 · bad22db · bad22db
1 parent 3fd702b
commit bad22db
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/src/scss/custom/modules/_checkout.scss b/src/scss/custom/modules/_checkout.scss
@@ -0,0 +1,10 @@
+.payment__option {
+  &.ps_checkout-payment-option{
+    label{
+      // Needed to override ps_checkout !important style
+      /* stylelint-disable-next-line declaration-no-important */
+      display: flex !important;
+      line-height: initial;
+    }
+  }
+}
diff --git a/src/scss/custom/modules/_index.scss b/src/scss/custom/modules/_index.scss
@@ -1,4 +1,5 @@
 @import "featuredproducts";
+@import "checkout";
 @import "contactform";
 @import "contactinfo";
 @import "emailsubscriptions";

diff --git a/templates/checkout/_partials/steps/payment.tpl b/templates/checkout/_partials/steps/payment.tpl
@@ -22,23 +22,22 @@
       {foreach from=$module_options item="option"}
         <div id="{$option.id}-container" class="payment__option">
           {* This is the way an option should be selected when Javascript is enabled *}
-          <label class="form-check-label mb-2">
+          <label class="form-check-label mb-3 d-flex align-items-center">
             <input
-              class="form-check-input ps-shown-by-js me-1{if $option.binary} binary{/if}"
+              class="form-check-input ps-shown-by-js flex-shrink-0 my-0 me-2{if $option.binary} binary{/if}"
               type="radio"
               name="payment-option"
               data-module-name="{$option.module_name}"
               id="{$option.id}"
               {if ($selected_payment_option == $option.id || $is_free) || ($payment_options|@count === 1 && $module_options|@count === 1)} checked {/if}
             />
-
-            <i class="form-check-round"></i>
-
-            {if $option.logo}
-              <img src="{$option.logo}" loading="lazy">
-            {/if}
-
-            {$option.call_to_action_text}
+
+            <span class="d-flex flex-wrap gap-1 align-items-center flex-grow-1">	
+							{$option.call_to_action_text}
+              {if $option.logo}
+                <img class="flex-shrink-0" src="{$option.logo}" loading="lazy">
+              {/if}
+						</span>
           </label>
 
           {* This is the way an option should be selected when Javascript is disabled *}