frontend: integrate recommmendationservice

Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com>
This commit is contained in:
Ahmet Alp Balkan 2018-06-26 14:19:22 -07:00 committed by Simon Zeltser
parent 9889e4904d
commit 400d51a9fe
7 changed files with 99 additions and 17 deletions

View file

@ -14,8 +14,8 @@
{{ range $.items }}
<div class="row pt-2 mb-2">
<div class="col text-right">
<img class="img-fluid" style="width: auto; max-height: 60px;"
src="{{.Item.Picture}}" />
<a href="/product/{{.Item.Id}}"><img class="img-fluid" style="width: auto; max-height: 60px;"
src="{{.Item.Picture}}" /></a>
</div>
<div class="col align-middle">
<strong>{{.Item.Name}}</strong><br/>
@ -45,6 +45,11 @@
</div>
{{ end }}
{{ if $.recommendations}}
<hr/>
{{ template "recommendations" $.recommendations }}
{{ end }}
</div>
</div>
</main>

View file

@ -1,7 +1,6 @@
{{ 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>
session-id: {{$.session_id}}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<small class="text-muted mx-auto">This is a demo application.</small>
</body>
</html>
{{ end }}

View file

@ -6,7 +6,7 @@
<div class="container bg-light py-3 px-lg-5 py-lg-5">
<div class="row">
<div class="col-12 col-lg-5">
<img class="img-fluid" style="width: 100%;"
<img class="img-fluid border" style="width: 100%;"
src="{{$.product.Item.Picture}}" />
</div>
<div class="col-12 col-lg-7">
@ -43,6 +43,10 @@
</div>
</div>
{{ if $.recommendations}}
<hr/>
{{ template "recommendations" $.recommendations }}
{{ end }}
</div>
</div>

View file

@ -0,0 +1,21 @@
{{ define "recommendations" }}
<h5 class="text-muted">Similar products</h5>
<div class="row">
{{range . }}
<div class="col-3">
<div class="card mb-3 box-shadow">
<a href="/product/{{.Id}}">
<img class="card-img-top border-bottom" alt =""
style="width: 100%; height: auto;"
src="{{.Picture}}">
</a>
<div class="card-body text-center py-2">
<small class="card-title text-muted">
{{ .Name }}
</small>
</div>
</div>
</div>
{{ end }}
</div>
{{ end }}