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

refactor: udpate Address checkout step styles

pagebuilder
abhisheks 2023-12-06 17:37:42 +05:30
parent 57225936e4
commit 062e5a46d3
4 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
templates/checkout/_partials/address-form.tpl
View File

@ -14,16 +14,17 @@
action="{url entity='order' params=['id_address' => $id_address]}"
data-id-address="{$id_address}"
data-refresh-url="{url entity='order' params=['ajax' => 1, 'action' => 'addressForm']}"
class="w-full flex"
>
{/block}
{block name='form_fields' append}
<input type="hidden" name="saveAddress" value="{$type}">
{if $type === "delivery"}
<div class="form-group row">
<div class="col-md-9 col-md-offset-3">
<div class="form-group w-full">
<div class="col-md-9 col-md-offset-3 flex items-center gap-2 py-2">
<input name = "use_same_address" id="use_same_address" type = "checkbox" value = "1" {if $use_same_address} checked {/if}>
<label for="use_same_address">{l s='Use this address for invoice too' d='Shop.Theme.Checkout'}</label>
<label for="use_same_address" class="font-semibold">{l s='Use this address for invoice too' d='Shop.Theme.Checkout'}</label>
</div>
</div>
{/if}
@ -31,15 +32,15 @@
{block name='form_buttons'}
{if !$form_has_continue_button}
<button type="submit" class="btn btn-primary float-xs-right">{l s='Save' d='Shop.Theme.Actions'}</button>
<a class="js-cancel-address cancel-address float-xs-right" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
<button type="submit" class="btn btn-primary float-xs-right flex-1 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900">{l s='Save' d='Shop.Theme.Actions'}</button>
<a class="js-cancel-address cancel-address float-xs-right flex-1 uppercase py-2 font-medium text-center border border-blue-950 text-blue-950 hover:text-blue-900 hover:border-blue-900" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
{else}
<form>
<button type="submit" class="continue btn btn-primary float-xs-right" name="confirm-addresses" value="1">
<form class="w-full flex">
<button type="submit" class="continue btn btn-primary float-xs-right flex-1 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900" name="confirm-addresses" value="1">
{l s='Continue' d='Shop.Theme.Actions'}
</button>
{if $customer.addresses|count > 0}
<a class="js-cancel-address cancel-address float-xs-right" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
<a class="js-cancel-address cancel-address float-xs-right flex-1 uppercase py-2 font-medium text-center border border-blue-950 text-blue-950 hover:text-blue-900 hover:border-blue-900" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
{/if}
</form>
{/if}

51
templates/checkout/_partials/address-selector-block.tpl
View File

@ -24,11 +24,11 @@
*}
{block name='address_selector_blocks'}
{foreach $addresses as $address}
<article
class="address-item{if $address.id == $selected} selected{/if}"
<div
class="address-item{if $address.id == $selected} selected{/if} w-full md:w-1/2 flex justify-between pr-4 md:pr-12 mb-2"
id="{$name|classname}-address-{$address.id}"
>
<header class="h4">
<div class="flex gap-2">
<label class="radio-block">
<span class="custom-radio">
<input
@ -39,34 +39,35 @@
>
<span></span>
</span>
<span class="address-alias h4">{$address.alias}</span>
<div class="address">{$address.formatted nofilter}</div>
</label>
</header>
<hr>
<footer class="address-footer">
<div class="flex flex-col gap-1">
<span class="address-alias font-semibold">{$address.alias}</span>
<div class="address">{$address.formatted nofilter}</div>
</div>
</div>
{if $interactive}
<a
class="edit-address text-muted"
data-link-action="edit-address"
href="{url entity='order' params=['id_address' => $address.id, 'editAddress' => $type, 'token' => $token]}"
>
<i class="material-icons edit">&#xE254;</i>{l s='Edit' d='Shop.Theme.Actions'}
</a>
<a
class="delete-address text-muted"
data-link-action="delete-address"
href="{url entity='order' params=['id_address' => $address.id, 'deleteAddress' => true, 'token' => $token]}"
>
<i class="material-icons delete">&#xE872;</i>{l s='Delete' d='Shop.Theme.Actions'}
</a>
<div class="flex flex-col justify-center gap-4">
<a
class="edit-address text-muted"
data-link-action="edit-address"
href="{url entity='order' params=['id_address' => $address.id, 'editAddress' => $type, 'token' => $token]}"
>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" 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>
</a>
<a
class="delete-address text-muted"
data-link-action="delete-address"
href="{url entity='order' params=['id_address' => $address.id, 'deleteAddress' => true, 'token' => $token]}"
>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="24" height="24" 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="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
</a>
</div>
{/if}
</footer>
</article>
</div>
{/foreach}
{if $interactive}
<p>
<button class="ps-hidden-by-js form-control-submit center-block" type="submit">{l s='Save' d='Shop.Theme.Actions'}</button>
<button class="ps-hidden-by-js form-control-submit center-block flex-1 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900" type="submit">{l s='Save' d='Shop.Theme.Actions'}</button>
</p>
{/if}
{/block}

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

@ -26,25 +26,27 @@
{block name='step_content'}
{if !$step_is_complete}
<div class="js-address-form">
<div class="js-address-form p-4 flex flex-col gap-4">
<form
method="POST"
action="{url entity='order' params=['id_address' => $id_address]}"
data-refresh-url="{url entity='order' params=['ajax' => 1, 'action' => 'addressForm']}"
class="w-full flex flex-col gap-8"
>
<div class="w-full flex flex-col gap-4">
{if !$use_same_address}
<h2 class="h4">{l s='Shipping Address' d='Shop.Theme.Checkout'}</h2>
<h2 class="text-lg">{l s='Shipping Address' d='Shop.Theme.Checkout'}</h2>
{/if}
{if $use_same_address && !$cart.is_virtual}
<p>
<span class="font-semibold mb-2">
{l s='The selected address will be used both as your personal address (for invoice) and as your delivery address.' d='Shop.Theme.Checkout'}
</p>
</span>
{elseif $use_same_address && $cart.is_virtual}
<p>
<span class="font-semibold mb-2">
{l s='The selected address will be used as your personal address (for invoice).' d='Shop.Theme.Checkout'}
</p>
</span>
{/if}
{if $show_delivery_address_form}
@ -57,7 +59,7 @@
}
</div>
{elseif $customer.addresses|count > 0}
<div id="delivery-addresses" class="address-selector js-address-selector">
<div id="delivery-addresses" class="address-selector js-address-selector w-full flex max-md:flex-col gap-4 flex-wrap md:gap-0">
{include file = 'checkout/_partials/address-selector-block.tpl'
addresses = $customer.addresses
name = "id_address_delivery"
@ -73,24 +75,24 @@
<p class="alert alert-danger js-address-error" name="alert-delivery" style="display: none">{l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>
{/if}
<p class="add-address">
<a href="{$new_address_delivery_url}"><i class="material-icons">&#xE145;</i>{l s='add new address' d='Shop.Theme.Actions'}</a>
</p>
{if $use_same_address && !$cart.is_virtual}
<p>
<a data-link-action="different-invoice-address" href="{$use_different_address_url}">
<div class="add-address w-full flex flex-col gap-2">
<a href="{$new_address_delivery_url}" class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home-plus" width="24" height="24" 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="M19 12h2l-9 -9l-9 9h2v7a2 2 0 0 0 2 2h5.5" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
{l s='add new address' d='Shop.Theme.Actions'}
</a>
{if $use_same_address && !$cart.is_virtual}
<a data-link-action="different-invoice-address" class="flex items-center gap-2" href="{$use_different_address_url}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layers-difference" width="24" height="24" 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="M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2v-2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2" /><path d="M10 8l-2 0l0 2" /><path d="M8 14l0 2l2 0" /><path d="M14 8l2 0l0 2" /><path d="M16 14l0 2l-2 0" /></svg>
{l s='Billing address differs from shipping address' d='Shop.Theme.Checkout'}
</a>
</p>
{/if}
{/if}
</div>
{/if}
</div>
{if !$use_same_address}
<h2 class="h4">{l s='Your Invoice Address' d='Shop.Theme.Checkout'}</h2>
<hr>
<div class="w-full flex flex-col gap-4">
<h2 class="text-lg">{l s='Your Invoice Address' d='Shop.Theme.Checkout'}</h2>
{if $show_invoice_address_form}
<div id="invoice-address">
{render file = 'checkout/_partials/address-form.tpl'
@ -101,7 +103,7 @@
}
</div>
{else}
<div id="invoice-addresses" class="address-selector js-address-selector">
<div id="invoice-addresses" class="address-selector js-address-selector w-full flex max-md:flex-col gap-4 flex-wrap md:gap-0">
{include file = 'checkout/_partials/address-selector-block.tpl'
addresses = $customer.addresses
name = "id_address_invoice"
@ -117,16 +119,20 @@
<p class="alert alert-danger js-address-error" name="alert-invoice" style="display: none">{l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>
{/if}
<p class="add-address">
<a href="{$new_address_invoice_url}"><i class="material-icons">&#xE145;</i>{l s='add new address' d='Shop.Theme.Actions'}</a>
</p>
<div class="add-address w-full">
<a href="{$new_address_invoice_url}" class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home-plus" width="24" height="24" 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="M19 12h2l-9 -9l-9 9h2v7a2 2 0 0 0 2 2h5.5" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
{l s='add new address' d='Shop.Theme.Actions'}
</a>
</div>
</div>
{/if}
{/if}
{if !$form_has_continue_button}
<div class="clearfix">
<button type="submit" class="btn btn-primary continue float-xs-right" name="confirm-addresses" value="1">
<div class="clearfix w-full flex">
<button type="submit" class="flex-1 uppercase py-2 font-medium text-center bg-blue-950 text-gray-50 hover:text-gray-50 hover:bg-blue-900" name="confirm-addresses" value="1">
{l s='Continue' d='Shop.Theme.Actions'}
</button>
<input type="hidden" id="not-valid-addresses" value="{$not_valid_addresses}">

2
templates/customer/_partials/address-form.tpl
View File

@ -48,7 +48,7 @@
{/block}
{block name="address_form_footer"}
<footer class="form-footer clearfix">
<footer class="form-footer w-full flex max-md:flex-col gap-2">
<input type="hidden" name="submitAddress" value="1">
{block name='form_buttons'}
<button class="btn btn-primary float-xs-right" type="submit" class="form-control-submit">