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

chore: update customer templates

feat/promo-code-loader
jatiny 2024-11-19 06:36:06 +00:00
parent 3b25639921
commit 8218fdcbf3
3 changed files with 273 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
templates/customer/_partials/order-detail-no-return.tpl
View File

@ -23,31 +23,31 @@
* International Registered Trademark & Property of PrestaShop SA * International Registered Trademark & Property of PrestaShop SA
*} *}
{block name='order_products_table'} {block name='order_products_table'}
<div class="box hidden-sm-down"> <div class="box hidden sm:block">
<table id="order-products" class="table table-bordered"> <table id="order-products" class="table-auto border-separate border border-gray-200 w-full">
<thead class="thead-default"> <thead class="bg-gray-100">
<tr> <tr>
<th>{l s='Product' d='Shop.Theme.Catalog'}</th> <th class="px-4 py-2 text-left">{l s='Product' d='Shop.Theme.Catalog'}</th>
<th>{l s='Quantity' d='Shop.Theme.Catalog'}</th> <th class="px-4 py-2 text-left">{l s='Quantity' d='Shop.Theme.Catalog'}</th>
<th>{l s='Unit price' d='Shop.Theme.Catalog'}</th> <th class="px-4 py-2 text-left">{l s='Unit price' d='Shop.Theme.Catalog'}</th>
<th>{l s='Total price' d='Shop.Theme.Catalog'}</th> <th class="px-4 py-2 text-left">{l s='Total price' d='Shop.Theme.Catalog'}</th>
</tr> </tr>
</thead> </thead>
{foreach from=$order.products item=product} {foreach from=$order.products item=product}
<tr> <tr class="border-t border-gray-200">
<td> <td class="px-4 py-2">
<strong> <strong>
<a {if isset($product.download_link)}href="{$product.download_link}"{/if}> <a {if isset($product.download_link)}href="{$product.download_link}"{/if} class="text-blue-600 hover:underline">
{$product.name} {$product.name}
</a> </a>
</strong><br/> </strong><br/>
{if $product.reference} {if $product.reference}
{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}<br/> <span class="text-sm text-gray-500">{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}<br/></span>
{/if} {/if}
{if $product.customizations} {if $product.customizations}
{foreach from=$product.customizations item="customization"} {foreach from=$product.customizations item="customization"}
<div class="customization"> <div class="customization mt-2">
<a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}">{l s='Product customization' d='Shop.Theme.Catalog'}</a> <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}" class="text-blue-600 hover:underline">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
</div> </div>
<div id="_desktop_product_customization_modal_wrapper_{$customization.id_customization}"> <div id="_desktop_product_customization_modal_wrapper_{$customization.id_customization}">
<div class="modal fade customization-modal" id="product-customizations-modal-{$customization.id_customization}" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal fade customization-modal" id="product-customizations-modal-{$customization.id_customization}" tabindex="-1" role="dialog" aria-hidden="true">
@ -61,11 +61,11 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
{foreach from=$customization.fields item="field"} {foreach from=$customization.fields item="field"}
<div class="product-customization-line row"> <div class="product-customization-line flex mb-2">
<div class="col-sm-3 col-xs-4 label"> <div class="w-1/3 font-semibold text-sm text-gray-600">
{$field.label} {$field.label}
</div> </div>
<div class="col-sm-9 col-xs-8 value"> <div class="w-2/3 text-sm">
{if $field.type == 'text'} {if $field.type == 'text'}
{if (int)$field.id_module} {if (int)$field.id_module}
{$field.text nofilter} {$field.text nofilter}
@ -73,7 +73,7 @@
{$field.text} {$field.text}
{/if} {/if}
{elseif $field.type == 'image'} {elseif $field.type == 'image'}
<img src="{$field.image.small.url}"> <img src="{$field.image.small.url}" class="w-16 h-16 object-cover">
{/if} {/if}
</div> </div>
</div> </div>
@ -86,7 +86,7 @@
{/foreach} {/foreach}
{/if} {/if}
</td> </td>
<td> <td class="px-4 py-2">
{if $product.customizations} {if $product.customizations}
{foreach $product.customizations as $customization} {foreach $product.customizations as $customization}
{$customization.quantity} {$customization.quantity}
@ -95,52 +95,49 @@
{$product.quantity} {$product.quantity}
{/if} {/if}
</td> </td>
<td class="text-xs-right">{$product.price}</td> <td class="px-4 py-2 text-right">{$|cat:$product.price}</td>
<td class="text-xs-right">{$product.total}</td> <td class="px-4 py-2 text-right">{$|cat:$product.total}</td>
</tr> </tr>
{/foreach} {/foreach}
<tfoot> <tfoot>
{foreach $order.subtotals as $line} {foreach $order.subtotals as $line}
{if $line.value} {if $line.value}
<tr class="text-xs-right line-{$line.type}"> <tr class="text-right border-t border-gray-200">
<td colspan="3">{$line.label}</td> <td colspan="3" class="px-4 py-2">{$line.label}</td>
<td>{$line.value}</td> <td class="px-4 py-2">{$line.value}</td>
</tr> </tr>
{/if} {/if}
{/foreach} {/foreach}
<tr class="text-xs-right line-{$order.totals.total.type}"> <tr class="text-right border-t border-gray-200">
<td colspan="3">{$order.totals.total.label}</td> <td colspan="3" class="px-4 py-2">{$order.totals.total.label}</td>
<td>{$order.totals.total.value}</td> <td class="px-4 py-2">{$order.totals.total.value}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
<div class="order-items hidden-md-up box"> <div class="order-items sm:hidden box">
{foreach from=$order.products item=product} {foreach from=$order.products item=product}
<div class="order-item"> <div class="order-item py-4 border-b border-gray-200">
<div class="row"> <div class="flex">
<div class="col-sm-5 desc"> <div class="w-1/2">
<div class="name">{$product.name}</div> <div class="text-lg font-semibold">{$product.name}</div>
{if $product.reference} {if $product.reference}
<div class="ref">{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}</div> <div class="text-sm text-gray-500">{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}</div>
{/if} {/if}
{if $product.customizations} {if $product.customizations}
{foreach $product.customizations as $customization} {foreach $product.customizations as $customization}
<div class="customization"> <div class="customization mt-2">
<a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}">{l s='Product customization' d='Shop.Theme.Catalog'}</a> <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}" class="text-blue-600 hover:underline">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
</div>
<div id="_mobile_product_customization_modal_wrapper_{$customization.id_customization}">
</div> </div>
<div id="_mobile_product_customization_modal_wrapper_{$customization.id_customization}"></div>
{/foreach} {/foreach}
{/if} {/if}
</div> </div>
<div class="col-sm-7 qty"> <div class="w-1/2 text-right">
<div class="row"> <div class="flex justify-between">
<div class="col-xs-4 text-sm-left text-xs-left"> <div class="text-sm">{$product.price}</div>
{$product.price} <div class="text-sm">
</div>
<div class="col-xs-4">
{if $product.customizations} {if $product.customizations}
{foreach $product.customizations as $customization} {foreach $product.customizations as $customization}
{$customization.quantity} {$customization.quantity}
@ -149,27 +146,26 @@
{$product.quantity} {$product.quantity}
{/if} {/if}
</div> </div>
<div class="col-xs-4 text-xs-right"> <div class="text-sm">{'$'|cat:$product.total}</div>
{$product.total}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/foreach} {/foreach}
</div> </div>
<div class="order-totals hidden-md-up box">
<div class="order-totals sm:hidden box mt-4">
{foreach $order.subtotals as $line} {foreach $order.subtotals as $line}
{if $line.value} {if $line.value}
<div class="order-total row"> <div class="order-total flex justify-between py-2">
<div class="col-xs-8"><strong>{$line.label}</strong></div> <div class="text-sm font-semibold">{'$line.label'}</div>
<div class="col-xs-4 text-xs-right">{$line.value}</div> <div class="text-sm">{'$line.value'}</div>
</div> </div>
{/if} {/if}
{/foreach} {/foreach}
<div class="order-total row"> <div class="order-total flex justify-between py-2">
<div class="col-xs-8"><strong>{$order.totals.total.label}</strong></div> <div class="text-sm font-semibold">{'$order.totals.total.label'}</div>
<div class="col-xs-4 text-xs-right">{$order.totals.total.value}</div> <div class="text-sm">{'$order.totals.total.value'}</div>
</div> </div>
</div> </div>
{/block} {/block}

