frontend: place order
Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com>
This commit is contained in:
Ahmet Alp Balkan
Simon Zeltser
parent
06321e24f6
commit
0d07d08b4a
6 changed files with 224 additions and 47 deletions
|
|
@ -10,11 +10,22 @@
|
|||
<a class="btn btn-primary" href="/" role="button">Browse Products → </a>
|
||||
{{ else }}
|
||||
|
||||
<h3>{{ len $.items }} item {{- if gt (len $.items) 1}}s{{end}}
|
||||
in your Shopping Cart</h3> <form method="POST" action="/cart/empty">
|
||||
<button class="btn btn-secondary" type="submit">Empty Cart</button>
|
||||
</form>
|
||||
|
||||
<div class="row mb-3 py-2">
|
||||
<div class="col">
|
||||
<h3>{{ len $.items }} item
|
||||
{{- if gt (len $.items) 1}}s{{end}}
|
||||
in your Shopping Cart</h3>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<form method="POST" action="/cart/empty">
|
||||
<button class="btn btn-secondary" type="submit">Empty cart</button>
|
||||
<a class="btn btn-info" href="/" role="button">Browse more products → </a>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
{{ range $.items }}
|
||||
<div class="row pt-2 mb-2">
|
||||
<div class="col text-right">
|
||||
|
|
@ -33,45 +44,97 @@
|
|||
</div>
|
||||
</div>
|
||||
{{ end }} <!-- range $.items-->
|
||||
<div class="row pt-2 my-3">
|
||||
<div class="col text-center">
|
||||
<p class="text-muted my-0">Shipping Cost: <strong>{{ renderMoney .shipping_cost }}</strong></p>
|
||||
Total Cost: <strong>{{ renderMoney .total_cost }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<div class="row py-3 my-2">
|
||||
<div class="col-12 col-lg-8 offset-lg-2">
|
||||
<h3>Prepare to checkout</h3>
|
||||
<form class="needs-validation">
|
||||
<div class="form-row">
|
||||
<div class="col-md-5 mb-3">
|
||||
<label for="street_address_1">Street Address</label>
|
||||
<input type="text" class="form-control" id="street_address_1"
|
||||
value="1600 Amphitheatre Parkway" required>
|
||||
<h3>Checkout</h3>
|
||||
<form action="/cart/checkout" method="POST">
|
||||
<div class="form-row">
|
||||
<div class="col-md-5 mb-4">
|
||||
<label for="email">E-mail Address</label>
|
||||
<input type="email" class="form-control" id="email"
|
||||
name="email" value="someone@example.com" required>
|
||||
</div>
|
||||
<div class="col-md-5 mb-4">
|
||||
<label for="street_address">Street Address</label>
|
||||
<input type="text" class="form-control" name="street_address"
|
||||
id="street_address" value="1600 Amphitheatre Parkway" required>
|
||||
</div>
|
||||
<div class="col-md-2 mb-4">
|
||||
<label for="zip_code">Zip Code</label>
|
||||
<input type="text" class="form-control"
|
||||
name="zip_code" id="zip_code" value="94043" required pattern="\d{4,5}">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-5 mb-3">
|
||||
<label for="street_address_2">Street Address (cont.)</label>
|
||||
<input type="text" class="form-control" id="street_address_2" placeholder="...your address here">
|
||||
<div class="form-row">
|
||||
<div class="col-md-5 mb-3">
|
||||
<label for="city">City</label>
|
||||
<input type="text" class="form-control" name="city" id="city"
|
||||
value="Mountain View" required>
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
<label for="state">State</label>
|
||||
<input type="text" class="form-control" name="state" id="state"
|
||||
value="CA" required>
|
||||
</div>
|
||||
<div class="col-md-5 mb-3">
|
||||
<label for="country">Country</label>
|
||||
<input type="text" class="form-control" id="country"
|
||||
placeholder="Country Name"
|
||||
name="country" value="United States" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
<label for="zip_code">Zip Code</label>
|
||||
<input type="text" class="form-control" id="zip_code" value="94043" required>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="credit_card_number">Credit Card Number</label>
|
||||
<input type="text" class="form-control" id="credit_card_number"
|
||||
name="credit_card_number"
|
||||
placeholder="0000-0000-0000-0000"
|
||||
value="4432-8015-6152-0454"
|
||||
required pattern="\d{4}-\d{4}-\d{4}-\d{4}">
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
<label for="credit_card_expiration_month">Month</label>
|
||||
<select name="credit_card_expiration_month" id="credit_card_expiration_month"
|
||||
class="form-control">
|
||||
<option value="1">January</option>
|
||||
<option value="2">February</option>
|
||||
<option value="3">March</option>
|
||||
<option value="4">April</option>
|
||||
<option value="5">May</option>
|
||||
<option value="6">June</option>
|
||||
<option value="7">July</option>
|
||||
<option value="8">August</option>
|
||||
<option value="9">September</option>
|
||||
<option value="10">October</option>
|
||||
<option value="11">November</option>
|
||||
<option value="12">January</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
<label for="credit_card_expiration_year">Year</label>
|
||||
<select name="credit_card_expiration_year" id="credit_card_expiration_year"
|
||||
class="form-control">
|
||||
{{range $.expiration_years}}<option value="{{.}}">{{.}}</option>{{end}}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
<label for="credit_card_cvv">CVV</label>
|
||||
<input type="text" class="form-control" id="credit_card_cvv"
|
||||
name="credit_card_cvv" value="672" required pattern="\d{3}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="city">City</label>
|
||||
<input type="text" class="form-control" id="city" placeholder="City" value="Mountain View" required>
|
||||
<div class="form-row">
|
||||
<button class="btn btn-primary" type="submit">Place your order →</button>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="state">State</label>
|
||||
<input type="text" class="form-control" id="state" placeholder="State" value="CA" required>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="country">Country</label>
|
||||
<input type="text" class="form-control" id="country" placeholder="Country Name"
|
||||
value="United States" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<a class="btn btn-primary" href="/checkout" role="button">Proceed to Checkout →</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<a href="/" class="navbar-brand d-flex align-items-center">
|
||||
Hipster Shop
|
||||
</a>
|
||||
{{ if $.currencies }}
|
||||
<form class="form-inline ml-auto" method="POST" action="/setCurrency" id="currency_form">
|
||||
<select name="currency_code" class="form-control"
|
||||
onchange="document.getElementById('currency_form').submit();">
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
</select>
|
||||
<a class="btn btn-primary btn-light ml-2" href="/cart" role="button">View Cart ({{$.cart_size}})</a>
|
||||
</form>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
20
src/frontend/templates/order.html
Normal file
20
src/frontend/templates/order.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{{ define "order" }}
|
||||
{{ template "header" . }}
|
||||
|
||||
<main role="main">
|
||||
<div class="py-5">
|
||||
<div class="container bg-light py-3 px-lg-5 py-lg-5">
|
||||
<h3>
|
||||
Your order is complete!
|
||||
</h3>
|
||||
<p>
|
||||
Order Confirmation ID: {{ $.order }}
|
||||
</p>
|
||||
|
||||
{{ template "recommendations" $.recommendations }}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{ template "footer" . }}
|
||||
{{ end }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue