chore: work on the guest tracking page ui

feat/promo-code-loader
jatiny 2024-11-20 06:36:08 +00:00
parent f44928a2a9
commit d5606b7734
4 changed files with 32 additions and 33 deletions

View File

@ -146,7 +146,7 @@
{$product.quantity} {$product.quantity}
{/if} {/if}
</div> </div>
<div class="text-sm">{'$'|cat:$product.total}</div> <div class="text-sm">{$|cat:$product.total}</div>
</div> </div>
</div> </div>
</div> </div>
@ -158,14 +158,14 @@
{foreach $order.subtotals as $line} {foreach $order.subtotals as $line}
{if $line.value} {if $line.value}
<div class="order-total flex justify-between py-2"> <div class="order-total flex justify-between py-2">
<div class="text-sm font-semibold">{'$line.label'}</div> <div class="text-sm font-semibold">{$line.label}</div>
<div class="text-sm">{'$line.value'}</div> <div class="text-sm">{$line.value}</div>
</div> </div>
{/if} {/if}
{/foreach} {/foreach}
<div class="order-total flex justify-between py-2"> <div class="order-total flex justify-between py-2">
<div class="text-sm font-semibold">{'$order.totals.total.label'}</div> <div class="text-sm font-semibold">{$order.totals.total.label}</div>
<div class="text-sm">{'$order.totals.total.value'}</div> <div class="text-sm">{$order.totals.total.value}</div>
</div> </div>
</div> </div>
{/block} {/block}

View File

@ -141,14 +141,14 @@
{foreach $order.subtotals as $line} {foreach $order.subtotals as $line}
{if $line.value} {if $line.value}
<tr class="text-right border-t border-gray-200"> <tr class="text-right border-t border-gray-200">
<td colspan="5" class="px-4 py-2">{'$line.label'}</td> <td colspan="5" class="px-4 py-2">{$line.label}</td>
<td colspan="2" class="px-4 py-2">{'$line.value'}</td> <td colspan="2" class="px-4 py-2">{$line.value}</td>
</tr> </tr>
{/if} {/if}
{/foreach} {/foreach}
<tr class="text-right border-t border-gray-200"> <tr class="text-right border-t border-gray-200">
<td colspan="5" class="px-4 py-2">{'$order.totals.total.label'}</td> <td colspan="5" class="px-4 py-2">{$order.totals.total.label}</td>
<td colspan="2" class="px-4 py-2">{'$order.totals.total.value'}</td> <td colspan="2" class="px-4 py-2">{$order.totals.total.value}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
@ -216,13 +216,12 @@
{if $line.value} {if $line.value}
<div class="order-total flex justify-between py-2 px-4 border-b border-gray-200"> <div class="order-total flex justify-between py-2 px-4 border-b border-gray-200">
<div class="text-sm font-semibold">{$line.label}</div> <div class="text-sm font-semibold">{$line.label}</div>
<div class="text-sm">{'$line.value'}</div> <div class="text-sm">{$line.value}</div>
</div> </div>
{/if} {/if}
{/foreach} {/foreach} <div class="order-total flex justify-between py-2 px-4 border-t border-gray-200">
<div class="order-total flex justify-between py-2 px-4 border-t border-gray-200">
<div class="text-sm font-semibold">{$order.totals.total.label}</div> <div class="text-sm font-semibold">{$order.totals.total.label}</div>
<div class="text-sm">{'$order.totals.total.value'}</div> <div class="text-sm">{$order.totals.total.value}</div>
</div> </div>
</div> </div>

View File