133
templates/customer/_partials/order-detail-return.tpl
View File

@ -25,21 +25,21 @@
{block name='order_products_table'} {block name='order_products_table'}
<form id="order-return-form" action="{$urls.pages.order_follow}" method="post"> <form id="order-return-form" action="{$urls.pages.order_follow}" method="post">
<div class="box hidden-sm-down"> <div class="box hidden sm:block">
<table id="order-products" class="table table-bordered return"> <table id="order-products" class="table-auto border-separate border border-gray-200 w-full return">
<thead class="thead-default"> <thead class="bg-gray-100">
<tr> <tr>
<th class="head-checkbox"><input type="checkbox"/></th> <th class="px-4 py-2"><input type="checkbox"/></th>
<th>{l s='Product' d='Shop.Theme.Catalog'}</th> <th class="px-4 py-2">{l s='Product' d='Shop.Theme.Catalog'}</th>
<th>{l s='Quantity' d='Shop.Theme.Catalog'}</th> <th class="px-4 py-2">{l s='Quantity' d='Shop.Theme.Catalog'}</th>
<th>{l s='Returned' d='Shop.Theme.Customeraccount'}</th> <th class="px-4 py-2">{l s='Returned' d='Shop.Theme.Customeraccount'}</th>
<th>{l s='Unit price' d='Shop.Theme.Catalog'}</th> <th class="px-4 py-2">{l s='Unit price' d='Shop.Theme.Catalog'}</th>
<th>{l s='Total price' d='Shop.Theme.Catalog'}</th> <th class="px-4 py-2">{l s='Total price' d='Shop.Theme.Catalog'}</th>
</tr> </tr>
</thead> </thead>
{foreach from=$order.products item=product name=products} {foreach from=$order.products item=product name=products}
<tr> <tr class="border-t border-gray-200">
<td> <td class="px-4 py-2">
{if !$product.customizations} {if !$product.customizations}
<span id="_desktop_product_line_{$product.id_order_detail}"> <span id="_desktop_product_line_{$product.id_order_detail}">
<input type="checkbox" id="cb_{$product.id_order_detail}" name="ids_order_detail[{$product.id_order_detail}]" value="{$product.id_order_detail}"> <input type="checkbox" id="cb_{$product.id_order_detail}" name="ids_order_detail[{$product.id_order_detail}]" value="{$product.id_order_detail}">
@ -52,15 +52,15 @@
{/foreach} {/foreach}
{/if} {/if}
</td> </td>
<td> <td class="px-4 py-2">
<strong>{$product.name}</strong><br/> <strong>{$product.name}</strong><br/>
{if $product.reference} {if $product.reference}
{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}<br/> <span class="text-sm text-gray-500">{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}<br/></span>
{/if} {/if}
{if $product.customizations} {if $product.customizations}
{foreach from=$product.customizations item="customization"} {foreach from=$product.customizations item="customization"}
<div class="customization"> <div class="customization mt-2">
<a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}">{l s='Product customization' d='Shop.Theme.Catalog'}</a> <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}" class="text-blue-600 hover:underline">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
</div> </div>
<div id="_desktop_product_customization_modal_wrapper_{$customization.id_customization}"> <div id="_desktop_product_customization_modal_wrapper_{$customization.id_customization}">
<div class="modal fade customization-modal" id="product-customizations-modal-{$customization.id_customization}" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal fade customization-modal" id="product-customizations-modal-{$customization.id_customization}" tabindex="-1" role="dialog" aria-hidden="true">
@ -74,11 +74,11 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
{foreach from=$customization.fields item="field"} {foreach from=$customization.fields item="field"}
<div class="product-customization-line row"> <div class="product-customization-line flex mb-2">
<div class="col-sm-3 col-xs-4 label"> <div class="w-1/3 font-semibold text-sm text-gray-600">
{$field.label} {$field.label}
</div> </div>
<div class="col-sm-9 col-xs-8 value"> <div class="w-2/3 text-sm">
{if $field.type == 'text'} {if $field.type == 'text'}
{if (int)$field.id_module} {if (int)$field.id_module}
{$field.text nofilter} {$field.text nofilter}
@ -86,7 +86,7 @@
{$field.text} {$field.text}
{/if} {/if}
{elseif $field.type == 'image'} {elseif $field.type == 'image'}
<img src="{$field.image.small.url}"> <img src="{$field.image.small.url}" class="w-16 h-16 object-cover">
{/if} {/if}
</div> </div>
</div> </div>
@ -99,14 +99,14 @@
{/foreach} {/foreach}
{/if} {/if}
</td> </td>
<td class="qty"> <td class="px-4 py-2">
{if !$product.customizations} {if !$product.customizations}
<div class="current"> <div class="current">
{$product.quantity} {$product.quantity}
</div> </div>
{if $product.quantity > $product.qty_returned} {if $product.quantity > $product.qty_returned}
<div class="select" id="_desktop_return_qty_{$product.id_order_detail}"> <div class="select mt-2" id="_desktop_return_qty_{$product.id_order_detail}">
<select name="order_qte_input[{$product.id_order_detail}]" class="form-control form-control-select"> <select name="order_qte_input[{$product.id_order_detail}]" class="form-control border-gray-300 rounded-md shadow-sm">
{section name=quantity start=1 loop=$product.quantity+1-$product.qty_returned} {section name=quantity start=1 loop=$product.quantity+1-$product.qty_returned}
<option value="{$smarty.section.quantity.index}">{$smarty.section.quantity.index}</option> <option value="{$smarty.section.quantity.index}">{$smarty.section.quantity.index}</option>
{/section} {/section}
@ -118,10 +118,10 @@
<div class="current"> <div class="current">
{$customization.quantity} {$customization.quantity}
</div> </div>
<div class="select" id="_desktop_return_qty_{$product.id_order_detail}_{$customization.id_customization}"> <div class="select mt-2" id="_desktop_return_qty_{$product.id_order_detail}_{$customization.id_customization}">
<select <select
name="customization_qty_input[{$customization.id_customization}]" name="customization_qty_input[{$customization.id_customization}]"
class="form-control form-control-select" class="form-control border-gray-300 rounded-md shadow-sm"
> >
{section name=quantity start=1 loop=$customization.quantity+1} {section name=quantity start=1 loop=$customization.quantity+1}
<option value="{$smarty.section.quantity.index}">{$smarty.section.quantity.index}</option> <option value="{$smarty.section.quantity.index}">{$smarty.section.quantity.index}</option>
@ -132,32 +132,32 @@
<div class="clearfix"></div> <div class="clearfix"></div>
{/if} {/if}
</td> </td>
<td class="text-xs-right">{$product.qty_returned}</td> <td class="px-4 py-2 text-right">{$product.qty_returned}</td>
<td class="text-xs-right">{$product.price}</td> <td class="px-4 py-2 text-right">{'$'|cat:$product.price}</td>
<td class="text-xs-right">{$product.total}</td> <td class="px-4 py-2 text-right">{'$'|cat:$product.total}</td>
</tr> </tr>
{/foreach} {/foreach}
<tfoot> <tfoot>
{foreach $order.subtotals as $line} {foreach $order.subtotals as $line}
{if $line.value} {if $line.value}
<tr class="text-xs-right line-{$line.type}"> <tr class="text-right border-t border-gray-200">
<td colspan="5">{$line.label}</td> <td colspan="5" class="px-4 py-2">{'$line.label'}</td>
<td colspan="2">{$line.value}</td> <td colspan="2" class="px-4 py-2">{'$line.value'}</td>
</tr> </tr>
{/if} {/if}
{/foreach} {/foreach}
<tr class="text-xs-right line-{$order.totals.total.type}"> <tr class="text-right border-t border-gray-200">
<td colspan="5">{$order.totals.total.label}</td> <td colspan="5" class="px-4 py-2">{'$order.totals.total.label'}</td>
<td colspan="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>
</div> </div>
<div class="order-items hidden-md-up box"> <div class="order-items sm:hidden box">
{foreach from=$order.products item=product} {foreach from=$order.products item=product}
<div class="order-item"> <div class="order-item py-4 border-b border-gray-200">
<div class="row"> <div class="flex">
<div class="checkbox"> <div class="checkbox">
{if !$product.customizations} {if !$product.customizations}
<span id="_mobile_product_line_{$product.id_order_detail}"></span> <span id="_mobile_product_line_{$product.id_order_detail}"></span>
@ -167,29 +167,27 @@
{/foreach} {/foreach}
{/if} {/if}
</div> </div>
<div class="content"> <div class="content w-full">
<div class="row"> <div class="flex">
<div class="col-sm-5 desc"> <div class="w-1/2">
<div class="name">{$product.name}</div> <div class="name font-semibold text-sm">{$product.name}</div>
{if $product.reference} {if $product.reference}
<div class="ref">{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}</div> <div class="ref text-sm text-gray-500">{l s='Reference' d='Shop.Theme.Catalog'}: {$product.reference}</div>
{/if} {/if}
{if $product.customizations} {if $product.customizations}
{foreach $product.customizations as $customization} {foreach $product.customizations as $customization}
<div class="customization"> <div class="customization mt-2">
<a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}">{l s='Product customization' d='Shop.Theme.Catalog'}</a> <a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}" class="text-blue-600 hover:underline">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
</div> </div>
<div id="_mobile_product_customization_modal_wrapper_{$customization.id_customization}"> <div id="_mobile_product_customization_modal_wrapper_{$customization.id_customization}">
</div> </div>
{/foreach} {/foreach}
{/if} {/if}
</div> </div>
<div class="col-sm-7 qty"> <div class="w-1/2">
<div class="row"> <div class="flex justify-between">
<div class="col-xs-4 text-sm-left text-xs-left"> <div class="text-sm">{'$'|cat:$product.price}</div>
{$product.price} <div class="text-sm">
</div>
<div class="col-xs-4">
{if $product.customizations} {if $product.customizations}
{foreach $product.customizations as $customization} {foreach $product.customizations as $customization}
<div class="q">{l s='Quantity' d='Shop.Theme.Catalog'}: {$customization.quantity}</div> <div class="q">{l s='Quantity' d='Shop.Theme.Catalog'}: {$customization.quantity}</div>
@ -202,12 +200,9 @@
{/if} {/if}
{/if} {/if}
{if $product.qty_returned > 0} {if $product.qty_returned > 0}
<div>{l s='Returned' d='Shop.Theme.Customeraccount'}: {$product.qty_returned}</div> <div class="text-xs text-gray-600">{l s='Returned' d='Shop.Theme.Customeraccount'}: {$product.qty_returned}</div>
{/if} {/if}
</div> </div>
<div class="col-xs-4 text-xs-right">
{$product.total}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -216,38 +211,38 @@
</div> </div>
{/foreach} {/foreach}
</div> </div>
<div class="order-totals hidden-md-up box"> <div class="order-totals sm:hidden box">
{foreach $order.subtotals as $line} {foreach $order.subtotals as $line}
{if $line.value} {if $line.value}
<div class="order-total row"> <div class="order-total flex justify-between py-2 px-4 border-b border-gray-200">
<div class="col-xs-8"><strong>{$line.label}</strong></div> <div class="text-sm font-semibold">{$line.label}</div>
<div class="col-xs-4 text-xs-right">{$line.value}</div> <div class="text-sm">{'$line.value'}</div>
</div> </div>
{/if} {/if}
{/foreach} {/foreach}
<div class="order-total row"> <div class="order-total flex justify-between py-2 px-4 border-t border-gray-200">
<div class="col-xs-8"><strong>{$order.totals.total.label}</strong></div> <div class="text-sm font-semibold">{$order.totals.total.label}</div>
<div class="col-xs-4 text-xs-right">{$order.totals.total.value}</div> <div class="text-sm">{'$order.totals.total.value'}</div>
</div> </div>
</div> </div>
<div class="box"> <div class="box mt-4">
<header> <header class="mb-4">
<h3>{l s='Merchandise return' d='Shop.Theme.Customeraccount'}</h3> <h3 class="text-lg font-semibold">{l s='Merchandise return' d='Shop.Theme.Customeraccount'}</h3>
<p>{l s='If you wish to return one or more products, please mark the corresponding boxes and provide an explanation for the return. When complete, click the button below.' d='Shop.Theme.Customeraccount'}</p> <p class="text-sm text-gray-600">{l s='If you wish to return one or more products, please mark the corresponding boxes and provide an explanation for the return. When complete, click the button below.' d='Shop.Theme.Customeraccount'}</p>
</header> </header>
<section class="form-fields"> <section class="form-fields mb-4">
<div class="form-group"> <div class="form-group">
<textarea cols="67" rows="3" name="returnText" class="form-control"></textarea> <textarea cols="67" rows="3" name="returnText" class="form-control border-gray-300 rounded-md shadow-sm w-full"></textarea>
</div> </div>
</section> </section>
<footer class="form-footer"> <footer class="form-footer mt-4">
<input type="hidden" name="id_order" value="{$order.details.id}"> <input type="hidden" name="id_order" value="{$order.details.id}">
<button class="form-control-submit btn btn-primary" type="submit" name="submitReturnMerchandise"> <button class="form-control-submit btn bg-blue-500 text-white rounded-md py-2 px-6 hover:bg-blue-600" type="submit" name="submitReturnMerchandise">
{l s='Request a return' d='Shop.Theme.Customeraccount'} {l s='Request a return' d='Shop.Theme.Customeraccount'}
</button> </button>
</footer> </footer>
</div> </div>
</form> </form>
{/block} {/block}}

