sayalip
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

wip: update checkout steps styles

staging
abhisheks 2023-12-01 19:35:23 +05:30
parent 6dbaef394c
commit 396fd2c141
3 changed files with 319 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/checkout/_partials/steps/addresses.tpl
View File

@ -25,6 +25,7 @@
{extends file='checkout/_partials/steps/checkout-step.tpl'} {extends file='checkout/_partials/steps/checkout-step.tpl'}
{block name='step_content'} {block name='step_content'}
{if !$step_is_complete}
<div class="js-address-form"> <div class="js-address-form">
<form <form
method="POST" method="POST"
@ -134,4 +135,5 @@
</form> </form>
</div> </div>
{/if}
{/block} {/block}

19
templates/checkout/_partials/steps/payment.tpl
View File

@ -1,6 +1,8 @@
{extends file='checkout/_partials/steps/checkout-step.tpl'} {extends file='checkout/_partials/steps/checkout-step.tpl'}
{block name='step_content'} {block name='step_content'}
{if !$step_is_complete}
<div class="w-full flex flex-col gap-4 p-4">
{hook h='displayPaymentTop'} {hook h='displayPaymentTop'}
@ -16,7 +18,7 @@
{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}"> <div class="payment-options flex flex-col gap-2 {if $is_free}hidden-xs-up{/if}">
{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>
@ -95,11 +97,10 @@
</p> </p>
<form id="conditions-to-approve" method="GET"> <form id="conditions-to-approve" method="GET">
<ul> <ul class="flex flex-col gap-2">
{foreach from=$conditions_to_approve item="condition" key="condition_name"} {foreach from=$conditions_to_approve item="condition" key="condition_name"}
<li> <li>
<div class="float-xs-left"> <div class="flex items-center gap-2 focus:border-0">
<span class="custom-checkbox">
<input id = "conditions_to_approve[{$condition_name}]" <input id = "conditions_to_approve[{$condition_name}]"
name = "conditions_to_approve[{$condition_name}]" name = "conditions_to_approve[{$condition_name}]"
required required
@ -107,14 +108,10 @@
value = "1" value = "1"
class = "ps-shown-by-js" class = "ps-shown-by-js"
> >
<span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
</span> </span>
</div>
<div class="condition-label">
<label class="js-terms" for="conditions_to_approve[{$condition_name}]"> <label class="js-terms" for="conditions_to_approve[{$condition_name}]">
{$condition nofilter} {$condition nofilter}
</label> </label>
</div>
</li> </li>
{/foreach} {/foreach}
</ul> </ul>
@ -127,7 +124,7 @@
<div id="payment-confirmation"> <div id="payment-confirmation">
<div class="ps-shown-by-js"> <div class="ps-shown-by-js">
<button type="submit" {if !$selected_payment_option} disabled {/if} class="btn btn-primary center-block"> <button type="submit" {if !$selected_payment_option} disabled {/if} class="uppercase font-medium py-2 text-center w-full bg-blue-950 text-gray-50 disabled:bg-gray-600">
{l s='Order with an obligation to pay' d='Shop.Theme.Checkout'} {l s='Order with an obligation to pay' d='Shop.Theme.Checkout'}
</button> </button>
{if $show_final_summary} {if $show_final_summary}
@ -154,7 +151,7 @@
{hook h='displayPaymentByBinaries'} {hook h='displayPaymentByBinaries'}
<div class="modal fade" id="modal"> <div class="modal fade hidden" id="modal">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}"> <button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}">
@ -164,4 +161,6 @@
</div> </div>
</div> </div>
</div> </div>
{/if}
</div>
{/block} {/block}

40
templates/checkout/_partials/steps/shipping.tpl
View File

