Custom checkboxes

Oksydan · Oct 8, 2023 · 236cb84 · 236cb84
1 parent d324c32
commit 236cb84
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 20 deletions.
diff --git a/modules/psgdpr/views/templates/hook/displayGDPRConsent.tpl b/modules/psgdpr/views/templates/hook/displayGDPRConsent.tpl
@@ -18,12 +18,19 @@
  *}
 
 <div id="gdpr_consent" class="gdpr_module_{$psgdpr_id_module|escape:'htmlall':'UTF-8'} mb-3">
-    <span class="custom-control custom-checkbox">
-        <input id="psgdpr_consent_checkbox_{$psgdpr_id_module|escape:'htmlall':'UTF-8'}" name="psgdpr_consent_checkbox" type="checkbox" value="1" class="custom-control-input psgdpr_consent_checkboxes_{$psgdpr_id_module|escape:'htmlall':'UTF-8'}">
-        <label class="custom-control-label" for="psgdpr_consent_checkbox_{$psgdpr_id_module|escape:'htmlall':'UTF-8'}">
-            {$psgdpr_consent_message nofilter}{* html data *}
-        </label>
-    </span>
+  <div class="form-check">
+    <input
+      id="psgdpr_consent_checkbox_{$psgdpr_id_module|escape:'htmlall':'UTF-8'}"
+      name="psgdpr_consent_checkbox"
+      type="checkbox"
+      value="1"
+      class="form-check-input psgdpr_consent_checkboxes_{$psgdpr_id_module|escape:'htmlall':'UTF-8'}"
+    >
+    <label class="form-check-label"
+           for="psgdpr_consent_checkbox_{$psgdpr_id_module|escape:'htmlall':'UTF-8'}">
+        {$psgdpr_consent_message nofilter}{* html data *}
+    </label>
+  </div>
 </div>
 {literal}
 <script type="text/javascript">

diff --git a/templates/checkout/_partials/address-form.tpl b/templates/checkout/_partials/address-form.tpl
@@ -19,11 +19,21 @@
 
 {block name='form_fields' append}
   <input type="hidden" name="saveAddress" value="{$type}">
+
   {if $type === "delivery"}
-    <div class="custom-control custom-checkbox">
-      <input name="use_same_address" type="checkbox" value="1" id="use_same_address"
-        class="custom-control-input" value="1" {if $use_same_address} checked {/if}>
-      <label class="custom-control-label" for="use_same_address">{l s='Use this address for invoice too' d='Shop.Theme.Checkout'}</label>
+    <div class="form-check">
+      <input
+        name="use_same_address"
+        type="checkbox"
+        value="1"
+        id="use_same_address"
+        class="form-check-input"
+              {if $use_same_address} checked {/if}
+      >
+      <label class="form-check-label"
+             for="use_same_address">
+          {l s='Use this address for invoice too' d='Shop.Theme.Checkout'}
+      </label>
     </div>
   {/if}
 {/block}

diff --git a/templates/checkout/_partials/steps/payment.tpl b/templates/checkout/_partials/steps/payment.tpl
@@ -87,14 +87,17 @@
     </p>
     <form id="conditions-to-approve" method="GET" class="mt-3 js-conditions-to-approve">
       {foreach from=$conditions_to_approve item="condition" key="condition_name"}
-        <div class="custom-control custom-checkbox">
+        <div class="form-check mb-23">
           <input
             id="conditions_to_approve[{$condition_name}]"
             name="conditions_to_approve[{$condition_name}]"
             required
-            type="checkbox" value="1" class="ps-shown-by-js custom-control-input">
-          <label class="custom-control-label js-terms"
-            for="conditions_to_approve[{$condition_name}]">{$condition nofilter}</label>
+            type="checkbox"
+            value="1"
+            class="form-check-input"
+          >
+          <label class="form-check-label js-terms"
+                 for="conditions_to_approve[{$condition_name}]">{$condition nofilter}</label>
         </div>
       {/foreach}
     </form>

diff --git a/templates/checkout/_partials/steps/shipping.tpl b/templates/checkout/_partials/steps/shipping.tpl
@@ -89,18 +89,42 @@
 
             {if $recyclablePackAllowed}
               <div class="mb-3 my-3">
-                <div class="custom-control custom-checkbox">
-                  <input class="custom-control-input" type="checkbox" id="input_recyclable" name="recyclable" value="1" {if $recyclable} checked {/if}>
-                  <label class="custom-control-label" for="input_recyclable">{l s='I would like to receive my order in recycled packaging.' d='Shop.Theme.Checkout'}</label>
+                <div class="form-check">
+                  <input
+                    class="form-check-input"
+                    id="input_recyclable"
+                    name="recyclable"
+                    type="checkbox"
+                    value="1"
+                    {if $recyclable}
+                      checked
+                    {/if}
+                  >
+                  <label class="form-check-label"
+                         for="input_recyclable">
+                      {l s='I would like to receive my order in recycled packaging.' d='Shop.Theme.Checkout'}
+                  </label>
                 </div>
               </div>
             {/if}
 
             {if $gift.allowed}
               <div class="mb-3 my-3">
-                <div class="custom-control custom-checkbox">
-                  <input class="custom-control-input js-gift-checkbox" type="checkbox" id="input_gift" name="gift" value="1" {if $gift.isGift} checked {/if}>
-                  <label class="custom-control-label" for="input_gift">{$gift.label}</label>
+                <div class="form-check">
+                  <input
+                    class="form-check-input js-gift-checkbox"
+                    id="input_gift"
+                    name="gift"
+                    type="checkbox"
+                    value="1"
+                    {if $gift.isGift}
+                      checked
+                    {/if}
+                  >
+                  <label class="form-check-label"
+                         for="input_gift">
+                      {$gift.label}
+                  </label>
                 </div>
               </div>