Add checkout template

initializers/initializers.go

@@ -14,6 +14,7 @@ func initializePages()  {
 	Pages["cart"] = Page{"/cart", "templates/cart.html", map[string]interface{}{}, CartView}
 	Pages["addToCart"] = Page{"/addToCart", "templates/addToCart.html", map[string]interface{}{}, AddToCartView}
 	Pages["removeFromCart"] = Page{"/removeFromCart", "templates/removeFromCart.html", map[string]interface{}{}, RemoveFromCartView}
+	Pages["checkout"] = Page{"/checkout", "templates/checkout.html", map[string]interface{}{}, CheckoutView}
 }
 
 func initializeData()  {

static/css/style.css

@@ -151,7 +151,7 @@ input[type="button"] {
     color: white;
 }
 
-.cartItem {
+.cartItem, .checkoutSummary {
    width: 90%;
    display: flex;
    text-align: center;
@@ -159,11 +159,30 @@ input[type="button"] {
    border-bottom: 1px solid rgba(0,0,0,.4);
 }
 
+.checkoutSummary {
+   width: 50%;
+}
+
+.checkoutPayment {
+   margin: 0 auto;
+   text-align: center;
+}
+
 .cartItemColumn {
    width: 20%;
    margin: auto;
 }
 
+input[type="text"] {
+    padding: 3px;
+    margin-bottom: 3px;
+}
+
+.checkoutSummaryColumn {
+   width: 50%;
+   margin: auto;
+}
+
 .cartItemIcon {
    width: 90%;
    width: 50px;

templates/cart.html

@@ -24,5 +24,5 @@ function deleteitem(id) {
             <div class="cartItemColumn"><input type="button" value="Usuń" onclick="deleteitem({{ .Product.Id }});" style="background-color: red;"></div>
          </div>
    {{end}}
-   Wartość koszyka: {{ .cart.PriceTotal }} zł
+   <div style="float: right; margin-right: 5%; margin-top:20px; text-align: right;">Wartość koszyka: {{ .cart.PriceTotal }} zł<br><a href="/checkout"><input type="button" value="Podsumowanie"></a></div>
 {{end}}

templates/checkout.html

@@ -0,0 +1,68 @@
+{{define "content"}}
+<script type="text/javascript">
+var pM = 1;
+function calculateShipment() {
+   var date = new Date();
+   var days = 2;
+   var dayOfWeek = date.getDay()
+   if (dayOfWeek == 4 || dayOfWeek == 5)
+      days = 4;
+   else if (dayOfWeek == 6)
+      days = 3;
+   date.setDate(date.getDate() + days);
+   document.getElementById("shipmentDate").innerHTML = date.toLocaleDateString();
+}
+
+function paymentMethodChanged(v) {
+   pM = v;
+   var loanPaymentEl = document.getElementById("loanPayment");
+   switch (v) {
+      case "1":
+         loanPaymentEl.style.display = "none";
+         break;
+      case "2":
+         var price = parseInt({{.cart.PriceTotal}});
+         document.getElementById("loanPaymentinstallment").innerHTML = Math.round(100 * price/24) / 100;
+         loanPaymentEl.style.display = "block";
+         break;
+   }
+}
+
+function pay() {
+   var fN = document.getElementById("fname").value;
+   var lN = document.getElementById("lname").value;
+   if (fN!='' && lN!='')
+      location.href = 'http://127.0.0.1:8000/paymentDone?fn=' + fN + '&ln=' + lN + "&pm=" + pM;
+}
+</script>
+   <h1>Podsumowanie</h1>
+   <div class="checkoutSummary">
+      <div class="checkoutSummaryColumn">Imię:</div>
+      <div class="checkoutSummaryColumn"><input required type="text" name="fname" id="fname"></div>
+   </div>
+   <div class="checkoutSummary">
+      <div class="checkoutSummaryColumn">Nazwisko:</div>
+      <div class="checkoutSummaryColumn"><input required type="text" name="lname" id="lname"></div>
+   </div>
+   <div class="checkoutSummary">
+      <div class="checkoutSummaryColumn">Metoda płatności:</div>
+      <div class="checkoutSummaryColumn">
+         <form id="paymentMethodRadio">
+            <input type="radio" name="payment" value="1" checked onchange="paymentMethodChanged(value)"> Gotówka/ karta
+            <input type="radio" name="payment" value="2" onchange="paymentMethodChanged(value)"> Raty 0% na 24 mies.<br>
+         </form>
+      </div>
+   </div>
+   <div class="checkoutSummary">
+      <div class="checkoutSummaryColumn">Kwota zamówienia:</div>
+      <div class="checkoutSummaryColumn" id="paymentTotal">{{ .cart.PriceTotal }} zł</div>
+   </div>
+   <div class="checkoutPayment">
+      <div id="shipment">Data dostawy: <span id="shipmentDate"></span></div><br>
+      <div id="loanPayment" style="display: none;">Wysokość raty miesięcznej: <span id="loanPaymentinstallment">0</span> zł</div>
+      <br><input type="button" value="Zapłać" onclick="pay();">
+   </div>
+<script type="text/javascript">
+   calculateShipment();
+</script>
+{{end}}

views/views.go

@@ -83,3 +83,7 @@ func RemoveFromCartView(p Page, w http.ResponseWriter, r *http.Request)  {
 	}
 	ExecuteView(w, r, "templates/cart.html", p.Data)
 }
+
+func CheckoutView(p Page, w http.ResponseWriter, r *http.Request)  {
+	ExecuteView(w, r, p.Template, p.Data)
+}