143
templates/customer/order-detail.tpl
View File

@ -20,7 +20,6 @@
* @author PrestaShop SA <contact@prestashop.com> * @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2019 PrestaShop SA and Contributors * @copyright 2007-2019 PrestaShop SA and Contributors
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
* International Registered Trademark & Property of PrestaShop SA
*} *}
{extends file='customer/page.tpl'} {extends file='customer/page.tpl'}
@ -30,35 +29,42 @@
{block name='page_content'} {block name='page_content'}
{block name='order_infos'} {block name='order_infos'}
<div id="order-infos"> <div id="order-infos" class="space-y-6">
<div class="box"> <div class="bg-white shadow rounded-lg p-6">
<div class="row"> <div class="flex flex-wrap items-center">
<div class="col-xs-{if $order.details.reorder_url}9{else}12{/if}"> <div class="w-full {if $order.details.reorder_url}lg:w-9/12{else}lg:w-full{/if}">
<strong> <strong>
{l {l s='Order Reference %reference% - placed on %date%' d='Shop.Theme.Customeraccount' sprintf=['%reference%' => $order.details.reference, '%date%' => $order.details.order_date]}
s='Order Reference %reference% - placed on %date%'
d='Shop.Theme.Customeraccount'
sprintf=['%reference%' => $order.details.reference, '%date%' => $order.details.order_date]
}
</strong> </strong>
</div> </div>
{if $order.details.reorder_url} {if $order.details.reorder_url}
<div class="col-xs-3 text-xs-right"> <div class="w-full lg:w-3/12 text-right">
<a href="{$order.details.reorder_url}" class="button-primary">{l s='Reorder' d='Shop.Theme.Actions'}</a> <a href="{$order.details.reorder_url}" class="btn btn-primary">{l s='Reorder' d='Shop.Theme.Actions'}</a>
</div>
{/if}
</div>
</div><div class="bg-white shadow rounded-lg p-6">
<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}">
<strong>
{l s='Order Reference %reference% - placed on %date%' d='Shop.Theme.Customeraccount' sprintf=['%reference%' => $order.details.reference, '%date%' => $order.details.order_date]}
</strong>
</div>
{if $order.details.reorder_url}
<div class="w-full lg:w-3/12 text-right">
<a href="{$order.details.reorder_url}" class="btn btn-primary">{l s='Reorder' d='Shop.Theme.Actions'}</a>
</div> </div>
{/if} {/if}
<div class="clearfix"></div>
</div> </div>
</div> </div>
<div class="bg-white shadow rounded-lg p-6">
<div class="box"> <ul class="space-y-4">
<ul>
<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>
{if $order.details.invoice_url} {if $order.details.invoice_url}
<li> <li>
<a href="{$order.details.invoice_url}"> <a href="{$order.details.invoice_url}" class="text-blue-500 hover:text-blue-700">
{l s='Download your invoice as a PDF file.' d='Shop.Theme.Customeraccount'} {l s='Download your invoice as a PDF file.' d='Shop.Theme.Customeraccount'}
</a> </a>
</li> </li>
@ -80,21 +86,21 @@
{/block} {/block}
{block name='order_history'} {block name='order_history'}
<section id="order-history" class="box"> <section id="order-history" class="bg-white shadow rounded-lg p-6">
<h3>{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 table-striped table-bordered table-labeled hidden-xs-down"> <table class="table-auto w-full hidden md:table">
<thead class="thead-default"> <thead class="text-gray-700">
<tr> <tr>
<th>{l s='Date' d='Shop.Theme.Global'}</th> <th class="px-4 py-2">{l s='Date' d='Shop.Theme.Global'}</th>
<th>{l s='Status' d='Shop.Theme.Global'}</th> <th class="px-4 py-2">{l s='Status' d='Shop.Theme.Global'}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{foreach from=$order.history item=state} {foreach from=$order.history item=state}
<tr> <tr>
<td>{$state.history_date}</td> <td class="px-4 py-2">{($state.history_date)}</td>
<td> <td class="px-4 py-2">
<span class="label label-pill {$state.contrast}" 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>
</td> </td>
@ -102,12 +108,12 @@
{/foreach} {/foreach}
</tbody> </tbody>
</table> </table>
<div class="hidden-sm-up history-lines"> <div class="block md:hidden">
{foreach from=$order.history item=state} {foreach from=$order.history item=state}
<div class="history-line"> <div class="mb-4">
<div class="date">{$state.history_date}</div> <div class="text-sm font-semibold">{($state.history_date)}</div>
<div class="state"> <div class="mt-2">
<span class="label label-pill {$state.contrast}" 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>
</div> </div>
@ -118,30 +124,29 @@
{/block} {/block}
{if $order.follow_up} {if $order.follow_up}
<div class="box"> <div class="bg-white shadow rounded-lg p-6">
<p>{l s='Click the following link to track the delivery of your order' d='Shop.Theme.Customeraccount'}</p> <p>{l s='Click the following link to track the delivery of your order' d='Shop.Theme.Customeraccount'}</p>
<a href="{$order.follow_up}">{$order.follow_up}</a> <a href="{$order.follow_up}" class="text-blue-500 hover:text-blue-700">{$order.follow_up}</a>
</div> </div>
{/if} {/if}
{block name='addresses'} {block name='addresses'}
<div class="addresses"> <div class="flex flex-wrap">
{if $order.addresses.delivery} {if $order.addresses.delivery}
<div class="col-lg-6 col-md-6 col-sm-6"> <div class="w-full lg:w-6/12 p-4">
<article id="delivery-address" class="box"> <article id="delivery-address" class="bg-white shadow rounded-lg p-6">
<h4>{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>{$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="col-lg-6 col-md-6 col-sm-6"> <div class="w-full lg:w-6/12 p-4">
<article id="invoice-address" class="box"> <article id="invoice-address" class="bg-white shadow rounded-lg p-6">
<h4>{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>{$order.addresses.invoice.formatted nofilter}</address> <address class="text-sm text-gray-700">{$order.addresses.invoice.formatted nofilter}</address>
</article> </article>
</div> </div>
<div class="clearfix"></div>
</div> </div>
{/block} {/block}
@ -157,57 +162,31 @@
{block name='order_carriers'} {block name='order_carriers'}
{if $order.shipping} {if $order.shipping}
<div class="box"> <div class="bg-white shadow rounded-lg p-6">
<table class="table table-striped table-bordered hidden-sm-down"> <table class="table-auto w-full hidden md:table">
<thead class="thead-default"> <thead class="text-gray-700">
<tr> <tr>
<th>{l s='Date' d='Shop.Theme.Global'}</th> <th class="px-4 py-2">{l s='Date' d='Shop.Theme.Global'}</th>
<th>{l s='Carrier' d='Shop.Theme.Checkout'}</th> <th class="px-4 py-2">{l s='Carrier' d='Shop.Theme.Checkout'}</th>
<th>{l s='Weight' d='Shop.Theme.Checkout'}</th> <th class="px-4 py-2">{l s='Weight' d='Shop.Theme.Checkout'}</th>
<th>{l s='Shipping cost' d='Shop.Theme.Checkout'}</th> <th class="px-4 py-2">{l s='Shipping cost' d='Shop.Theme.Checkout'}</th>
<th>{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>
{foreach from=$order.shipping item=line} {foreach from=$order.shipping item=line}
<tr> <tr>
<td>{$line.shipping_date}</td> <td class="px-4 py-2">{$line.shipping_date}</td>
<td>{$line.carrier_name}</td> <td class="px-4 py-2">{$line.carrier_name}</td>
<td>{$line.shipping_weight}</td> <td class="px-4 py-2">{$line.shipping_weight}</td>
<td>{$line.shipping_cost}</td> <td class="px-4 py-2">{$line.shipping_cost}</td>
<td>{$line.tracking nofilter}</td> <td class="px-4 py-2">{$line.tracking nofilter}</td>
</tr> </tr>
{/foreach} {/foreach}
</tbody> </tbody>
</table> </table>
<div class="hidden-md-up shipping-lines">
{foreach from=$order.shipping item=line}
<div class="shipping-line">
<ul>
<li>
<strong>{l s='Date' d='Shop.Theme.Global'}</strong> {$line.shipping_date}
</li>
<li>
<strong>{l s='Carrier' d='Shop.Theme.Checkout'}</strong> {$line.carrier_name}
</li>
<li>
<strong>{l s='Weight' d='Shop.Theme.Checkout'}</strong> {$line.shipping_weight}
</li>
<li>
<strong>{l s='Shipping cost' d='Shop.Theme.Checkout'}</strong> {$line.shipping_cost}
</li>
<li>
<strong>{l s='Tracking number' d='Shop.Theme.Checkout'}</strong> {$line.tracking nofilter}
</li>
</ul>
</div>
{/foreach}
</div>
</div> </div>
{/if} {/if}
{/block} {/block}
{block name='order_messages'}
{include file='customer/_partials/order-messages.tpl'}
{/block} {/block}
{/block}