frontend: homepage template showing products
Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com>
This commit is contained in:
Ahmet Alp Balkan
parent
4ccf44582f
commit
6268802ab5
5 changed files with 96 additions and 27 deletions
|
|
@ -13,7 +13,7 @@ import (
|
||||||
)
|
)
|
||||||
|
|
||||||
var (
|
var (
|
||||||
homeTemplate = template.Must(template.ParseFiles("templates/home.html"))
|
templates = template.Must(template.ParseGlob("templates/*.html"))
|
||||||
)
|
)
|
||||||
|
|
||||||
func refreshCookies(next http.HandlerFunc) http.HandlerFunc {
|
func refreshCookies(next http.HandlerFunc) http.HandlerFunc {
|
||||||
|
|
@ -83,7 +83,7 @@ func (fe *frontendServer) homeHandler(w http.ResponseWriter, r *http.Request) {
|
||||||
ps[i] = productView{p, price}
|
ps[i] = productView{p, price}
|
||||||
}
|
}
|
||||||
|
|
||||||
if err := homeTemplate.Execute(w, map[string]interface{}{
|
if err := templates.ExecuteTemplate(w, "home", map[string]interface{}{
|
||||||
"user_currency": currentCurrency(r),
|
"user_currency": currentCurrency(r),
|
||||||
"currencies": currencies,
|
"currencies": currencies,
|
||||||
"products": ps,
|
"products": ps,
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,9 @@ func main() {
|
||||||
r.HandleFunc("/", refreshCookies(
|
r.HandleFunc("/", refreshCookies(
|
||||||
ensureSessionID(
|
ensureSessionID(
|
||||||
svc.homeHandler))).
|
svc.homeHandler))).
|
||||||
Methods(http.MethodGet)
|
Methods(http.MethodGet, http.MethodHead)
|
||||||
|
r.PathPrefix("/static/").Handler(http.StripPrefix("/static/",
|
||||||
|
http.FileServer(http.Dir("./static/"))))
|
||||||
r.HandleFunc("/logout", svc.logoutHandler).
|
r.HandleFunc("/logout", svc.logoutHandler).
|
||||||
Methods(http.MethodGet)
|
Methods(http.MethodGet)
|
||||||
r.HandleFunc("/setCurrency", refreshCookies(
|
r.HandleFunc("/setCurrency", refreshCookies(
|
||||||
|
|
|
||||||
5
src/frontend/templates/footer.html
Normal file
5
src/frontend/templates/footer.html
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{{ define "footer" }}
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
{{ end }}
|
||||||
33
src/frontend/templates/header.html
Normal file
33
src/frontend/templates/header.html
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
{{ define "header" }}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Hipster Shop</title>
|
||||||
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="navbar navbar-dark bg-dark box-shadow">
|
||||||
|
<div class="container d-flex justify-content-between">
|
||||||
|
<a href="/" class="navbar-brand d-flex align-items-center">
|
||||||
|
Hipster Shop
|
||||||
|
</a>
|
||||||
|
<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();">
|
||||||
|
{{range $.currencies}}
|
||||||
|
<option value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
|
||||||
|
{{end}}
|
||||||
|
</select>
|
||||||
|
<a class="btn btn-primary ml-1" href="/cart" role="button">View Cart</a>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
{{end}}
|
||||||
|
|
@ -1,25 +1,54 @@
|
||||||
<!DOCTYPE html>
|
{{ define "home" }}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
||||||
<title>Hipster Shop</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<form method="post" action="/setCurrency" id="currencySelector">
|
{{ template "header" . }}
|
||||||
<select name="currency_code"
|
<main role="main">
|
||||||
onchange="document.getElementById('currencySelector').submit()">
|
<section class="jumbotron text-center mb-0">
|
||||||
{{ range $.currencies }}
|
<div class="container">
|
||||||
<option {{ if (eq . $.user_currency)}}selected="selected"{{end}}>{{.}}</option>
|
<h1 class="jumbotron-heading">
|
||||||
{{ end}}
|
One-stop for Hipster Fashion & Style Online
|
||||||
</select>
|
</h1>
|
||||||
</form>
|
<p class="lead text-muted">
|
||||||
|
Tired of mainstream fashion ideas, popular trends and
|
||||||
<p>{{ len $.products }} products</p>
|
societal norms? This line of lifestyle products will help
|
||||||
{{range $.products }}
|
you catch up with the hipster trend and express your
|
||||||
<p>{{.Item.Name}} -- <{{.Price}}></p>
|
personal style. Start shopping hip and vintage items now!
|
||||||
{{end}}
|
</p>
|
||||||
</body>
|
</div>
|
||||||
</html>
|
</section>
|
||||||
|
|
||||||
|
<div class="album py-5 bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
{{ range $.products }}
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="card mb-4 box-shadow">
|
||||||
|
<img class="card-img-top" alt =""
|
||||||
|
style="width: auto; height: 225px"
|
||||||
|
src="{{.Item.Picture}}">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">
|
||||||
|
{{ .Item.Name }}
|
||||||
|
</h5>
|
||||||
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-sm btn-outline-secondary">Buy</button>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted">
|
||||||
|
{{.Price.CurrencyCode}}
|
||||||
|
<strong>{{.Price.Amount.Decimal}}.{{.Price.Amount.Fractional}}
|
||||||
|
{{- if lt .Price.Amount.Fractional 10}}0{{end}}
|
||||||
|
</strong>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{{ template "footer" . }}
|
||||||
|
|
||||||
|
{{ end }}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue