forked from brooksbingham/theme-elegance
wip: update checkout steps styles
This commit is contained in:
parent
6dbaef394c
commit
396fd2c141
@ -25,6 +25,7 @@
|
||||
{extends file='checkout/_partials/steps/checkout-step.tpl'}
|
||||
|
||||
{block name='step_content'}
|
||||
{if !$step_is_complete}
|
||||
<div class="js-address-form">
|
||||
<form
|
||||
method="POST"
|
||||
@ -134,4 +135,5 @@
|
||||
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
{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'}
|
||||
|
||||
@ -16,7 +18,7 @@
|
||||
{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}">
|
||||
<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=$module_options item="option"}
|
||||
<div>
|
||||
@ -95,11 +97,10 @@
|
||||
</p>
|
||||
|
||||
<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"}
|
||||
<li>
|
||||
<div class="float-xs-left">
|
||||
<span class="custom-checkbox">
|
||||
<div class="flex items-center gap-2 focus:border-0">
|
||||
<input id = "conditions_to_approve[{$condition_name}]"
|
||||
name = "conditions_to_approve[{$condition_name}]"
|
||||
required
|
||||
@ -107,14 +108,10 @@
|
||||
value = "1"
|
||||
class = "ps-shown-by-js"
|
||||
>
|
||||
<span><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="condition-label">
|
||||
<label class="js-terms" for="conditions_to_approve[{$condition_name}]">
|
||||
{$condition nofilter}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
@ -127,7 +124,7 @@
|
||||
|
||||
<div id="payment-confirmation">
|
||||
<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'}
|
||||
</button>
|
||||
{if $show_final_summary}
|
||||
@ -154,7 +151,7 @@
|
||||
|
||||
{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-content">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}">
|
||||
@ -164,4 +161,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
@ -25,23 +25,24 @@
|
||||
{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>
|
||||
|
||||
<div class="delivery-options-list">
|
||||
<div class="flex w-full p-4">
|
||||
{if $delivery_options|count}
|
||||
<form
|
||||
class="clearfix"
|
||||
class="flex flex-col w-full gap-4"
|
||||
id="js-delivery"
|
||||
data-url-update="{url entity='order' params=['ajax' => 1, 'action' => 'selectDeliveryOption']}"
|
||||
method="post"
|
||||
>
|
||||
<div class="form-fields">
|
||||
{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}
|
||||
<div class="row delivery-option">
|
||||
<div class="flex items-center delivery-option">
|
||||
<div class="col-sm-1">
|
||||
<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}>
|
||||
@ -49,24 +50,26 @@
|
||||
</span>
|
||||
</div>
|
||||
<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="row">
|
||||
<div class=" flex items-center gap-2">
|
||||
{if $carrier.logo}
|
||||
<div class="col-xs-3">
|
||||
<div>
|
||||
<img src="{$carrier.logo}" alt="{$carrier.name}" />
|
||||
</div>
|
||||
{/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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-12">
|
||||
<span class="carrier-delay">{$carrier.delay}</span>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<div class="">
|
||||
<span class="carrier-delay">( {$carrier.delay} )</span>
|
||||
</div>
|
||||
<div class="">
|
||||
<span class="carrier-price">( {$carrier.price} )</span>
|
||||
</div>
|
||||
<div class="col-sm-3 col-xs-12">
|
||||
<span class="carrier-price">{$carrier.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
@ -78,10 +81,10 @@
|
||||
{/foreach}
|
||||
</div>
|
||||
{/block}
|
||||
<div class="order-options">
|
||||
<div id="delivery">
|
||||
<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>
|
||||
<textarea rows="2" cols="120" id="delivery_message" name="delivery_message">{$delivery_message}</textarea>
|
||||
<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}
|
||||
@ -107,12 +110,12 @@
|
||||
|
||||
</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'}
|
||||
</button>
|
||||
</form>
|
||||
{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}
|
||||
</div>
|
||||
|
||||
@ -121,4 +124,5 @@
|
||||
</div>
|
||||
|
||||
<div id="extra_carrier"></div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user