Rebrand Hipstershop as OnlineBoutique (#328)
* update productcatalog, frontend, readme * revert productcatalog * restore currency logic and ad display * footer cleanup * Resize header image * screenshots * Center align header image in readme * Show platform flag on every page * style fixes * fix currency in UI, remove extra USD * cart bug, fixing * attempt to fix breaking build * fix cart size in handler * replace images * # items in cart is total quantity * Add link to 0.1.4 manifests in readme
This commit is contained in:
Megan O'Keefe
GitHub
parent
5aa38ad5d6
commit
814088f788
47 changed files with 1618 additions and 249 deletions
0
src/frontend/templates/ad.html
Normal file → Executable file
0
src/frontend/templates/ad.html
Normal file → Executable file
90
src/frontend/templates/cart.html
Normal file → Executable file
90
src/frontend/templates/cart.html
Normal file → Executable file
|
|
@ -1,60 +1,64 @@
|
|||
{{ define "cart" }}
|
||||
{{ template "header" . }}
|
||||
|
||||
<main role="main">
|
||||
<div class="py-5">
|
||||
<div class="container bg-light py-3 px-lg-5 py-lg-5">
|
||||
<div {{ with $.platform_css }} class="{{.}}" {{ end }}>
|
||||
<span class="platform-flag">
|
||||
{{$.platform_name}}
|
||||
</span>
|
||||
</div>
|
||||
<main role="main" class="cart">
|
||||
<div class="cart-bg">
|
||||
<div class="container py-3 px-lg-5 py-lg-5">
|
||||
{{ if eq (len $.items) 0 }}
|
||||
<h3>Your shopping cart is empty!</h3>
|
||||
<p>Items you add to your shopping cart will appear here.</p>
|
||||
<a class="btn btn-primary" href="/" role="button">Browse Products → </a>
|
||||
<a class="btn btn-info" href="/" role="button">Browse Products → </a>
|
||||
{{ else }}
|
||||
|
||||
<div class="row mb-3 py-2">
|
||||
<div class="col">
|
||||
<h3>{{ len $.items }} item
|
||||
{{- if gt (len $.items) 1}}s{{end}}
|
||||
in your Shopping Cart</h3>
|
||||
<h3>{{ $.cart_size }} item
|
||||
{{- if gt ($.cart_size) 1}}s{{end}}
|
||||
in your cart</h3>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<form method="POST" action="/cart/empty">
|
||||
<button class="btn btn-secondary" type="submit">Empty cart</button>
|
||||
<a class="btn btn-info" href="/" role="button">Browse more products → </a>
|
||||
<button class="btn btn-secondary empty-btn" type="submit">Empty cart</button>
|
||||
<a class="btn btn-info" href="/" role="button">Keep browsing</a>
|
||||
</form>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
|
||||
{{ range $.items }}
|
||||
<div class="row pt-2 mb-2">
|
||||
<div class="col text-right">
|
||||
<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/>
|
||||
<small class="text-muted">SKU: #{{.Item.Id}}</small>
|
||||
</div>
|
||||
<div class="col text-left">
|
||||
Qty: {{.Quantity}}<br/>
|
||||
<strong>
|
||||
{{ renderMoney .Price}}
|
||||
</strong>
|
||||
<div class="product-item">
|
||||
<div class="row pt-2 mb-2">
|
||||
<div class="col text-right image">
|
||||
<a href="/product/{{.Item.Id}}"><img class="img-fluid"
|
||||
src="{{.Item.Picture}}" /></a>
|
||||
</div>
|
||||
<div class="col text-left text">
|
||||
<h4>{{ .Item.Name }}</h4>
|
||||
<p><small class="text-muted">SKU: #{{ .Item.Id }}</small></p>
|
||||
<div class="details">
|
||||
Quantity: {{ .Quantity }}<br/>
|
||||
<strong>
|
||||
{{ renderMoney .Price }}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }} <!-- range $.items-->
|
||||
{{ end }}
|
||||
<div class="row pt-2 my-3">
|
||||
<div class="col text-center">
|
||||
<div class="col text-center order-summary">
|
||||
<p class="text-muted my-0">Shipping Cost: <strong>{{ renderMoney .shipping_cost }}</strong></p>
|
||||
Total Cost: <strong>{{ renderMoney .total_cost }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<div class="row py-3 my-2">
|
||||
<div class="row py-3 my-2 checkout">
|
||||
<div class="col-12 col-lg-8 offset-lg-2">
|
||||
<h3>Checkout</h3>
|
||||
<h3 class="text-center">Checkout</h3>
|
||||
<form action="/cart/checkout" method="POST">
|
||||
<div class="form-row">
|
||||
<div class="col-md-5 mb-3">
|
||||
|
|
@ -72,7 +76,7 @@
|
|||
<input type="text" class="form-control"
|
||||
name="zip_code" id="zip_code" value="94043" required pattern="\d{4,5}">
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-5 mb-3">
|
||||
|
|
@ -88,7 +92,7 @@
|
|||
<div class="col-md-5 mb-3">
|
||||
<label for="country">Country</label>
|
||||
<input type="text" class="form-control" id="country"
|
||||
placeholder="Country Name"
|
||||
placeholder="Country Name"
|
||||
name="country" value="United States" required>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -116,7 +120,7 @@
|
|||
<option value="9">September</option>
|
||||
<option value="10">October</option>
|
||||
<option value="11">November</option>
|
||||
<option value="12">December</option>
|
||||
<option value="12">January</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2 mb-3">
|
||||
|
|
@ -133,26 +137,22 @@
|
|||
<div class="col-md-2 mb-3">
|
||||
<label for="credit_card_cvv">CVV</label>
|
||||
<input type="password" class="form-control" id="credit_card_cvv"
|
||||
autocomplete="off"
|
||||
name="credit_card_cvv" value="672" required pattern="\d{3}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<button class="btn btn-primary" type="submit">Place your order →</button>
|
||||
<div class="form-row center-contents last-row">
|
||||
<button class="btn btn-info" type="submit">Place order</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }} <!-- end if $.items -->
|
||||
|
||||
{{ if $.recommendations}}
|
||||
<hr/>
|
||||
{{ template "recommendations" $.recommendations }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
{{ if $.recommendations}}
|
||||
{{ template "recommendations" $.recommendations }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{ template "footer" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
10
src/frontend/templates/error.html
Normal file → Executable file
10
src/frontend/templates/error.html
Normal file → Executable file
|
|
@ -1,12 +1,16 @@
|
|||
{{ define "error" }}
|
||||
{{ template "header" . }}
|
||||
|
||||
<div {{ with $.platform_css }} class="{{.}}" {{ end }}>
|
||||
<span class="platform-flag">
|
||||
{{$.platform_name}}
|
||||
</span>
|
||||
</div>
|
||||
<main role="main">
|
||||
<div class="py-5">
|
||||
<div class="container bg-light py-3 px-lg-5 py-lg-5">
|
||||
<h1>Uh, oh!</h1>
|
||||
<p>Something has failed. Below are some details for debugging.</p>
|
||||
|
||||
|
||||
<p><strong>HTTP Status:</strong> {{.status_code}} {{.status}}</p>
|
||||
<pre class="border border-danger p-3"
|
||||
style="white-space: pre-wrap; word-break: keep-all;">
|
||||
|
|
@ -17,4 +21,4 @@
|
|||
</main>
|
||||
|
||||
{{ template "footer" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
35
src/frontend/templates/footer.html
Normal file → Executable file
35
src/frontend/templates/footer.html
Normal file → Executable file
|
|
@ -1,25 +1,18 @@
|
|||
{{ define "footer" }}
|
||||
<footer class="py-5 px-5">
|
||||
<div class="container">
|
||||
<p>
|
||||
© 2018 Google Inc
|
||||
<span class="text-muted">
|
||||
<a href="https://github.com/GoogleCloudPlatform/microservices-demo/">(Source Code)</a>
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<small class="text-muted">
|
||||
This website is hosted for demo purposes only. It is not an
|
||||
actual shop. This is not an official Google project.
|
||||
</small>
|
||||
</p>
|
||||
<small class="text-muted">
|
||||
{{ if $.session_id }}session-id: {{ $.session_id }}</br>{{end}}
|
||||
{{ if $.request_id }}request-id: {{ $.request_id }}</br>{{end}}
|
||||
</small>
|
||||
|
||||
<footer class="py-5">
|
||||
<div class="footer-top">
|
||||
<div class="container footer-social">
|
||||
<p class="footer-text">© 2020 Google Inc (<a href="https://github.com/GoogleCloudPlatform/microservices-demo">Source Code</a>) — </p>
|
||||
<p class="footer-text"> This website is hosted for demo purposes only. It is not an actual shop. This is not a Google product.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
|
||||
|
||||
</div>
|
||||
</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 }}
|
||||
{{ end }}
|
||||
60
src/frontend/templates/header.html
Normal file → Executable file
60
src/frontend/templates/header.html
Normal file → Executable file
|
|
@ -1,35 +1,57 @@
|
|||
{{ 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">
|
||||
<title>Online Boutique</title>
|
||||
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
|
||||
crossorigin="anonymous">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="/static/styles/styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="/static/styles/cart.css">
|
||||
<link rel="stylesheet" type="text/css" href="/static/styles/order.css">
|
||||
<link rel='shortcut icon' type='image/x-icon' href='/static/favicon.ico' />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-dark bg-dark box-shadow">
|
||||
<div class="navbar">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<div class="h-free-shipping">Free shipping with $75 purchase! </div>
|
||||
<div class="h-controls">
|
||||
<div class="h-control">
|
||||
<img src="/static/icons/Hipster_CurrencyIcon.svg" alt="icon" class="icon" />
|
||||
<form method="POST" class="controls-form" action="/setCurrency" id="currency_form" >
|
||||
<select name="currency_code" onchange="document.getElementById('currency_form').submit();">
|
||||
{{range $.currencies}}
|
||||
<option value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</form>
|
||||
<img src="/static/icons/Hipster_DownArrow.svg" alt="icon" class="icon arrow" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar sub-navbar">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="/" class="navbar-brand d-flex align-items-center">
|
||||
Hipster Shop
|
||||
<img src="/static/icons/Hipster_NavLogo.svg" alt="logo" class="logo" />
|
||||
</a>
|
||||
{{ if $.currencies }}
|
||||
<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();" style="width:auto;">
|
||||
{{range $.currencies}}
|
||||
<option value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
<a class="btn btn-primary btn-light ml-2" href="/cart" role="button">View Cart ({{$.cart_size}})</a>
|
||||
</form>
|
||||
{{ end }}
|
||||
<div class="controls">
|
||||
<a href="/cart">
|
||||
<img src="/static/icons/Hipster_CartIcon.svg" alt="cart-icon" class="logo" />
|
||||
<span>Cart
|
||||
{{ if $.cart_size }}
|
||||
<span class="badge badge-blue">{{$.cart_size}}</span>
|
||||
{{ end }}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
{{end}}
|
||||
{{end}}
|
||||
98
src/frontend/templates/home.html
Normal file → Executable file
98
src/frontend/templates/home.html
Normal file → Executable file
|
|
@ -1,63 +1,49 @@
|
|||
{{ define "home" }}
|
||||
|
||||
{{ template "header" . }}
|
||||
<main role="main">
|
||||
<section class="jumbotron text-center mb-0"
|
||||
{{ with $.banner_color }}
|
||||
style="background-color: {{.}};"
|
||||
{{ end }}
|
||||
>
|
||||
<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>
|
||||
{{ template "header" . }}
|
||||
<div {{ with $.platform_css }} class="{{.}}" {{ end }}>
|
||||
<span class="platform-flag">
|
||||
{{$.platform_name}}
|
||||
</span>
|
||||
</div>
|
||||
<main role="main" class="home">
|
||||
<section class="jumbotron text-center mb-0 h-jumbotron">
|
||||
<div class="container">
|
||||
<img src="/static/icons/Hipster_HeroLogo.svg" alt="icon" class="icon search-icon" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<a href="/product/{{.Item.Id}}">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Buy</button>
|
||||
</a>
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
{{ renderMoney .Price }}
|
||||
</strong>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ with $.ad }}{{ template "text_ad" . }}{{ end}}
|
||||
</div>
|
||||
<div class="h-grid py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="row h-row">
|
||||
<img src="/static/icons/Hipster_HotProducts.svg" alt="icon" class="icon search-icon" />
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ range $.products }}
|
||||
<div class="col-md-4">
|
||||
<div class="h-card card mb-4 box-shadow">
|
||||
<a href="/product/{{.Item.Id}}">
|
||||
<img alt="" style="width: 100%; height: auto;" src="{{.Item.Picture}}">
|
||||
<div class="card-hover"></div>
|
||||
</a>
|
||||
<div class="card-body h-card-body">
|
||||
<h5 class="card-title h-card-title">
|
||||
{{ .Item.Name }}
|
||||
</h5>
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<small class="text-muted">
|
||||
{{ renderMoney .Price }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{ template "footer" . }}
|
||||
{{ template "footer" . }}
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
54
src/frontend/templates/order.html
Normal file → Executable file
54
src/frontend/templates/order.html
Normal file → Executable file
|
|
@ -1,37 +1,41 @@
|
|||
{{ define "order" }}
|
||||
{{ template "header" . }}
|
||||
|
||||
<main role="main">
|
||||
<div {{ with $.platform_css }} class="{{.}}" {{ end }}>
|
||||
<span class="platform-flag">
|
||||
{{$.platform_name}}
|
||||
</span>
|
||||
</div>
|
||||
<main role="main" class="order">
|
||||
<div class="py-5">
|
||||
<div class="container bg-light py-3 px-lg-5">
|
||||
<div class="container py-3 px-lg-5">
|
||||
<div class="row mt-5 py-2">
|
||||
<div class="col">
|
||||
<h3>
|
||||
Your order is complete!
|
||||
</h3>
|
||||
<p>
|
||||
Order Confirmation ID: <strong>{{.order.OrderId}}</strong>
|
||||
<br>
|
||||
Shipping Tracking ID: <strong>{{.order.ShippingTrackingId}}</strong>
|
||||
</p>
|
||||
<p>
|
||||
Shipping Cost: <strong>{{renderMoney .order.ShippingCost}}</strong>
|
||||
<br>
|
||||
Total Paid: <strong>{{renderMoney .total_paid}}</strong>
|
||||
</p>
|
||||
<a class="btn btn-primary" href="/" role="button">Browse other products → </a>
|
||||
<div class="col text-center">
|
||||
<img class="order-logo" src="/static/icons/Hipster_HeroLogoCyan.svg" alt="icon" />
|
||||
<h3>
|
||||
Your order is complete!
|
||||
</h3>
|
||||
<p>Order Confirmation ID</p>
|
||||
<p class="mg-bt"><strong>{{.order.OrderId}}</strong></p>
|
||||
<p>Shipping Tracking ID</p>
|
||||
<p class="mg-bt"><strong>{{.order.ShippingTrackingId}}</strong></p>
|
||||
<p>Shipping Cost</p>
|
||||
<p class="mg-bt"><strong>{{renderMoney .order.ShippingCost}}</strong></p>
|
||||
<p>Total Paid</p>
|
||||
<p class="mg-bt"><strong>{{renderMoney .total_paid}}</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
|
||||
{{ if $.recommendations }}
|
||||
<div class="row mt-5 py-2">
|
||||
{{ template "recommendations" $.recommendations }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="container py-3 px-lg-5">
|
||||
<div class="row py-2 text-center">
|
||||
<a class="btn btn-info" href="/" role="button" style="margin-top: 40px; margin-bottom: 40px;">Keep Browsing</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ if $.recommendations }}
|
||||
{{ template "recommendations" $.recommendations }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{ template "footer" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
104
src/frontend/templates/product.html
Normal file → Executable file
104
src/frontend/templates/product.html
Normal file → Executable file
|
|
@ -1,56 +1,58 @@
|
|||
{{ define "product" }}
|
||||
{{ template "header" . }}
|
||||
{{ template "header" . }}
|
||||
<div {{ with $.platform_css }} class="{{.}}" {{ end }}>
|
||||
<span class="platform-flag">
|
||||
{{$.platform_name}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<main role="main">
|
||||
<div class="py-5">
|
||||
<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 border" style="width: 100%;"
|
||||
src="{{$.product.Item.Picture}}" />
|
||||
</div>
|
||||
<div class="col-12 col-lg-7">
|
||||
<h2>{{$.product.Item.Name}}</h2>
|
||||
|
||||
<p class="text-muted">
|
||||
{{ renderMoney $.product.Price}}
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<h6>Product Description:</h6>
|
||||
{{$.product.Item.Description}}
|
||||
</p>
|
||||
<hr/>
|
||||
<main role="main">
|
||||
<div class="h-product">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img src="{{$.product.Item.Picture}}" />
|
||||
</div>
|
||||
<div class="product-info col">
|
||||
<div class="product-wrapper">
|
||||
<h2>{{$.product.Item.Name}}</h2>
|
||||
|
||||
<form method="POST" action="/cart" 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 form-control form-control-lg">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>10</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-info btn-lg ml-3">Add to Cart</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ if $.recommendations}}
|
||||
<hr/>
|
||||
{{ template "recommendations" $.recommendations }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $.ad }}{{ template "text_ad" . }}{{ end}}
|
||||
<p class="text-muted">
|
||||
{{ renderMoney $.product.Price}}
|
||||
</p>
|
||||
<div>
|
||||
<h6>Product Description:</h6>
|
||||
{{$.product.Item.Description}}
|
||||
</div>
|
||||
|
||||
<form method="POST" action="/cart" class="form-inline">
|
||||
<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 form-control form-control-lg">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>10</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-info btn-lg ml-3">Add to Cart</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
{{ template "footer" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container py-3 px-lg-5 py-lg-5">
|
||||
{{ if $.recommendations}}
|
||||
{{ template "recommendations" $.recommendations }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $.ad }}{{ template "text_ad" . }}{{ end}}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
{{ template "footer" . }}
|
||||
{{ end }}
|
||||
41
src/frontend/templates/recommendations.html
Normal file → Executable file
41
src/frontend/templates/recommendations.html
Normal file → Executable file
|
|
@ -1,21 +1,26 @@
|
|||
{{ define "recommendations" }}
|
||||
<h5 class="text-muted">Products you might like</h5>
|
||||
<div class="row my-2 py-3">
|
||||
{{range . }}
|
||||
<div class="col-sm-6 col-md-4 col-lg-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>
|
||||
<section class="recommendations">
|
||||
<div class="container">
|
||||
<div class="image">
|
||||
<img src="/static/icons/Hipster_OtherProducts.svg" alt="icon" />
|
||||
</div>
|
||||
<div class="row prods">
|
||||
{{range . }}
|
||||
<div class="col-md-3">
|
||||
<div class="h-card card mb-3 box-shadow">
|
||||
<a href="/product/{{.Id}}">
|
||||
<img alt="" style="width: 100%; height: auto;" src="{{.Picture}}">
|
||||
<div class="card-hover"></div>
|
||||
</a>
|
||||
<div class="card-body text-center py-2">
|
||||
<h5 class="card-title h-card-title">
|
||||
{{ .Name }}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue