cart integration
This commit is contained in:
Etienne Roudeix
@@ -4,7 +4,7 @@
|
||||
<nav class="nav-breadcrumb" role="navigation" aria-labelledby="breadcrumb-label">
|
||||
<strong id="breadcrumb-label">You are here: </strong>
|
||||
<ul class="breadcrumb" itemprop="breadcrumb">
|
||||
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="index.php" itemprop="url"><span itemprop="title">Home</span></a></li>
|
||||
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{navigate to="index"}" itemprop="url"><span itemprop="title">Home</span></a></li>
|
||||
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="active"><span itemprop="title">Cart</span></li>
|
||||
</ul>
|
||||
</nav><!-- /.nav-breadcrumb -->
|
||||
@@ -23,112 +23,117 @@
|
||||
<a href="cart-step4.php" role="button" class="btn btn-step disabled"><span class="step-nb">4</span> <span class="step-label">Secure payment</span></a>
|
||||
</div>
|
||||
|
||||
<form id="form-cart" action="cart-step2.php" method="post" role="form">
|
||||
<table class="table table-cart">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="image"> </th>
|
||||
<th class="product">
|
||||
<span class="hidden-xs">Product Name</span>
|
||||
<span class="visible-xs">Name</span>
|
||||
</th>
|
||||
<th class="unitprice">
|
||||
<span class="hidden-xs">Unit Price</span>
|
||||
<span class="visible-xs">Price</span>
|
||||
</th>
|
||||
<th class="qty">
|
||||
<span class="hidden-xs">Quantity</span>
|
||||
<span class="visible-xs">Qty</span>
|
||||
</th>
|
||||
<th class="subprice">
|
||||
<span class="hidden-xs">Total <abbr title="Tax Inclusive">TTC</abbr></span>
|
||||
<span class="visible-xs">Total</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<table class="table table-cart">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="image"> </th>
|
||||
<th class="product">
|
||||
<span class="hidden-xs">Product Name</span>
|
||||
<span class="visible-xs">Name</span>
|
||||
</th>
|
||||
<th class="unitprice">
|
||||
<span class="hidden-xs">Unit Price</span>
|
||||
<span class="visible-xs">Price</span>
|
||||
</th>
|
||||
<th class="qty">
|
||||
<span class="hidden-xs">Quantity</span>
|
||||
<span class="visible-xs">Qty</span>
|
||||
</th>
|
||||
<th class="subprice">
|
||||
<span class="hidden-xs">Total <abbr title="Tax Inclusive">TTC</abbr></span>
|
||||
<span class="visible-xs">Total</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{loop type="cart" name="cartloop"}
|
||||
{loop type="cart" name="cartloop"}
|
||||
|
||||
<tr>
|
||||
<td class="image">
|
||||
<a href="{$PRODUCT_URL}" class="thumbnail">
|
||||
{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}"></a>
|
||||
{/loop}
|
||||
{/ifloop}
|
||||
{elseloop rel="product-image"}
|
||||
{images file='assets/img/product/1/118x85.png'}<img itemprop="image" src="{$asset_url}" alt="Product #{$LOOP_COUNT}">{/images}
|
||||
{/elseloop}
|
||||
</td>
|
||||
<td class="product" >
|
||||
<h3 class="name"><a href="product-details.php">
|
||||
Product #{$LOOP_COUNT}
|
||||
</a></h3>
|
||||
<div class="product-options">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Available :</dt>
|
||||
<dd>In Stock</dd>
|
||||
<dt>No.</dt>
|
||||
<dd>{$REF}</dd>
|
||||
{*<dt>Select Size</dt>
|
||||
<dd>Large</dd>
|
||||
<dt>Select Delivery Date</dt>
|
||||
<dd>Jan 2, 2013</dd>
|
||||
<dt>Additional Option</dt>
|
||||
<dd>Option 1</dd>*}
|
||||
</dl>
|
||||
</div>
|
||||
<a href="{url path="/cart/delete/{$ITEM_ID}"}" class="btn btn-remove">Remove</a>
|
||||
</td>
|
||||
<td class="unitprice">
|
||||
{if $IS_PROMO == 1}
|
||||
{assign "real_price" $PROMO_TAXED_PRICE}
|
||||
<div class="special-price"><span class="price">{currency attr="symbol"} {$PROMO_TAXED_PRICE}</span></div>
|
||||
<small class="old-price">instead of <span class="price">{currency attr="symbol"} {$TAXED_PRICE}</span></small>
|
||||
{else}
|
||||
{assign "real_price" $TAXED_PRICE}
|
||||
<div class="special-price"><span class="price">{currency attr="symbol"} {$TAXED_PRICE}</span></div>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="qty">
|
||||
<div class="form-group group-qty">
|
||||
<input type="number" name="quantity[]" id="quantity_<?php echo $count; ?>" class="form-control" value="{$QUANTITY}" min="0" required>
|
||||
</div>
|
||||
</td>
|
||||
<td class="subprice">
|
||||
<span class="price">{currency attr="symbol"} {$real_price * $QUANTITY}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="image">
|
||||
<a href="{$PRODUCT_URL}" class="thumbnail">
|
||||
{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}"></a>
|
||||
{/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"><a href="product-details.php">
|
||||
Product #{$LOOP_COUNT}
|
||||
</a></h3>
|
||||
<div class="product-options">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Available :</dt>
|
||||
<dd>In Stock</dd>
|
||||
<dt>No.</dt>
|
||||
<dd>{$REF}</dd>
|
||||
{*<dt>Select Size</dt>
|
||||
<dd>Large</dd>
|
||||
<dt>Select Delivery Date</dt>
|
||||
<dd>Jan 2, 2013</dd>
|
||||
<dt>Additional Option</dt>
|
||||
<dd>Option 1</dd>*}
|
||||
</dl>
|
||||
</div>
|
||||
<a href="{url path="/cart/delete/{$ITEM_ID}"}" class="btn btn-remove">Remove</a>
|
||||
</td>
|
||||
<td class="unitprice">
|
||||
{if $IS_PROMO == 1}
|
||||
{assign "real_price" $PROMO_TAXED_PRICE}
|
||||
<div class="special-price"><span class="price">{currency attr="symbol"} {$PROMO_TAXED_PRICE}</span></div>
|
||||
<small class="old-price">instead of <span class="price">{currency attr="symbol"} {$TAXED_PRICE}</span></small>
|
||||
{else}
|
||||
{assign "real_price" $TAXED_PRICE}
|
||||
<div class="special-price"><span class="price">{currency attr="symbol"} {$TAXED_PRICE}</span></div>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="qty">
|
||||
<div class="form-group group-qty">
|
||||
<form action="{url path="/cart/update"}" method="post" role="form">
|
||||
<input type="hidden" name="cart_item" value="{$ITEM_ID}">
|
||||
<select name="quantity" class="form-control js-update-quantity">
|
||||
{for $will=1 to $STOCK}
|
||||
<option {if $QUANTITY == $will}selected="selected"{/if}>{$will}</option>
|
||||
{/for}
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
<td class="subprice">
|
||||
<span class="price">{currency attr="symbol"} {$real_price * $QUANTITY}</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/loop}
|
||||
{/loop}
|
||||
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr >
|
||||
<td colspan="3" class="empty"> </td>
|
||||
<th class="total">Total <abbr title="Tax Inclusive">TTC</abbr></th>
|
||||
<td class="total">
|
||||
<div class="total-price">
|
||||
<span class="price">$200.00</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr >
|
||||
<td colspan="3" class="empty"> </td>
|
||||
<th class="total">Total <abbr title="Tax Inclusive">TTC</abbr></th>
|
||||
<td class="total">
|
||||
<div class="total-price">
|
||||
<span class="price">{currency attr="symbol"} {cart attr="total_taxed_price"}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<a href="{navigate to="index"}" role="button" class="btn btn-continue-shopping"><span>Continue Shopping</span></a>
|
||||
<button type="submit" name="checkout" class="btn btn-checkout"><span>Proceed checkout</span></button>
|
||||
</form>
|
||||
<a href="{navigate to="index"}" role="button" class="btn btn-continue-shopping"><span>Continue Shopping</span></a>
|
||||
<a href="{url path="/cart/billing"}" class="btn btn-checkout">Proceed checkout</a>
|
||||
|
||||
</article>
|
||||
|
||||
@@ -154,6 +159,16 @@
|
||||
</aside><!-- #products-upsell -->
|
||||
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
</div><!-- /.container -->
|
||||
{block name="javascript-initialization"}
|
||||
<script type="text/javascript">
|
||||
jQuery(function($cart) {
|
||||
$cart('.js-update-quantity').on('change', function(e) {
|
||||
var newQuantity = $cart(this).val();
|
||||
|
||||
$cart(this).parent().submit();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
{/block}
|
||||
141
templates/default/cart_billing.html
Normal file
141
templates/default/cart_billing.html
Normal file
@@ -0,0 +1,141 @@
|
||||
{extends file="layout.tpl"}
|
||||
|
||||
{block name="breadcrumb"}
|
||||
<nav class="nav-breadcrumb" role="navigation" aria-labelledby="breadcrumb-label">
|
||||
<strong id="breadcrumb-label">You are here: </strong>
|
||||
<ul class="breadcrumb" itemprop="breadcrumb">
|
||||
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{navigate to="index"}" itemprop="url"><span itemprop="title">Home</span></a></li>
|
||||
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{url path="/cart"}" itemprop="url"><span itemprop="title">Cart</span></a></li>
|
||||
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="active"><span itemprop="title">Billing and delivery</span></li>
|
||||
</ul>
|
||||
</nav><!-- /.nav-breadcrumb -->
|
||||
{/block}
|
||||
|
||||
{block name="main-content"}
|
||||
<div class="main">
|
||||
<article id="cart" class="col-main" role="main" aria-labelledby="main-label">
|
||||
|
||||
<h1 id="main-label" class="page-header">Your Cart</h1>
|
||||
|
||||
<div class="btn-group checkout-progress">
|
||||
<a href="cart.php" role="button" class="btn btn-step"><span class="step-nb">1</span> <span class="step-label">Your Cart</span></a>
|
||||
<a href="cart-step2.php" role="button" class="btn btn-step active"><span class="step-nb">2</span> <span class="step-label">Billing and delivery</span></a>
|
||||
<a href="cart-step3.php" role="button" class="btn btn-step disabled"><span class="step-nb">3</span> <span class="step-label">Check my order</span></a>
|
||||
<a href="cart-step4.php" role="button" class="btn btn-step disabled"><span class="step-nb">4</span> <span class="step-label">Secure payment</span></a>
|
||||
</div>
|
||||
|
||||
<form id="form-cart-delivery" action="cart-step3.php" method="post" role="form">
|
||||
<div id="delivery-address" class="panel">
|
||||
<div class="panel-heading clearfix">
|
||||
<a href="{url path="/address/create"}" class="btn btn-add-address">Add a new address</a>
|
||||
Chose your delivery address
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<table class="table table-address" role="presentation" summary="Address Books">
|
||||
<tbody>
|
||||
|
||||
{loop type="address" name="customer.addresses" customer="current"}
|
||||
|
||||
<tr>
|
||||
<th>
|
||||
<div class="radio">
|
||||
<label for="delivery-address_<?php echo $count; ?>">
|
||||
<input type="radio" name="delivery-address" value"{$ID}">
|
||||
{$LABEL}
|
||||
</label>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<ul class="list-address">
|
||||
<li>
|
||||
<span class="fn">M. DUPONT Jean</span>
|
||||
<span class="org">Agency XY</span>
|
||||
</li>
|
||||
<li>
|
||||
<address class="adr">
|
||||
<span class="street-address">street name of my business</span><br>
|
||||
<span class="postal-code">75000</span>
|
||||
<span class="locality">City, <span class="country-name">Country</span></span>
|
||||
</address>
|
||||
</li>
|
||||
<li>
|
||||
<span class="tel">+33 09 08 07 06 05</span>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<div class="group-btn">
|
||||
<a href="{url path="/address/update/{$ID}"}" class="btn btn-edit-address" data-toggle="tooltip" title="Edit this address"><i class="icon-pencil"></i> <span>{intl l="Edit"}</span></a>
|
||||
{if $DEFAULT != 1}
|
||||
<a href="{url path="/address/delete/{$ID}"}" class="btn btn-remove-address js-remove-address" title="{intl l="Remove this address"}" data-toggle="tooltip"><i class="icon-remove"></i> <span>{intl l="Cancel"}</span></a>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/loop}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="delivery-method" class="panel">
|
||||
<div class="panel-heading">Choose your delivery method</div>
|
||||
<div class="panel-body">
|
||||
<div class="radio">
|
||||
<label for="delivery-method_1">
|
||||
<input type="radio" name="delivery-method" id="delivery-method_1" value="1">
|
||||
<strong>Delivery method #1</strong> / $12.50
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label for="delivery-method_2">
|
||||
<input type="radio" name="delivery-method" id="delivery-method_2" value="2">
|
||||
<strong>Delivery method #2</strong> / $6.00
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="cart.php" role="button" class="btn btn-back"><span>Back</span></a>
|
||||
<button type="submit" class="btn btn-checkout-next"><span>Next Step</span></button>
|
||||
|
||||
</form>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="address-delete-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3>{intl l="Delete address"}</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{intl l="Do you really want to delete this address ?"}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span> {intl l="No"}</a>
|
||||
<a href="#" id="address-delete-link" type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-check"></span> {intl l="Yes"}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/block}
|
||||
|
||||
{block name="javascript-initialization"}
|
||||
<script type="text/javascript">
|
||||
jQuery(function($cart) {
|
||||
|
||||
$cart(".js-remove-address").click(function(e){
|
||||
e.preventDefault();
|
||||
$cart("#address-delete-link").attr("href", $(this).attr("href"));
|
||||
$cart('#address-delete-modal').modal('show');
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
{/block}
|
||||
Reference in New Issue
Block a user