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 (
|
||||
homeTemplate = template.Must(template.ParseFiles("templates/home.html"))
|
||||
templates = template.Must(template.ParseGlob("templates/*.html"))
|
||||
)
|
||||
|
||||
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}
|
||||
}
|
||||
|
||||
if err := homeTemplate.Execute(w, map[string]interface{}{
|
||||
if err := templates.ExecuteTemplate(w, "home", map[string]interface{}{
|
||||
"user_currency": currentCurrency(r),
|
||||
"currencies": currencies,
|
||||
"products": ps,
|
||||
|
|
|
|||
|
|
@ -65,7 +65,9 @@ func main() {
|
|||
r.HandleFunc("/", refreshCookies(
|
||||
ensureSessionID(
|
||||
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).
|
||||
Methods(http.MethodGet)
|
||||
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>
|
||||
<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>
|
||||
{{ define "home" }}
|
||||
|
||||
<form method="post" action="/setCurrency" id="currencySelector">
|
||||
<select name="currency_code"
|
||||
onchange="document.getElementById('currencySelector').submit()">
|
||||
{{ range $.currencies }}
|
||||
<option {{ if (eq . $.user_currency)}}selected="selected"{{end}}>{{.}}</option>
|
||||
{{ end}}
|
||||
</select>
|
||||
</form>
|
||||
{{ template "header" . }}
|
||||
<main role="main">
|
||||
<section class="jumbotron text-center mb-0">
|
||||
<div class="container">
|
||||
<h1 class="jumbotron-heading">
|
||||
One-stop for Hipster Fashion & Style Online
|
||||
</h1>
|
||||
<p class="lead text-muted">
|
||||
Tired of mainstream fashion ideas, popular trends and
|
||||
societal norms? This line of lifestyle products will help
|
||||
you catch up with the hipster trend and express your
|
||||
personal style. Start shopping hip and vintage items now!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p>{{ len $.products }} products</p>
|
||||
{{range $.products }}
|
||||
<p>{{.Item.Name}} -- <{{.Price}}></p>
|
||||
{{end}}
|
||||
</body>
|
||||
</html>
|
||||
<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