frontend: view cart, add to cart, empty cart

Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com>

src/frontend/templates/cart.html

@@ -0,0 +1,53 @@
+{{ define "cart" }}
+    {{ template "header" . }}
+
+    <main role="main">
+        <div class="py-5">
+            <div class="container bg-light py-3 px-lg-5 py-lg-5">
+                <h1>Shopping Cart</h1>
+
+                {{ if eq (len $.items) 0 }}
+                <p>Your shopping cart is empty.</p>
+                <a class="btn btn-primary" href="/" role="button">Browse Products</a>
+                {{ end }}
+
+                {{ 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}}" />
+                    </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>
+                            {{.Price.CurrencyCode}}
+                            {{.Price.Amount.Decimal}}.
+                            {{- .Price.Amount.Fractional}}{{- if lt .Price.Amount.Fractional 10}}0{{end}}
+                        </strong>
+                    </div>
+                </div>
+                {{ end }}
+
+                {{ if $.items }}
+                <div class="row mt-5">
+                    <div class="col-8 offset-2">
+                        <div class="d-flex justify-content-between align-items-center">
+                                <form method="POST" action="/cart/empty">
+                                    <button class="btn btn-secondary" type="submit">Empty Cart</button>
+                                </form>     
+                                <a class="btn btn-primary" href="/checkout" role="button">Proceed to Checkout</a>
+                        </div>
+                    </div>
+                </div>
+                {{ end }}
+
+            </div>
+        </div>
+    </main>
+
+    {{ template "footer" . }}
+{{ end }}

src/frontend/templates/header.html

@@ -23,7 +23,7 @@
                         <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 ({{$.cart_size}})</a>
+                    <a class="btn btn-primary ml-2" href="/cart" role="button">View Cart ({{$.cart_size}})</a>
                 </form>
             </div>
         </div>

src/frontend/templates/product.html

@@ -24,7 +24,7 @@
                             </p>
                             <hr/>
 
-                            <form method="POST" action="/addToCart" class="form-inline text-muted">
+                            <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">