frontend: homepage template showing products

Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com>
This commit is contained in:
Ahmet Alp Balkan 2018-06-25 21:55:09 -07:00
parent 4ccf44582f
commit 6268802ab5
5 changed files with 96 additions and 27 deletions

View file

@ -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,

View file

@ -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(

View 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 }}

View 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}}

View file

@ -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>
<p>{{ len $.products }} products</p>
{{range $.products }}
<p>{{.Item.Name}} -- <{{.Price}}></p>
{{end}}
</body>
</html>
{{ template "header" . }}
<main role="main">
<section class="jumbotron text-center mb-0">
<div class="container">
<h1 class="jumbotron-heading">
One-stop for Hipster Fashion &amp; 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>
<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 }}