@ -37,10 +37,10 @@
{block name='page_content' append} {block name='page_content' append}
{block name='guest_to_customer'} {block name='guest_to_customer'}
<form action="{$urls.pages.guest_tracking}" method="post"> <form action="{$urls.pages.guest_tracking}" method="post" class="table-auto p-4 mt-6 border-separate border border-gray-200 w-full" >
<header> <header>
<h1 class="h3">{l s='Transform your guest account into a customer account and enjoy:' d='Shop.Theme.Customeraccount'}</h1> <h1 class="h3 font-semibold ">{l s='Transform your guest account into a customer account and enjoy:' d='Shop.Theme.Customeraccount'}</h1>
<ul> <ul class="text-base leading-8" >
<li> -{l s='Personalized and secure access' d='Shop.Theme.Customeraccount'}</li> <li> -{l s='Personalized and secure access' d='Shop.Theme.Customeraccount'}</li>
<li> -{l s='Fast and easy checkout' d='Shop.Theme.Customeraccount'}</li> <li> -{l s='Fast and easy checkout' d='Shop.Theme.Customeraccount'}</li>
<li> -{l s='Easier merchandise return' d='Shop.Theme.Customeraccount'}</li> <li> -{l s='Easier merchandise return' d='Shop.Theme.Customeraccount'}</li>
@ -49,9 +49,9 @@
<section class="form-fields"> <section class="form-fields">
<label> <label class="flex flex-col sm:flex-row sm:gap-2">
<span>{l s='Set your password:' d='Shop.Forms.Labels'}</span> <span class="font-semibold my-auto" >{l s='Set your password:' d='Shop.Forms.Labels'}</span>
<input type="password" data-validate="isPasswd" name="password" value=""> <input type="password" data-validate="isPasswd" name="password" class="md:ml-5 mb-2 " value="">
</label> </label>
</section> </section>
@ -62,7 +62,7 @@
<input type="hidden" name="order_reference" value="{$order.details.reference}"> <input type="hidden" name="order_reference" value="{$order.details.reference}">
<input type="hidden" name="email" value="{$guest_email}"> <input type="hidden" name="email" value="{$guest_email}">
<button class="btn btn-primary" type="submit">{l s='Send' d='Shop.Theme.Actions'}</button> <button class="px-6 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='Send' d='Shop.Theme.Actions'}</button>
</footer> </footer>
</form> </form>

View File

@ -30,7 +30,7 @@
{block name='page_content'} {block name='page_content'}
{block name='order_infos'} {block name='order_infos'}
<div id="order-infos" class="space-y-6"> <div id="order-infos" class="space-y-6">
<div class="bg-white shadow rounded-lg p-6"> <div class="border rounded p-6">
<div class="flex flex-wrap items-center"> <div class="flex flex-wrap items-center">
<div class="w-full {if $order.details.reorder_url}lg:w-9/12{else}lg:w-full{/if}"> <div class="w-full {if $order.details.reorder_url}lg:w-9/12{else}lg:w-full{/if}">
<strong> <strong>
@ -43,7 +43,7 @@
</div> </div>
{/if} {/if}
</div> </div>
</div><div class="bg-white shadow rounded-lg p-6"> </div><div class="border rounded p-6">
<div class="flex flex-wrap items-center"> <div class="flex flex-wrap items-center">
<div class="w-full {if $order.details.reorder_url}lg:w-9/12{else}lg:w-full{/if}"> <div class="w-full {if $order.details.reorder_url}lg:w-9/12{else}lg:w-full{/if}">
<strong> <strong>
@ -57,7 +57,7 @@
{/if} {/if}
</div> </div>
</div> </div>
<div class="bg-white shadow rounded-lg p-6"> <div class="border rounded mt-6 mb-4 p-6">
<ul class="space-y-4"> <ul class="space-y-4">
<li><strong>{l s='Carrier' d='Shop.Theme.Checkout'}</strong> {$order.carrier.name}</li> <li><strong>{l s='Carrier' d='Shop.Theme.Checkout'}</strong> {$order.carrier.name}</li>
<li><strong>{l s='Payment method' d='Shop.Theme.Checkout'}</strong> {$order.details.payment}</li> <li><strong>{l s='Payment method' d='Shop.Theme.Checkout'}</strong> {$order.details.payment}</li>
@ -86,7 +86,7 @@
{/block} {/block}
{block name='order_history'} {block name='order_history'}
<section id="order-history" class="bg-white shadow rounded-lg p-6"> <section id="order-history" class="border mt-6 rounded p-6">
<h3 class="text-xl font-semibold">{l s='Follow your order\'s status step-by-step' d='Shop.Theme.Customeraccount'}</h3> <h3 class="text-xl font-semibold">{l s='Follow your order\'s status step-by-step' d='Shop.Theme.Customeraccount'}</h3>
<table class="table-auto w-full hidden md:table"> <table class="table-auto w-full hidden md:table">
<thead class="text-gray-700"> <thead class="text-gray-700">
@ -98,8 +98,8 @@
<tbody> <tbody>
{foreach from=$order.history item=state} {foreach from=$order.history item=state}
<tr> <tr>
<td class="px-4 py-2">{($state.history_date)}</td> <td class="text-center">{($state.history_date)}</td>
<td class="px-4 py-2"> <td class="text-center">
<span class="inline-block px-4 py-1 rounded-full text-white" style="background-color:{$state.color}"> <span class="inline-block px-4 py-1 rounded-full text-white" style="background-color:{$state.color}">
{$state.ostate_name} {$state.ostate_name}
</span> </span>
@ -131,18 +131,18 @@
{/if} {/if}
{block name='addresses'} {block name='addresses'}
<div class="flex flex-wrap"> <div class="flex flex-wrap justify-between mt-6 mb-6">
{if $order.addresses.delivery} {if $order.addresses.delivery}
<div class="w-full lg:w-6/12 p-4"> <div class="w-full lg:w-[49%] mb-6 ">
<article id="delivery-address" class="bg-white shadow rounded-lg p-6"> <article id="delivery-address" class="border rounded p-6">
<h4 class="text-lg font-semibold">{l s='Delivery address %alias%' d='Shop.Theme.Checkout' sprintf=['%alias%' => $order.addresses.delivery.alias]}</h4> <h4 class="text-lg font-semibold">{l s='Delivery address %alias%' d='Shop.Theme.Checkout' sprintf=['%alias%' => $order.addresses.delivery.alias]}</h4>
<address class="text-sm text-gray-700">{$order.addresses.delivery.formatted nofilter}</address> <address class="text-sm text-gray-700">{$order.addresses.delivery.formatted nofilter}</address>
</article> </article>
</div> </div>
{/if} {/if}
<div class="w-full lg:w-6/12 p-4"> <div class="w-full lg:w-[49%] ">
<article id="invoice-address" class="bg-white shadow rounded-lg p-6"> <article id="invoice-address" class="border rounded p-6">
<h4 class="text-lg font-semibold">{l s='Invoice address %alias%' d='Shop.Theme.Checkout' sprintf=['%alias%' => $order.addresses.invoice.alias]}</h4> <h4 class="text-lg font-semibold">{l s='Invoice address %alias%' d='Shop.Theme.Checkout' sprintf=['%alias%' => $order.addresses.invoice.alias]}</h4>
<address class="text-sm text-gray-700">{$order.addresses.invoice.formatted nofilter}</address> <address class="text-sm text-gray-700">{$order.addresses.invoice.formatted nofilter}</address>
</article> </article>
@ -162,7 +162,7 @@
{block name='order_carriers'} {block name='order_carriers'}
{if $order.shipping} {if $order.shipping}
<div class="bg-white shadow rounded-lg p-6"> <div class="md:border md:mt-6 hidden md:p-6">
<table class="table-auto w-full hidden md:table"> <table class="table-auto w-full hidden md:table">
<thead class="text-gray-700"> <thead class="text-gray-700">
<tr> <tr>
@ -173,7 +173,7 @@
<th class="px-4 py-2">{l s='Tracking number' d='Shop.Theme.Checkout'}</th> <th class="px-4 py-2">{l s='Tracking number' d='Shop.Theme.Checkout'}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="text-center" >
{foreach from=$order.shipping item=line} {foreach from=$order.shipping item=line}
<tr> <tr>
<td class="px-4 py-2">{$line.shipping_date}</td> <td class="px-4 py-2">{$line.shipping_date}</td>