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

refactor: update order confirmation page

pagebuilder
abhisheks 2023-12-07 02:26:14 +05:30
parent d8cf51fd5b
commit 9d9ccbc331
2 changed files with 129 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
templates/checkout/_partials/order-confirmation-table.tpl
View File

@ -22,115 +22,124 @@
* @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 * International Registered Trademark & Property of PrestaShop SA
*} *}
<div id="order-items" class="col-md-12"> <div id="order-items" class="w-full flex flex-col gap-6 p-8 border border-gray-600">
<div class="row"> <div class="flex w-full gap-4">
{block name='order_items_table_head'} {block name='order_items_table_head'}
<h3 class="card-title h3 col-md-6 col-12">{l s='Order items' d='Shop.Theme.Checkout'}</h3> <h3 class="card-title font-semibold w-1/3 md:w-3/6 text-lg uppercase col-12">{l s='Order items' d='Shop.Theme.Checkout'}</h3>
<h3 class="card-title h3 col-md-2 text-md-center _desktop-title">{l s='Unit price' d='Shop.Theme.Checkout'}</h3> <h3 class="card-title max-md:hidden font-semibold w-1/6 text-lg uppercase _desktop-title">{l s='Unit price' d='Shop.Theme.Checkout'}</h3>
<h3 class="card-title h3 col-md-2 text-md-center _desktop-title">{l s='Quantity' d='Shop.Theme.Checkout'}</h3> <h3 class="card-title font-semibold w-1/3 md:w-1/6 text-center text-lg uppercase _desktop-title">{l s='Quantity' d='Shop.Theme.Checkout'}</h3>
<h3 class="card-title h3 col-md-2 text-md-center _desktop-title">{l s='Total products' d='Shop.Theme.Checkout'}</h3> <h3 class="card-title font-semibold w-1/3 md:w-1/6 text-right text-lg uppercase _desktop-title">{l s='Total price' d='Shop.Theme.Checkout'}</h3>
{/block} {/block}
</div> </div>
<div class="order-confirmation-table"> <div class="order-confirmation-table flex flex-col gap-8 w-full">
{block name='order_confirmation_table'} {block name='order_confirmation_table'}
{foreach from=$products item=product} {foreach from=$products item=product}
<div class="order-line row"> <div class="flex w-full gap-4">
<div class="col-sm-2 col-xs-3"> <div class="flex w-1/2 gap-8">
<span class="image"> <span class="image max-md:hidden">
<img src="{$product.cover.medium.url}" /> <img class="w-[160px]" src="{$product.cover.medium.url}" />
</span> </span>
</div> <div class="flex-1 md:pr-48 pt-4">
<div class="col-sm-4 col-xs-9 details"> {if $add_product_link}<a href="{$product.url}" target="_blank">{/if}
{if $add_product_link}<a href="{$product.url}" target="_blank">{/if} <span class="font-semibold text-lg">{$product.name}</span>
<span>{$product.name}</span> {if $add_product_link}</a>{/if}
{if $add_product_link}</a>{/if} {if is_array($product.customizations) && $product.customizations|count}
{if is_array($product.customizations) && $product.customizations|count} {foreach from=$product.customizations item="customization"}
{foreach from=$product.customizations item="customization"} <div class="customizations">
<div class="customizations"> <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}">{l s='Product customization' d='Shop.Theme.Catalog'}</a> </div>
</div> <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"> <div class="modal-dialog" role="document">
<div class="modal-dialog" role="document"> <div class="modal-content">
<div class="modal-content"> <div class="modal-header">
<div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span>
<span aria-hidden="true">&times;</span> </button>
</button> <h4 class="modal-title">{l s='Product customization' d='Shop.Theme.Catalog'}</h4>
<h4 class="modal-title">{l s='Product customization' d='Shop.Theme.Catalog'}</h4>
</div>
<div class="modal-body">
{foreach from=$customization.fields item="field"}
<div class="product-customization-line row">
<div class="col-sm-3 col-xs-4 label">
{$field.label}
</div>
<div class="col-sm-9 col-xs-8 value">
{if $field.type == 'text'}
{if (int)$field.id_module}
{$field.text nofilter}
{else}
{$field.text}
{/if}
{elseif $field.type == 'image'}
<img src="{$field.image.small.url}">
{/if}
</div>
</div> </div>
{/foreach} <div class="modal-body">
{foreach from=$customization.fields item="field"}
<div class="product-customization-line row">
<div class="col-sm-3 col-xs-4 label">
{$field.label}
</div>
<div class="col-sm-9 col-xs-8 value">
{if $field.type == 'text'}
{if (int)$field.id_module}
{$field.text nofilter}
{else}
{$field.text}
{/if}
{elseif $field.type == 'image'}
<img src="{$field.image.small.url}">
{/if}
</div>
</div>
{/foreach}
</div>
</div>
</div> </div>
</div> </div>
</div> {/foreach}
</div> {/if}
{/foreach} {hook h='displayProductPriceBlock' product=$product type="unit_price"}
{/if} </div>
{hook h='displayProductPriceBlock' product=$product type="unit_price"}
</div>
<div class="col-sm-6 col-xs-12 qty">
<div class="row">
<div class="col-xs-4 text-sm-center text-xs-left">{$product.price}</div>
<div class="col-xs-4 text-sm-center">{$product.quantity}</div>
<div class="col-xs-4 text-sm-center text-xs-right bold">{$product.total}</div>
</div>
</div> </div>
<div class="w-1/3 md:w-1/6 max-md:hidden font-semibold text-lg pt-4">{$product.price}</div>
<div class="w-1/3 md:w-1/6 text-center font-semibold text-lg pt-4">{$product.quantity}</div>
<div class="w-1/3 md:w-1/6 text-right font-bold text-lg pt-4">{$product.total}</div>
</div> </div>
{/foreach} {/foreach}
<hr> <hr>
<div class="w-full flex flex-col gap-2">
<div class="w-full flex gap-2">
<div class="flex flex-1 md:pl-4 flex-col gap-2">
{foreach $subtotals as $subtotal}
{if $subtotal.type !== 'tax' && $subtotal.label !== null}
<span class="font-semibold w-full">{$subtotal.label}</span>
{/if}
{/foreach}
{if $subtotals.tax.label !== null}
<span class="font-semibold w-full">{l s='%label%:' sprintf=['%label%' => $subtotals.tax.label] d='Shop.Theme.Global'}</span>
{/if}
<table> {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
{foreach $subtotals as $subtotal} <span class="font-semibold">{$totals.total.label}&nbsp;{$labels.tax_short}</span>
{if $subtotal.type !== 'tax' && $subtotal.label !== null} {/if}
<tr> </div>
<td>{$subtotal.label}</td> <div class="flex flex-col items-end md:pr-4 gap-2">
<td>{if 'discount' == $subtotal.type}-&nbsp;{/if}{$subtotal.value}</td> {foreach $subtotals as $subtotal}
</tr> {if $subtotal.type !== 'tax' && $subtotal.label !== null}
{/if} <span>{if 'discount' == $subtotal.type}-&nbsp;{/if}{$subtotal.value}</span>
{/foreach} {/if}
{/foreach}
{if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled} {if $subtotals.tax.label !== null}
<tr> <span>{$subtotals.tax.value}</span>
<td><span class="text-uppercase">{$totals.total.label}&nbsp;{$labels.tax_short}</span></td> {/if}
<td>{$totals.total.value}</td> {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
</tr> <span class="">{$totals.total.value}</span>
<tr class="total-value font-weight-bold"> {/if}
<td><span class="text-uppercase">{$totals.total_including_tax.label}</span></td> </div>
<td>{$totals.total_including_tax.value}</td> </div>
</tr> <div class="w-full flex">
{else} {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
<tr class="total-value font-weight-bold"> <span class="text-lg font-semibold w-full bg-gray-200 md:pl-4">
<td><span class="text-uppercase">{$totals.total.label}&nbsp;{if $configuration.taxes_enabled}{$labels.tax_short}{/if}</span></td> {$totals.total_including_tax.label}
<td>{$totals.total.value}</td> </span>
</tr> {else}
{/if} <span class="text-lg font-semibold w-full md:pl-4">{$totals.total.label}&nbsp;{if $configuration.taxes_enabled}{$labels.tax_short}{/if}</span>
{if $subtotals.tax.label !== null} {/if}
<tr class="sub taxes"> {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
<td><span class="label">{l s='%label%:' sprintf=['%label%' => $subtotals.tax.label] d='Shop.Theme.Global'}</span>&nbsp;<span class="value">{$subtotals.tax.value}</span></td> <span class="text-lg font-semibold bg-gray-200 md:pr-4">{$totals.total_including_tax.value}</span>
</tr> {else}
{/if} <span class="text-lg font-semibold md:pl-4">{$totals.total.value}</span>
</table> {/if}
<div>
</div>
</div>
</div>
{/block} {/block}
</div> </div>
</div> </div>

55
templates/checkout/order-confirmation.tpl
View File

@ -1,18 +1,19 @@
{extends file='page.tpl'} {extends file='page.tpl'}
{block name='page_content_container' prepend} {block name='page_content_container' prepend}
<section id="content-hook_order_confirmation" class="card"> <section id="content-hook_order_confirmation" class="card w-full">
<div class="card-block"> <div class="card-block w-full">
<div class="row"> <div class="w-full flex">
<div class="col-md-12"> <div class="w-full p-8 flex flex-col gap-2 border border-gray-600">
{block name='order_confirmation_header'} {block name='order_confirmation_header'}
<h3 class="h1 card-title"> <div class="h1 card-title flex items-center gap-4 text-2xl">
<i class="material-icons rtl-no-flip done">&#xE876;</i>{l s='Your order is confirmed' d='Shop.Theme.Checkout'} <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-checks" width="32" height="32" 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 12l5 5l10 -10" /><path d="M2 12l5 5m5 -5l5 -5" /></svg>
</h3> {l s='Your order is confirmed.' d='Shop.Theme.Checkout'}
</div>
{/block} {/block}
<p> <span class="pl-12">
{l s='An email has been sent to your mail address %email%.' d='Shop.Theme.Checkout' sprintf=['%email%' => $customer.email]} {l s='An email has been sent to your mail address %email%.' d='Shop.Theme.Checkout' sprintf=['%email%' => $customer.email]}
{if $order.details.invoice_url} {if $order.details.invoice_url}
{* [1][/1] is for a HTML tag. *} {* [1][/1] is for a HTML tag. *}
@ -25,7 +26,7 @@
] ]
} }
{/if} {/if}
</p> </span>
{block name='hook_order_confirmation'} {block name='hook_order_confirmation'}
{$HOOK_ORDER_CONFIRMATION nofilter} {$HOOK_ORDER_CONFIRMATION nofilter}
@ -38,10 +39,8 @@
{/block} {/block}
{block name='page_content_container'} {block name='page_content_container'}
<section id="content" class="page-content page-order-confirmation card"> <section id="content" class="page-content page-order-confirmation card w-full">
<div class="card-block"> <div class="flex flex-col w-full gap-4 mt-8">
<div class="row">
{block name='order_confirmation_table'} {block name='order_confirmation_table'}
{include {include
file='checkout/_partials/order-confirmation-table.tpl' file='checkout/_partials/order-confirmation-table.tpl'
@ -54,23 +53,24 @@
{/block} {/block}
{block name='order_details'} {block name='order_details'}
<div id="order-details" class="col-md-4"> <div id="order-details" class="w-full px-8 py-4 md:p-8 border border-gray-600 flex flex-col gap-3">
<h3 class="h3 card-title">{l s='Order details' d='Shop.Theme.Checkout'}:</h3> <h3 class="text-lg font-semibold">{l s='Order details' d='Shop.Theme.Checkout'}:</h3>
<ul> <div class="w-full flex">
<li>{l s='Order reference: %reference%' d='Shop.Theme.Checkout' sprintf=['%reference%' => $order.details.reference]}</li> <div class="w-1/2 md:w-2/3 flex flex-col gap-1">
<li>{l s='Payment method: %method%' d='Shop.Theme.Checkout' sprintf=['%method%' => $order.details.payment]}</li> <span >Order reference:</span>
{if !$order.details.is_virtual} <span >Payment method:</span>
<li> <span >Shipping method:</span>
{l s='Shipping method: %method%' d='Shop.Theme.Checkout' sprintf=['%method%' => $order.carrier.name]}<br> </div>
<em>{$order.carrier.delay}</em> <div class="w-1/2 md:w-1/3 flex flex-col items-end gap-1">
</li> <span>{$order.details.reference}</span>
{/if} <span>{$order.details.payment}</span>
</ul> <span>{$order.carrier.name}</span>
</div>
</div>
</div> </div>
{/block} {/block}
</div> </div>
</div>
</section> </section>
{block name='hook_payment_return'} {block name='hook_payment_return'}
@ -79,7 +79,6 @@
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
{$HOOK_PAYMENT_RETURN nofilter}
</div> </div>
</div> </div>
</div> </div>
@ -103,7 +102,7 @@
{/block} {/block}
{block name='hook_order_confirmation_2'} {block name='hook_order_confirmation_2'}
<section id="content-hook-order-confirmation-footer"> <section id="content-hook-order-confirmation-footer" class="mt-8">
{hook h='displayOrderConfirmation2'} {hook h='displayOrderConfirmation2'}
</section> </section>
{/block} {/block}