343 lines
16 KiB
Plaintext
343 lines
16 KiB
Plaintext
{% extends "a3a/a3a1/_master.nimja" %}
|
||
|
||
{% block content %}
|
||
<body>
|
||
|
||
<div class="site-wrap">
|
||
<header class="site-navbar" role="banner">
|
||
<div class="site-navbar-top">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
|
||
<div class="col-6 col-md-4 order-2 order-md-1 site-search-icon text-left">
|
||
<form action="" class="site-block-top-search">
|
||
<span class="icon icon-search2"></span>
|
||
<input type="text" class="form-control border-0" placeholder="Search">
|
||
</form>
|
||
</div>
|
||
|
||
<div class="col-12 mb-3 mb-md-0 col-md-4 order-1 order-md-2 text-center">
|
||
<div class="site-logo">
|
||
<a href="/" class="js-logo-clone">Shoppers</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-6 col-md-4 order-3 order-md-3 text-right">
|
||
<div class="site-top-icons">
|
||
<ul>
|
||
<li><a href="#"><span class="icon icon-person"></span></a></li>
|
||
<li><a href="#"><span class="icon icon-heart-o"></span></a></li>
|
||
<li>
|
||
<a href="/cart" class="site-cart">
|
||
<span class="icon icon-shopping_cart"></span>
|
||
<span class="count">2</span>
|
||
</a>
|
||
</li>
|
||
<li class="d-inline-block d-md-none ml-md-0"><a href="#" class="site-menu-toggle js-menu-toggle"><span class="icon-menu"></span></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<nav class="site-navigation text-right text-md-center" role="navigation">
|
||
<div class="container">
|
||
<ul class="site-menu js-clone-nav d-none d-md-block">
|
||
<li><a href="/">Home</a></li>
|
||
<li><a href="/about">About</a></li>
|
||
<li><a href="/shop">Shop</a></li>
|
||
<li><a href="#">Catalogue</a></li>
|
||
<li><a href="#">New Arrivals</a></li>
|
||
<li><a href="/contact">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<div class="bg-light py-3">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12 mb-0"><a href="/">Home</a> <span class="mx-2 mb-0">/</span> <a href="/cart">Cart</a> <span class="mx-2 mb-0">/</span> <strong class="text-black">Checkout</strong></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="site-section">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-md-12">
|
||
<div class="border p-4 rounded" role="alert">
|
||
Returning customer? <a href="/login">Click here</a> to login
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6 mb-5 mb-md-0">
|
||
<h2 class="h3 mb-3 text-black">Billing Details</h2>
|
||
<div class="p-3 p-lg-5 border">
|
||
<div class="form-group">
|
||
<label for="c_country" class="text-black">Country <span class="text-danger">*</span></label>
|
||
<select id="c_country" class="form-control">
|
||
<option value="1">Select a country</option>
|
||
<option value="2">bangladesh</option>
|
||
<option value="3">Algeria</option>
|
||
<option value="4">Afghanistan</option>
|
||
<option value="5">Ghana</option>
|
||
<option value="6">Albania</option>
|
||
<option value="7">Bahrain</option>
|
||
<option value="8">Colombia</option>
|
||
<option value="9">Dominican Republic</option>
|
||
<option value="10">India</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group row">
|
||
<div class="col-md-6">
|
||
<label for="c_fname" class="text-black">First Name <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_fname" name="c_fname">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="c_lname" class="text-black">Last Name <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_lname" name="c_lname">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-12">
|
||
<label for="c_companyname" class="text-black">Company Name </label>
|
||
<input type="text" class="form-control" id="c_companyname" name="c_companyname">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-12">
|
||
<label for="c_address" class="text-black">Address <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_address" name="c_address" placeholder="Street address">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<input type="text" class="form-control" placeholder="Apartment, suite, unit etc. (optional)">
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-6">
|
||
<label for="c_state_country" class="text-black">State / Country <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_state_country" name="c_state_country">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="c_postal_zip" class="text-black">Posta / Zip <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_postal_zip" name="c_postal_zip">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row mb-5">
|
||
<div class="col-md-6">
|
||
<label for="c_email_address" class="text-black">Email Address <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_email_address" name="c_email_address">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="c_phone" class="text-black">Phone <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_phone" name="c_phone" placeholder="Phone Number">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="c_create_account" class="text-black" data-toggle="collapse" href="#create_an_account" role="button" aria-expanded="false" aria-controls="create_an_account"><input type="checkbox" value="1" id="c_create_account"> Create an account?</label>
|
||
<div class="collapse" id="create_an_account">
|
||
<div class="py-2">
|
||
<p class="mb-3">Create an account by entering the information below. If you are a returning customer please login at the top of the page.</p>
|
||
<div class="form-group">
|
||
<label for="c_account_password" class="text-black">Account Password</label>
|
||
<input type="email" class="form-control" id="c_account_password" name="c_account_password" placeholder="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="form-group">
|
||
<label for="c_ship_different_address" class="text-black" data-toggle="collapse" href="#ship_different_address" role="button" aria-expanded="false" aria-controls="ship_different_address"><input type="checkbox" value="1" id="c_ship_different_address"> Ship To A Different Address?</label>
|
||
<div class="collapse" id="ship_different_address">
|
||
<div class="py-2">
|
||
|
||
<div class="form-group">
|
||
<label for="c_diff_country" class="text-black">Country <span class="text-danger">*</span></label>
|
||
<select id="c_diff_country" class="form-control">
|
||
<option value="1">Select a country</option>
|
||
<option value="2">bangladesh</option>
|
||
<option value="3">Algeria</option>
|
||
<option value="4">Afghanistan</option>
|
||
<option value="5">Ghana</option>
|
||
<option value="6">Albania</option>
|
||
<option value="7">Bahrain</option>
|
||
<option value="8">Colombia</option>
|
||
<option value="9">Dominican Republic</option>
|
||
<option value="10">India</option>
|
||
</select>
|
||
</div>
|
||
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-6">
|
||
<label for="c_diff_fname" class="text-black">First Name <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_fname" name="c_diff_fname">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="c_diff_lname" class="text-black">Last Name <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_lname" name="c_diff_lname">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-12">
|
||
<label for="c_diff_companyname" class="text-black">Company Name </label>
|
||
<input type="text" class="form-control" id="c_diff_companyname" name="c_diff_companyname">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-12">
|
||
<label for="c_diff_address" class="text-black">Address <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_address" name="c_diff_address" placeholder="Street address">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<input type="text" class="form-control" placeholder="Apartment, suite, unit etc. (optional)">
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-6">
|
||
<label for="c_diff_state_country" class="text-black">State / Country <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_state_country" name="c_diff_state_country">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="c_diff_postal_zip" class="text-black">Posta / Zip <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_postal_zip" name="c_diff_postal_zip">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row mb-5">
|
||
<div class="col-md-6">
|
||
<label for="c_diff_email_address" class="text-black">Email Address <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_email_address" name="c_diff_email_address">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="c_diff_phone" class="text-black">Phone <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_phone" name="c_diff_phone" placeholder="Phone Number">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="c_order_notes" class="text-black">Order Notes</label>
|
||
<textarea name="c_order_notes" id="c_order_notes" cols="30" rows="5" class="form-control" placeholder="Write your notes here..."></textarea>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
|
||
<div class="row mb-5">
|
||
<div class="col-md-12">
|
||
<h2 class="h3 mb-3 text-black">Coupon Code</h2>
|
||
<div class="p-3 p-lg-5 border">
|
||
|
||
<label for="c_code" class="text-black mb-3">Enter your coupon code if you have one</label>
|
||
<div class="input-group w-75">
|
||
<input type="text" class="form-control" id="c_code" placeholder="Coupon Code" aria-label="Coupon Code" aria-describedby="button-addon2">
|
||
<div class="input-group-append">
|
||
<button class="btn btn-primary btn-sm" type="button" id="button-addon2">Apply</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-5">
|
||
<div class="col-md-12">
|
||
<h2 class="h3 mb-3 text-black">Your Order</h2>
|
||
<div class="p-3 p-lg-5 border">
|
||
<table class="table site-block-order-table mb-5">
|
||
<thead>
|
||
<th>Product</th>
|
||
<th>Total</th>
|
||
</thead>
|
||
<tbody>
|
||
{% var total = 0.0 %}
|
||
{% if email == "" %}
|
||
<tr>
|
||
<td>{{productName}} <strong class="mx-2">x</strong> {{quantity}}</td>
|
||
<td>₹{{toFloat(quantity)*price}}</td>
|
||
{% total = total + toFloat(quantity)*price %}
|
||
</tr>
|
||
{% else %}
|
||
{% for (id, product) in products.pairs() %}
|
||
<tr>
|
||
<td>{{product.name}} <strong class="mx-2">x</strong> {{toFloat(cart[id].quantity)}}</td>
|
||
<td>₹{{toFloat(cart[id].quantity)*product.price}}</td>
|
||
</tr>
|
||
{% total = total + toFloat(cart[id].quantity)*product.price %}
|
||
{% endfor %}
|
||
{% endif %}
|
||
<tr>
|
||
<td class="text-black font-weight-bold"><strong>Cart Subtotal</strong></td>
|
||
<td class="text-black">₹{{total}}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-black font-weight-bold"><strong>Order Total</strong></td>
|
||
<td class="text-black font-weight-bold"><strong>₹{{total}}</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="border p-3 mb-3">
|
||
<h3 class="h6 mb-0"><a class="d-block" data-toggle="collapse" href="#collapsebank" role="button" aria-expanded="false" aria-controls="collapsebank">Direct Bank Transfer</a></h3>
|
||
|
||
<div class="collapse" id="collapsebank">
|
||
<div class="py-2">
|
||
<p class="mb-0">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border p-3 mb-3">
|
||
<h3 class="h6 mb-0"><a class="d-block" data-toggle="collapse" href="#collapsecheque" role="button" aria-expanded="false" aria-controls="collapsecheque">Cheque Payment</a></h3>
|
||
|
||
<div class="collapse" id="collapsecheque">
|
||
<div class="py-2">
|
||
<p class="mb-0">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border p-3 mb-5">
|
||
<h3 class="h6 mb-0"><a class="d-block" data-toggle="collapse" href="#collapsepaypal" role="button" aria-expanded="false" aria-controls="collapsepaypal">Paypal</a></h3>
|
||
|
||
<div class="collapse" id="collapsepaypal">
|
||
<div class="py-2">
|
||
<p class="mb-0">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<button class="btn btn-primary btn-lg py-3 btn-block" onclick="window.location='/thankyou'">Place Order</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- </form> -->
|
||
</div>
|
||
</div>
|
||
{% endblock %} |