forked from brooksbingham/theme-elegance
Merge pull request 'refactor: update checkout page styles and minor changes' (#9) from abhisheks/theme-elegance:main into main
Reviewed-on: brooksbingham/theme-elegance#9pagebuilder
commit
d636f4c1c1
|
@ -32,3 +32,6 @@ a:hover .ti, a:hover .icon-tabler {
|
|||
ul {
|
||||
@apply !list-inside;
|
||||
}
|
||||
input[type="radio"],input[type="checkbox"] {
|
||||
@apply focus:ring-transparent;
|
||||
}
|
||||
|
|
|
@ -77,15 +77,6 @@
|
|||
</div>
|
||||
|
||||
{hook h='displayCustomProductActions'}
|
||||
|
||||
<div class='customize'>
|
||||
<button
|
||||
class="w-full h-12 border border-blue-950 text-blue-950 text-base font-normal"
|
||||
>
|
||||
CUSTOMIZE
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{hook h='displayProductActions' product=$product}
|
||||
</div>
|
||||
{/block}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
<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]}"
|
||||
>
|
||||
<i class="material-icons edit"></i>{l s='Edit' d='Shop.Theme.Actions'}
|
||||
<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]}"
|
||||
>
|
||||
<i class="material-icons delete"></i>{l s='Delete' d='Shop.Theme.Actions'}
|
||||
<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}
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
|
||||
<div class="flex">
|
||||
<div class="w-full flex flex-col gap-2">
|
||||
{foreach from=$cart.subtotals item="subtotal"}
|
||||
{if $subtotal && $subtotal.value|count_characters > 0 && $subtotal.type !== 'tax'}
|
||||
<div class="flex justify-between font-medium" id="cart-subtotal-{$subtotal.type}">
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
|
||||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
<div class="flex flex-col my-8">
|
||||
<div class="flex flex-col gap-2 mt-2">
|
||||
|
||||
{block name='cart_summary_total'}
|
||||
{if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
|
||||
|
|
|
@ -31,8 +31,8 @@
|
|||
{block name='cart_summary_products'}
|
||||
<div class="cart-summary-products flex items-center">
|
||||
|
||||
<p>{$cart.summary_string}</p>
|
||||
|
||||
<p>{$cart.summary_string}</p>
|
||||
<p>
|
||||
<a href="#" data-toggle="collapse" data-target="#cart-summary-product-list">
|
||||
{l s='show details' d='Shop.Theme.Actions'}
|
||||
|
|
|
@ -22,29 +22,27 @@
|
|||
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
|
||||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
<div id="order-items" class="col-md-12">
|
||||
<div class="row">
|
||||
<div id="order-items" class="w-full flex flex-col gap-6 p-8 border border-gray-600">
|
||||
<div class="flex w-full gap-4">
|
||||
{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 h3 col-md-2 text-md-center _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 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-3/6 text-lg uppercase col-12">{l s='Order items' 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 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 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}
|
||||
</div>
|
||||
|
||||
<div class="order-confirmation-table">
|
||||
|
||||
<div class="order-confirmation-table flex flex-col gap-8 w-full">
|
||||
{block name='order_confirmation_table'}
|
||||
{foreach from=$products item=product}
|
||||
<div class="order-line row">
|
||||
<div class="col-sm-2 col-xs-3">
|
||||
<span class="image">
|
||||
<img src="{$product.cover.medium.url}" />
|
||||
<div class="flex w-full gap-4">
|
||||
<div class="flex w-1/2 gap-8">
|
||||
<span class="image max-md:hidden">
|
||||
<img class="w-[160px]" src="{$product.cover.medium.url}" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-9 details">
|
||||
<div class="flex-1 md:pr-48 pt-4">
|
||||
{if $add_product_link}<a href="{$product.url}" target="_blank">{/if}
|
||||
<span>{$product.name}</span>
|
||||
<span class="font-semibold text-lg">{$product.name}</span>
|
||||
{if $add_product_link}</a>{/if}
|
||||
{if is_array($product.customizations) && $product.customizations|count}
|
||||
{foreach from=$product.customizations item="customization"}
|
||||
|
@ -87,50 +85,61 @@
|
|||
{/if}
|
||||
{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 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>
|
||||
{/foreach}
|
||||
|
||||
<hr>
|
||||
|
||||
<table>
|
||||
<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}
|
||||
<tr>
|
||||
<td>{$subtotal.label}</td>
|
||||
<td>{if 'discount' == $subtotal.type}- {/if}{$subtotal.value}</td>
|
||||
</tr>
|
||||
<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}
|
||||
|
||||
{if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
|
||||
<tr>
|
||||
<td><span class="text-uppercase">{$totals.total.label} {$labels.tax_short}</span></td>
|
||||
<td>{$totals.total.value}</td>
|
||||
</tr>
|
||||
<tr class="total-value font-weight-bold">
|
||||
<td><span class="text-uppercase">{$totals.total_including_tax.label}</span></td>
|
||||
<td>{$totals.total_including_tax.value}</td>
|
||||
</tr>
|
||||
{else}
|
||||
<tr class="total-value font-weight-bold">
|
||||
<td><span class="text-uppercase">{$totals.total.label} {if $configuration.taxes_enabled}{$labels.tax_short}{/if}</span></td>
|
||||
<td>{$totals.total.value}</td>
|
||||
</tr>
|
||||
<span class="font-semibold">{$totals.total.label} {$labels.tax_short}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex flex-col items-end md:pr-4 gap-2">
|
||||
{foreach $subtotals as $subtotal}
|
||||
{if $subtotal.type !== 'tax' && $subtotal.label !== null}
|
||||
<span>{if 'discount' == $subtotal.type}- {/if}{$subtotal.value}</span>
|
||||
{/if}
|
||||
{/foreach}
|
||||
{if $subtotals.tax.label !== null}
|
||||
<tr class="sub taxes">
|
||||
<td><span class="label">{l s='%label%:' sprintf=['%label%' => $subtotals.tax.label] d='Shop.Theme.Global'}</span> <span class="value">{$subtotals.tax.value}</span></td>
|
||||
</tr>
|
||||
<span>{$subtotals.tax.value}</span>
|
||||
{/if}
|
||||
</table>
|
||||
{if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
|
||||
<span class="">{$totals.total.value}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full flex">
|
||||
{if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
|
||||
<span class="text-lg font-semibold w-full bg-gray-200 md:pl-4">
|
||||
{$totals.total_including_tax.label}
|
||||
</span>
|
||||
{else}
|
||||
<span class="text-lg font-semibold w-full md:pl-4">{$totals.total.label} {if $configuration.taxes_enabled}{$labels.tax_short}{/if}</span>
|
||||
{/if}
|
||||
{if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
|
||||
<span class="text-lg font-semibold bg-gray-200 md:pr-4">{$totals.total_including_tax.value}</span>
|
||||
{else}
|
||||
<span class="text-lg font-semibold md:pl-4">{$totals.total.value}</span>
|
||||
{/if}
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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"></i>{l s='add new address' d='Shop.Theme.Actions'}</a>
|
||||
</p>
|
||||
|
||||
<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}
|
||||
<p>
|
||||
<a data-link-action="different-invoice-address" href="{$use_different_address_url}">
|
||||
<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}
|
||||
|
||||
</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"></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}">
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
{extends file='checkout/_partials/steps/checkout-step.tpl'}
|
||||
|
||||
{block name='step_content'}
|
||||
{if !$step_is_complete}
|
||||
{if $customer.is_logged && !$customer.is_guest}
|
||||
<div class="flex flex-col">
|
||||
<span class="identity">
|
||||
|
@ -66,6 +67,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{**
|
||||
|
|
|
@ -1,18 +1,19 @@
|
|||
{extends file='page.tpl'}
|
||||
|
||||
{block name='page_content_container' prepend}
|
||||
<section id="content-hook_order_confirmation" class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<section id="content-hook_order_confirmation" class="card w-full">
|
||||
<div class="card-block w-full">
|
||||
<div class="w-full flex">
|
||||
<div class="w-full p-8 flex flex-col gap-2 border border-gray-600">
|
||||
|
||||
{block name='order_confirmation_header'}
|
||||
<h3 class="h1 card-title">
|
||||
<i class="material-icons rtl-no-flip done"></i>{l s='Your order is confirmed' d='Shop.Theme.Checkout'}
|
||||
</h3>
|
||||
<div class="h1 card-title flex items-center gap-4 text-2xl">
|
||||
<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>
|
||||
{l s='Your order is confirmed.' d='Shop.Theme.Checkout'}
|
||||
</div>
|
||||
{/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]}
|
||||
{if $order.details.invoice_url}
|
||||
{* [1][/1] is for a HTML tag. *}
|
||||
|
@ -25,7 +26,7 @@
|
|||
]
|
||||
}
|
||||
{/if}
|
||||
</p>
|
||||
</span>
|
||||
|
||||
{block name='hook_order_confirmation'}
|
||||
{$HOOK_ORDER_CONFIRMATION nofilter}
|
||||
|
@ -38,10 +39,8 @@
|
|||
{/block}
|
||||
|
||||
{block name='page_content_container'}
|
||||
<section id="content" class="page-content page-order-confirmation card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
|
||||
<section id="content" class="page-content page-order-confirmation card w-full">
|
||||
<div class="flex flex-col w-full gap-4 mt-8">
|
||||
{block name='order_confirmation_table'}
|
||||
{include
|
||||
file='checkout/_partials/order-confirmation-table.tpl'
|
||||
|
@ -54,23 +53,24 @@
|
|||
{/block}
|
||||
|
||||
{block name='order_details'}
|
||||
<div id="order-details" class="col-md-4">
|
||||
<h3 class="h3 card-title">{l s='Order details' d='Shop.Theme.Checkout'}:</h3>
|
||||
<ul>
|
||||
<li>{l s='Order reference: %reference%' d='Shop.Theme.Checkout' sprintf=['%reference%' => $order.details.reference]}</li>
|
||||
<li>{l s='Payment method: %method%' d='Shop.Theme.Checkout' sprintf=['%method%' => $order.details.payment]}</li>
|
||||
{if !$order.details.is_virtual}
|
||||
<li>
|
||||
{l s='Shipping method: %method%' d='Shop.Theme.Checkout' sprintf=['%method%' => $order.carrier.name]}<br>
|
||||
<em>{$order.carrier.delay}</em>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
<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="text-lg font-semibold">{l s='Order details' d='Shop.Theme.Checkout'}:</h3>
|
||||
<div class="w-full flex">
|
||||
<div class="w-1/2 md:w-2/3 flex flex-col gap-1">
|
||||
<span >Order reference:</span>
|
||||
<span >Payment method:</span>
|
||||
<span >Shipping method:</span>
|
||||
</div>
|
||||
<div class="w-1/2 md:w-1/3 flex flex-col items-end gap-1">
|
||||
<span>{$order.details.reference}</span>
|
||||
<span>{$order.details.payment}</span>
|
||||
<span>{$order.carrier.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{block name='hook_payment_return'}
|
||||
|
@ -79,7 +79,6 @@
|
|||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{$HOOK_PAYMENT_RETURN nofilter}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -103,7 +102,7 @@
|
|||
{/block}
|
||||
|
||||
{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'}
|
||||
</section>
|
||||
{/block}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
<h6 class='text-lg'>{l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}</h6>
|
||||
|
||||
{if $orders}
|
||||
<table class="mt-2 w-full">
|
||||
<table class="mt-2 w-full border-separate border-spacing-x-0 border-spacing-y-[12px]">
|
||||
<thead class="thead-default">
|
||||
<tr>
|
||||
<th>{l s='Order reference' d='Shop.Theme.Checkout'}</th>
|
||||
|
|
Loading…
Reference in New Issue