From bdba795292952f1d072101a9837997db44395ba9 Mon Sep 17 00:00:00 2001 From: abhisheks <abhisheks@consultbop.com> Date: Thu, 14 Dec 2023 12:45:04 +0530 Subject: [PATCH] refactor: make checkout steps editable --- assets/css/theme.css | 93 +++++++++++++++++-- .../checkout/_partials/steps/addresses.tpl | 2 - .../_partials/steps/checkout-step.tpl | 12 ++- .../checkout/_partials/steps/payment.tpl | 2 - .../_partials/steps/personal-information.tpl | 6 +- .../checkout/_partials/steps/shipping.tpl | 11 --- .../checkout/_partials/steps/unreachable.tpl | 2 +- 7 files changed, 94 insertions(+), 34 deletions(-) diff --git a/assets/css/theme.css b/assets/css/theme.css index c2abd4f..9b0f967 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -949,6 +949,10 @@ select { margin-top: 2rem; } +.ml-auto { + margin-left: auto; +} + .block { display: block; } @@ -1223,6 +1227,10 @@ select { margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } +.justify-self-end { + justify-self: end; +} + .overflow-y-auto { overflow-y: auto; } @@ -1348,6 +1356,11 @@ select { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-red-200 { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); +} + .stroke-gray-500 { stroke: #6b7280; } @@ -1360,6 +1373,18 @@ select { stroke: inherit; } +.stroke-gray-700 { + stroke: #374151; +} + +.stroke-gray-400 { + stroke: #9ca3af; +} + +.stroke-black { + stroke: #000; +} + .stroke-\[3px\] { stroke-width: 3px; } @@ -1390,6 +1415,14 @@ select { padding: 2rem; } +.p-3 { + padding: 0.75rem; +} + +.p-2\.5 { + padding: 0.625rem; +} + .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; @@ -1607,6 +1640,16 @@ select { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + .line-through { text-decoration-line: line-through; } @@ -1762,16 +1805,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { color: rgb(209 213 219 / var(--tw-text-opacity)); } -.disabled\:text-gray-500:disabled { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.disabled\:text-gray-400:disabled { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - .group:hover .group-hover\:flex { display: flex; } @@ -1781,6 +1814,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { color: rgb(30 58 138 / var(--tw-text-opacity)); } +.group.-current .group-\[\.-current\]\:block { + display: block; +} + +.group.-complete .group-\[\.-complete\]\:block { + display: block; +} + +.group.-complete .group-\[\.-complete\]\:hidden { + display: none; +} + +.group.-current .group-\[\.-current\]\:hidden { + display: none; +} + @media not all and (min-width: 1024px) { .max-lg\:flex-col { flex-direction: column; @@ -2057,3 +2106,27 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { line-height: 1; } } + +.\[\&\>\.content\\\]\:block>.content\undefined { + display: block; +} + +.\[\&\>\.content\\\]\:hidden>.content\undefined { + display: none; +} + +.\[\&\>\.content\]\:block>.content { + display: block; +} + +.\[\&\>\.content\]\:hidden>.content { + display: none; +} + +.\[\&\>div\\\]\:block>div\undefined { + display: block; +} + +.\[\&\>p\\\]\:block>p\undefined { + display: block; +} diff --git a/templates/checkout/_partials/steps/addresses.tpl b/templates/checkout/_partials/steps/addresses.tpl index 5699d15..36a8bee 100644 --- a/templates/checkout/_partials/steps/addresses.tpl +++ b/templates/checkout/_partials/steps/addresses.tpl @@ -25,7 +25,6 @@ {extends file='checkout/_partials/steps/checkout-step.tpl'} {block name='step_content'} - {if !$step_is_complete} <div class="js-address-form p-4 flex flex-col gap-4"> <form method="POST" @@ -141,5 +140,4 @@ </form> </div> - {/if} {/block} diff --git a/templates/checkout/_partials/steps/checkout-step.tpl b/templates/checkout/_partials/steps/checkout-step.tpl index b02f911..80763dd 100644 --- a/templates/checkout/_partials/steps/checkout-step.tpl +++ b/templates/checkout/_partials/steps/checkout-step.tpl @@ -30,15 +30,19 @@ '-reachable' => $step_is_reachable, '-complete' => $step_is_complete, 'js-current-step' => $step_is_current - ]|classnames}" + ]|classnames} group" > - <div class="step-title font-semibold p-2 border border-gray-800 flex gap-2 items-center "> - <i class="ti ti-square"></i> + <div class="step-title font-semibold p-2.5 border border-gray-800 w-full flex gap-2 items-center"> + <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler stroke-black hidden group-[.-complete]:block icon-tabler-square-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M9 12l2 2l4 -4" /></svg> + <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler stroke-black group-[.-complete]:hidden icon-tabler-square" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /></svg> <span class="step-number">{$position}</span> {$title} + <span class=" ml-auto text-sm text-gray-400 cursor-pointer group-[.-current]:hidden"> + <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="18" height="18" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg> + </span> </div> - <div class="content"> + <div class="content hidden group-[.-current]:block"> {block name='step_content'}DUMMY STEP CONTENT{/block} </div> </section> diff --git a/templates/checkout/_partials/steps/payment.tpl b/templates/checkout/_partials/steps/payment.tpl index 81c9cde..2b2fca7 100644 --- a/templates/checkout/_partials/steps/payment.tpl +++ b/templates/checkout/_partials/steps/payment.tpl @@ -1,7 +1,6 @@ {extends file='checkout/_partials/steps/checkout-step.tpl'} {block name='step_content'} - {if !$step_is_complete} <div class="w-full flex flex-col gap-4 p-4"> {hook h='displayPaymentTop'} @@ -161,6 +160,5 @@ </div> </div> </div> - {/if} </div> {/block} diff --git a/templates/checkout/_partials/steps/personal-information.tpl b/templates/checkout/_partials/steps/personal-information.tpl index c1656e9..ceabc87 100644 --- a/templates/checkout/_partials/steps/personal-information.tpl +++ b/templates/checkout/_partials/steps/personal-information.tpl @@ -1,9 +1,8 @@ {extends file='checkout/_partials/steps/checkout-step.tpl'} {block name='step_content'} - {if !$step_is_complete} {if $customer.is_logged && !$customer.is_guest} - <div class="flex flex-col"> + <div class="flex flex-col p-4"> <span class="identity"> {l s='Connected as [1]%firstname% %lastname%[/1].' d='Shop.Theme.Customeraccount' @@ -27,7 +26,7 @@ </span> </div> {else} - <div class="flex w-full flex-col tabs"> + <div class="flex w-full flex-col tabs p-4"> <ul class="tabs-list flex w-full"> <li class="flex flex-1 p-4 items-center justify-center"> <a @@ -67,7 +66,6 @@ </div> </div> {/if} - {/if} {/block} {** diff --git a/templates/checkout/_partials/steps/shipping.tpl b/templates/checkout/_partials/steps/shipping.tpl index 635476b..bbd8d3c 100644 --- a/templates/checkout/_partials/steps/shipping.tpl +++ b/templates/checkout/_partials/steps/shipping.tpl @@ -25,7 +25,6 @@ {extends file='checkout/_partials/steps/checkout-step.tpl'} {block name='step_content'} - {if !$step_is_complete} <div id="hook-display-before-carrier"> {$hookDisplayBeforeCarrier nofilter} </div> @@ -74,19 +73,10 @@ </div> </label> </div> - <div class="row carrier-extra-content"{if $delivery_option != $carrier_id} style="display:none;"{/if}> - {$carrier.extraContent nofilter} - </div> - <div class="clearfix"></div> {/foreach} </div> {/block} <div class="flex w-full"> - <div id="delivery" class="flex w-full flex-col gap-2"> - <label for="delivery_message" class="text-sm">{l s='If you would like to add a comment about your order, please write it in the field below.' d='Shop.Theme.Checkout'}</label> - <textarea rows="2" id="delivery_message" name="delivery_message">{$delivery_message}</textarea> - </div> - {if $recyclablePackAllowed} <span class="custom-checkbox"> <input type="checkbox" id="input_recyclable" name="recyclable" value="1" {if $recyclable} checked {/if}> @@ -124,5 +114,4 @@ </div> <div id="extra_carrier"></div> - {/if} {/block} diff --git a/templates/checkout/_partials/steps/unreachable.tpl b/templates/checkout/_partials/steps/unreachable.tpl index 6ecefb8..3dc982a 100644 --- a/templates/checkout/_partials/steps/unreachable.tpl +++ b/templates/checkout/_partials/steps/unreachable.tpl @@ -25,7 +25,7 @@ {block name='step'} <section class="checkout-step -unreachable" id="{$identifier}"> <div class="step-title font-semibold p-2 border border-gray-800 flex gap-2 items-center "> - <i class="ti ti-lock-square"></i> + <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler stroke-black icon-tabler-lock-square" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 11m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" /><path d="M10 11v-2a2 2 0 1 1 4 0v2" /><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" /></svg> <span class="step-number">{$position}</span> {$title} </div>