frontend: product page
Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com>
This commit is contained in:
parent
8a6be04035
commit
e16172c14a
5 changed files with 116 additions and 13 deletions
|
@ -16,22 +16,26 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<div class="album py-5 bg-light">
|
||||
<div class="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}}">
|
||||
<a href="/product/{{.Item.Id}}">
|
||||
<img class="card-img-top" alt =""
|
||||
style="width: 100%; height: auto;"
|
||||
src="{{.Item.Picture}}">
|
||||
</a>
|
||||
<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>
|
||||
<a href="/product/{{.Item.Id}}">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Buy</button>
|
||||
</a>
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
{{.Price.CurrencyCode}}
|
||||
|
|
52
src/frontend/templates/product.html
Normal file
52
src/frontend/templates/product.html
Normal file
|
@ -0,0 +1,52 @@
|
|||
{{ define "product" }}
|
||||
{{ template "header" . }}
|
||||
|
||||
<main role="main">
|
||||
<div class="py-5">
|
||||
<div class="container bg-light px-lg-5 py-lg-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-5">
|
||||
<img class="img-fluid" style="width: 100%;"
|
||||
src="{{$.product.Item.Picture}}" />
|
||||
</div>
|
||||
<div class="col-12 col-lg-7">
|
||||
<h2>{{$.product.Item.Name}}</h2>
|
||||
|
||||
<p class="text-muted">
|
||||
{{$.product.Price.CurrencyCode}}
|
||||
{{$.product.Price.Amount.Decimal}}.
|
||||
{{- $.product.Price.Amount.Fractional}}{{- if lt $.product.Price.Amount.Fractional 10}}0{{end}}
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<h6>Product Description:</h6>
|
||||
{{$.product.Item.Description}}
|
||||
</p>
|
||||
<hr/>
|
||||
|
||||
<form method="POST" action="/addToCart" class="form-inline text-muted">
|
||||
<input type="hidden" name="product_id" value="{{$.product.Item.Id}}"/>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text" for="quantity">Quantity</label>
|
||||
</div>
|
||||
<select name="quantity" id="quantity" class="custom-select">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-secondary ml-3">Add to Cart</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{ template "footer" . }}
|
||||
{{ end }}
|
Loading…
Add table
Add a link
Reference in a new issue