ac76a206c1
Role Form should be use on a region of the document that represents a collection of form-associated elements. <div role=”form”></div> GOOD <form role=”form”></form> BAD
357 lines
17 KiB
HTML
357 lines
17 KiB
HTML
{extends file="layout.tpl"}
|
|
|
|
{* Security *}
|
|
{block name="no-return-functions" prepend}
|
|
{check_auth context="front" role="CUSTOMER" login_tpl="login"}
|
|
{check_cart_not_empty}
|
|
{check_valid_delivery}
|
|
{/block}
|
|
|
|
{* Body Class *}
|
|
{block name="body-class"}page-order-invoice{/block}
|
|
|
|
{* Breadcrumb *}
|
|
{block name='no-return-functions' append}
|
|
{$breadcrumbs = [
|
|
['title' => {intl l="Cart"}, 'url'=>{url path="/cart"}],
|
|
['title' => {intl l="My order"}, 'url'=>{url path="/order/invoice"}]
|
|
]}
|
|
{/block}
|
|
|
|
|
|
{block name="main-content"}
|
|
<div class="main">
|
|
<article class="col-main" role="main" aria-labelledby="main-label">
|
|
|
|
<h1 id="main-label" class="page-header">{intl l="Your Cart"}</h1>
|
|
|
|
{include file="misc/checkout-progress.tpl" step="invoice"}
|
|
|
|
{form name="thelia.order.coupon"}
|
|
|
|
<form id="form-coupon" action="{url path="/order/coupon"}" method="post" {form_enctype form=$form}>
|
|
|
|
{form_hidden_fields form=$form}
|
|
|
|
{if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}
|
|
|
|
<table class="table table-cart">
|
|
<colgroup>
|
|
<col width="150">
|
|
<col>
|
|
<col width="200">
|
|
<col width="250">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th class="image"> </th>
|
|
<th class="product">
|
|
<span class="hidden-xs">{intl l="Product Name"}</span>
|
|
<span class="visible-xs">{intl l="Name"}</span>
|
|
</th>
|
|
<th class="unitprice">
|
|
<span class="hidden-xs">{intl l="Unit Price"}</span>
|
|
<span class="visible-xs">{intl l="Price"}</span>
|
|
</th>
|
|
<th class="qty">
|
|
<span class="hidden-xs">{intl l="Quantity"}</span>
|
|
<span class="visible-xs">{intl l="Qty"}</span>
|
|
</th>
|
|
<th class="subprice">
|
|
<span class="hidden-xs">{intl l="Total"}</span>
|
|
<span class="visible-xs">{intl l="Total"}</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
{loop type="cart" name="cartloop"}
|
|
<tr>
|
|
<td class="image">
|
|
|
|
{assign "cart_count" $LOOP_COUNT}
|
|
{ifloop rel='product-image'}
|
|
{loop type="image" name="product-image" product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
|
|
<img src="{$IMAGE_URL}" alt="Product #{$cart_count}">
|
|
{/loop}
|
|
{/ifloop}
|
|
{elseloop rel="product-image"}
|
|
{images file='assets/img/product/1/118x85.png'}<img itemprop="image" src="{$asset_url}" alt="Product #{$cart_count}">{/images}
|
|
{/elseloop}
|
|
</td>
|
|
<td class="product" >
|
|
<h3 class="name">
|
|
{$TITLE}
|
|
</h3>
|
|
<div class="product-options">
|
|
<dl class="dl-horizontal">
|
|
<dt>{intl l="Available"} :</dt>
|
|
{if $STOCK > 0}
|
|
<dd>{intl l="In Stock"}</dd>
|
|
{else}
|
|
<dd>{intl l="Out of Stock"}</dd>
|
|
{/if}
|
|
<dt>{intl l="No."}</dt>
|
|
<dd>{$REF}</dd>
|
|
{loop type="attribute_combination" name="product_options" product_sale_elements="$PRODUCT_SALE_ELEMENTS_ID"}
|
|
<dt>{$ATTRIBUTE_TITLE}</dt>
|
|
<dd>{$ATTRIBUTE_AVAILABILITY_TITLE}</dd>
|
|
{/loop}
|
|
</dl>
|
|
</div>
|
|
</td>
|
|
<td class="unitprice">
|
|
{if $IS_PROMO == 1}
|
|
{assign "real_price" $PROMO_TAXED_PRICE}
|
|
<div class="special-price"><span class="price">{$PROMO_TAXED_PRICE} {currency attr="symbol"}</span></div>
|
|
<small class="old-price">{intl l="instead of"} <span class="price">{$TAXED_PRICE} {currency attr="symbol"}</span></small>
|
|
{else}
|
|
{assign "real_price" $TAXED_PRICE}
|
|
<div class="special-price"><span class="price">{$TAXED_PRICE} {currency attr="symbol"} </span></div>
|
|
{/if}
|
|
</td>
|
|
<td class="qty">
|
|
<span class="price">{$QUANTITY}</span>
|
|
</td>
|
|
<td class="subprice">
|
|
<span class="price">{$real_price * $QUANTITY} {currency attr="symbol"}</span>
|
|
</td>
|
|
</tr>
|
|
|
|
{/loop}
|
|
|
|
</tbody>
|
|
<tfoot>
|
|
<tr >
|
|
<td rowspan="3" colspan="3" class="empty"> </td>
|
|
<th class="shipping">{intl l="Shipping Tax"}</th>
|
|
<td class="shipping">
|
|
<div class="shipping-price">
|
|
<span class="price">{order attr="postage"} {currency attr="symbol"}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr >
|
|
<th class="coupon"><label for="coupon">{intl l="You may have a coupon ?"}</label></th>
|
|
<td class="coupon">
|
|
{form_field form=$form field='coupon-code'}
|
|
<div class="{if $error}has-error{/if}">
|
|
<div class="input-group">
|
|
<label class="control-label sr-only" for="code">{intl l='Code :'}</label>
|
|
<input id="coupon" class="form-control" type="text" name="{$name}" value="{$value}" placeholder="{intl l='Coupon code'}">
|
|
<span class="input-group-btn">
|
|
<button type="submit" class="btn btn-coupon">{intl l="Ok"}</button>
|
|
</span>
|
|
</div>
|
|
{if $error}<span class="help-block">{$message}</span>{/if}
|
|
</div>
|
|
{/form_field}
|
|
<!-- /input-group -->
|
|
</td>
|
|
</tr>
|
|
<tr >
|
|
<th class="total">{intl l="Total"}</th>
|
|
<td class="total">
|
|
<div class="total-price">
|
|
<span class="price">{{cart attr="total_taxed_price"} + {order attr="postage"}} {currency attr="symbol"}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</form>
|
|
{/form}
|
|
{form name="thelia.order.payment"}
|
|
|
|
<form id="form-cart-payment" action="{url path="/order/invoice"}" method="post" {form_enctype form=$form}>
|
|
|
|
{form_hidden_fields form=$form}
|
|
|
|
{if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}
|
|
<div id="cart-address">
|
|
<div class="panel">
|
|
{loop type="address" name="delivery-address" id={order attr="delivery_address"}}
|
|
<div class="panel-heading">{intl l="Delivery address"}</div>
|
|
<div class="panel-body">
|
|
<span class="fn">{loop type="title" name="customer.title.info" id=$TITLE}{$SHORT}{/loop} {$LASTNAME|upper} {$FIRSTNAME|ucwords}</span>
|
|
<span class="org">{$COMPANY}</span>
|
|
<address class="adr">
|
|
<span class="street-address">{$ADDRESS1}</span><br>
|
|
{if $ADDRESS2 != ""}
|
|
<span class="street-address">{$ADDRESS2}</span><br>
|
|
{/if}
|
|
{if $ADDRESS3 != ""}
|
|
<span class="street-address">{$ADDRESS3}</span><br>
|
|
{/if}
|
|
<span class="postal-code">{$ZIPCODE}</span>
|
|
<span class="locality">{$CITY}, <span class="country-name">{loop type="country" name="customer.country.info" id=$COUNTRY}{$TITLE}{/loop}</span></span>
|
|
</address>
|
|
</div>
|
|
{/loop}
|
|
</div>
|
|
|
|
{form_field form=$form field='invoice-address'}
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">{intl l="Billing address"}s</div>
|
|
|
|
{if $error}
|
|
<span class="help-block"><span class="icon-remove"></span> {$message}</span>
|
|
{/if}
|
|
|
|
<div class="panel-body">
|
|
|
|
<table class="col-md-12">
|
|
|
|
{if !$error && $value}
|
|
{assign defaultParam '*'}
|
|
{else}
|
|
{assign defaultParam 'true'}
|
|
{/if}
|
|
{if !$error && $value}
|
|
{assign idParam $value}
|
|
{else}
|
|
{assign idParam '*'}
|
|
{/if}
|
|
{loop type="address" name="invoice-address" default=$defaultParam id=$idParam}
|
|
|
|
<tr>
|
|
<td>
|
|
<span class="fn">{loop type="title" name="customer.title.info" id=$TITLE}{$SHORT}{/loop} {$LASTNAME|upper} {$FIRSTNAME|ucwords}</span>
|
|
<span class="org">{$COMPANY}</span>
|
|
<address class="adr">
|
|
<span class="street-address">{$ADDRESS1}</span><br>
|
|
{if $ADDRESS2 != ""}
|
|
<span class="street-address">{$ADDRESS2}</span><br>
|
|
{/if}
|
|
{if $ADDRESS3 != ""}
|
|
<span class="street-address">{$ADDRESS3}</span><br>
|
|
{/if}
|
|
<span class="postal-code">{$ZIPCODE}</span>
|
|
<span class="locality">{$CITY}, <span class="country-name">{loop type="country" name="customer.country.info" id=$COUNTRY}{$TITLE}{/loop}</span></span>
|
|
</address>
|
|
</td>
|
|
<td>
|
|
<input class="js-invoice-address-selector {if !$error}hidden{/if}" type="radio" name="{$name}" value="{$ID}" {if $value == $ID OR !$error}checked="checked"{/if}>
|
|
</td>
|
|
</tr>
|
|
|
|
{if !$error}
|
|
<tr class="js-change-invoice-address">
|
|
<td colspan="2">
|
|
<a href="#" class="btn btn-change-address">{intl l="Change address"}</a>
|
|
</td>
|
|
</tr>
|
|
{/if}
|
|
|
|
{/loop}
|
|
|
|
{if !$error && $value}
|
|
{assign defaultParam '*'}
|
|
{else}
|
|
{assign defaultParam 'false'}
|
|
{/if}
|
|
{if !$error && $value}
|
|
{assign excludeParam $value}
|
|
{else}
|
|
{assign excludeParam 'none'}
|
|
{/if}
|
|
{loop type="address" name="invoice-address" default=$defaultParam exclude=$excludeParam}
|
|
|
|
<tr class="js-other-invoice-address {if !$error}hidden{/if}">
|
|
<td>
|
|
<span class="fn">{loop type="title" name="customer.title.info" id=$TITLE}{$SHORT}{/loop} {$LASTNAME|upper} {$FIRSTNAME|ucwords}</span>
|
|
<span class="org">{$COMPANY}</span>
|
|
<address class="adr">
|
|
<span class="street-address">{$ADDRESS1}</span><br>
|
|
{if $ADDRESS2 != ""}
|
|
<span class="street-address">{$ADDRESS2}</span><br>
|
|
{/if}
|
|
{if $ADDRESS3 != ""}
|
|
<span class="street-address">{$ADDRESS3}</span><br>
|
|
{/if}
|
|
<span class="postal-code">{$ZIPCODE}</span>
|
|
<span class="locality">{$CITY}, <span class="country-name">{loop type="country" name="customer.country.info" id=$COUNTRY}{$TITLE}{/loop}</span></span>
|
|
</address>
|
|
</td>
|
|
<td>
|
|
<input class="js-invoice-address-selector {if !$error}hidden{/if}" type="radio" name="{$name}" value="{$ID}" {if $value == $ID}checked="checked"{/if}>
|
|
</td>
|
|
</tr>
|
|
|
|
{/loop}
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/form_field}
|
|
|
|
{form_field form=$form field='payment-module'}
|
|
|
|
<div id="payment-method" class="panel">
|
|
<div class="panel-heading">{intl l="Choose your payment method"}</div>
|
|
|
|
{if $error}
|
|
<span class="help-block"><span class="icon-remove"></span> {$message}</span>
|
|
{/if}
|
|
|
|
<div class="panel-body">
|
|
<ul class="list-payment">
|
|
|
|
{loop type="payment" name="payments" force_return="true"}
|
|
|
|
{assign "paymentModuleId" $ID}
|
|
|
|
{loop type="image" name="paymentspicture" source="module" source_id=$ID force_return="true" width="100" height="72"}
|
|
|
|
<li>
|
|
<div class="radio">
|
|
<label for="payment_{$paymentModuleId}_{$ID}">
|
|
<input type="radio" name="{$name}" id="payment_{$paymentModuleId}_{$ID}" value="{$paymentModuleId}">
|
|
<img src="{$IMAGE_URL}">
|
|
</label>
|
|
</div>
|
|
</li>
|
|
|
|
{/loop}
|
|
|
|
{/loop}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/form_field}
|
|
|
|
<a href="{url path="/order/delivery"}" role="button" class="btn btn-back"><span>{intl l="Back"}</span></a>
|
|
<button type="submit" class="btn btn-checkout-next"><span>{intl l="Next Step"}</span></button>
|
|
</form>
|
|
|
|
{/form}
|
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
</div>
|
|
{/block}
|
|
|
|
{block name="javascript-initialization"}
|
|
<script type="text/javascript">
|
|
jQuery(function($order) {
|
|
$order('.js-change-invoice-address').on('click', 'a', function(e) {
|
|
e.preventDefault();
|
|
|
|
$order('.js-other-invoice-address').removeClass('hidden');
|
|
$order('.js-invoice-address-selector').removeClass('hidden');
|
|
|
|
$order('#js-invoice-address-default-selector').unbind().remove();
|
|
$order('.js-change-invoice-address').unbind().remove();
|
|
});
|
|
});
|
|
</script>
|
|
{/block} |