@ -25,23 +25,24 @@
{extends file='checkout/_partials/steps/checkout-step.tpl'} {extends file='checkout/_partials/steps/checkout-step.tpl'}
{block name='step_content'} {block name='step_content'}
{if !$step_is_complete}
<div id="hook-display-before-carrier"> <div id="hook-display-before-carrier">
{$hookDisplayBeforeCarrier nofilter} {$hookDisplayBeforeCarrier nofilter}
</div> </div>
<div class="delivery-options-list"> <div class="flex w-full p-4">
{if $delivery_options|count} {if $delivery_options|count}
<form <form
class="clearfix" class="flex flex-col w-full gap-4"
id="js-delivery" id="js-delivery"
data-url-update="{url entity='order' params=['ajax' => 1, 'action' => 'selectDeliveryOption']}" data-url-update="{url entity='order' params=['ajax' => 1, 'action' => 'selectDeliveryOption']}"
method="post" method="post"
> >
<div class="form-fields"> <div class="form-fields">
{block name='delivery_options'} {block name='delivery_options'}
<div class="delivery-options"> <div class="delivery-options flex flex-col gap-2">
{foreach from=$delivery_options item=carrier key=carrier_id} {foreach from=$delivery_options item=carrier key=carrier_id}
<div class="row delivery-option"> <div class="flex items-center delivery-option">
<div class="col-sm-1"> <div class="col-sm-1">
<span class="custom-radio float-xs-left"> <span class="custom-radio float-xs-left">
<input type="radio" name="delivery_option[{$id_address}]" id="delivery_option_{$carrier.id}" value="{$carrier_id}"{if $delivery_option == $carrier_id} checked{/if}> <input type="radio" name="delivery_option[{$id_address}]" id="delivery_option_{$carrier.id}" value="{$carrier_id}"{if $delivery_option == $carrier_id} checked{/if}>
@ -49,24 +50,26 @@
</span> </span>
</div> </div>
<label for="delivery_option_{$carrier.id}" class="col-sm-11 delivery-option-2"> <label for="delivery_option_{$carrier.id}" class="col-sm-11 delivery-option-2">
<div class="row"> <div class="flex items-center gap-2">
<div class="col-sm-5 col-xs-12"> <div class="col-sm-5 col-xs-12">
<div class="row"> <div class=" flex items-center gap-2">
{if $carrier.logo} {if $carrier.logo}
<div class="col-xs-3"> <div>
<img src="{$carrier.logo}" alt="{$carrier.name}" /> <img src="{$carrier.logo}" alt="{$carrier.name}" />
</div> </div>
{/if} {/if}
<div class="{if $carrier.logo}col-xs-9{else}col-xs-12{/if}"> <div class="text-lg font-semibold">
<span class="h6 carrier-name">{$carrier.name}</span> <span class="h6 carrier-name">{$carrier.name}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-4 col-xs-12"> <div class="flex gap-2 flex-wrap">
<span class="carrier-delay">{$carrier.delay}</span> <div class="">
<span class="carrier-delay">( {$carrier.delay} )</span>
</div>
<div class="">
<span class="carrier-price">( {$carrier.price} )</span>
</div> </div>
<div class="col-sm-3 col-xs-12">
<span class="carrier-price">{$carrier.price}</span>
</div> </div>
</div> </div>
</label> </label>
@ -78,10 +81,10 @@
{/foreach} {/foreach}
</div> </div>
{/block} {/block}
<div class="order-options"> <div class="flex w-full">
<div id="delivery"> <div id="delivery" class="flex w-full flex-col gap-2">
<label for="delivery_message">{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> <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" cols="120" id="delivery_message" name="delivery_message">{$delivery_message}</textarea> <textarea rows="2" id="delivery_message" name="delivery_message">{$delivery_message}</textarea>
</div> </div>
{if $recyclablePackAllowed} {if $recyclablePackAllowed}
@ -107,12 +110,12 @@
</div> </div>
</div> </div>
<button type="submit" class="continue btn btn-primary float-xs-right" name="confirmDeliveryOption" value="1"> <button type="submit" class="uppercase font-medium py-2 text-center w-full bg-blue-950 text-gray-50" name="confirmDeliveryOption" value="1">
{l s='Continue' d='Shop.Theme.Actions'} {l s='Continue' d='Shop.Theme.Actions'}
</button> </button>
</form> </form>
{else} {else}
<p class="alert alert-danger">{l s='Unfortunately, there are no carriers available for your delivery address.' d='Shop.Theme.Checkout'}</p> <p class="font-semibold text-red-500">{l s='Unfortunately, there are no carriers available for your delivery address.' d='Shop.Theme.Checkout'}</p>
{/if} {/if}
</div> </div>
@ -121,4 +124,5 @@
</div> </div>
<div id="extra_carrier"></div> <div id="extra_carrier"></div>
{/if}
{/block} {/block}