localhorst/e-commerce
Archived
4
1
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

implement checkout

Browse Source
This commit is contained in:
CodeSteak 2020-01-25 16:12:53 +01:00
parent b402b4fb57
commit 28d2118df8
3 changed files with 194 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
prototype/src/main/resources/static/css/ecom.css
View File

@ -195,7 +195,6 @@ a.section {
p { p {
padding-top: var(--u0); padding-top: var(--u0);
padding-bottom: var(--u0); padding-bottom: var(--u0);
color: var(--c-black);
} }
h1 { h1 {
@ -742,6 +741,24 @@ fieldset label {
* CONTENT * CONTENT
*/ */
.card {
padding: var(--u0);
background-color: var(--c-primary);
color: var(--c-base);
}
.card.s {
width: 10rem;
}
.card.m {
width: 20rem;
}
.card.l {
width: 40rem;
}
.price { .price {
opacity: 75%; opacity: 75%;
font-size: var(--u1); font-size: var(--u1);
@ -752,15 +769,9 @@ fieldset label {
text-align: center; text-align: center;
} }
.leftspace { .no-padding {
padding-left: 1em; padding: 0px;
} }
.noPadding { .no-margin {
padding: 0rem; margin: 0px;
}
.noMargin {
margin: 0rem;
}
.Margin-left.s {
margin-left: 2rem;
} }

2
prototype/src/main/resources/templates/register.html
View File

@ -59,7 +59,7 @@
<div> <div>
<label for="address">Anschrift</label> <label for="address">Anschrift</label>
<textarea rows="5" class="full-width" type="text" name="address" placeholder="Optional: Zusatz&#10;Optional: Unternehmen&#10;Straße Hausnummer&#10;Postleitzeit Ort&#10Land"></textarea> <textarea rows="5" class="full-width" type="text" name="address" placeholder="Optional: Zusatz&#10;Optional: Unternehmen&#10;Straße Hausnummer&#10;Postleitzeit Ort&#10;Land"></textarea>
</div> </div>
<fieldset> <fieldset>
<input type="radio" name="type" value="priv" id="type-priv" required> <input type="radio" name="type" value="priv" id="type-priv" required>

171
prototype/src/main/resources/templates/shop/checkout.html
View File

@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>e-commerce</title>
<link rel="stylesheet" th:href="@{/css/ecom.css}" />
<link rel="stylesheet" th:href="@{/css/listedArticles.css}" />
<script th:src="@{/js/filterTable.js}"></script>
</head>
<body>
<nav th:replace="/fragments/header :: header">Header</nav>
<div class="sidebar-layout content-width">
<div>
<h1>Warenkorb</h1>
</div>
<nav></nav>
</div>
<!-- TODO: this is suboptimal on mobile -->
<main class="content-width sidebar-layout">
<div style="min-height: 100vh;">
<table>
<tr>
<th>Bild</th>
<th>Name</th>
<th>Preis (Brutto)</th>
<th>Menge</th>
<th></th>
</tr>
<tr>
<td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-1.jpg}" class="s" /><a/></td>
<td><a th:href="@{/shop/articles/4151}">Kamera<a/></td>
<td>100,50 €</td>
<td>
<select size="1">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<button class="small">Entfernen</button>
</td>
</tr>
<tr>
<td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-2.jpg}" class="s" /><a/></td>
<td><a th:href="@{/shop/articles/4151}">Earbuds<a/></td>
<td>63,95 €</td>
<td>
<select size="1">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<button>Entfernen</button>
</td>
</tr>
<tr>
<td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-3.jpg}" class="s" /><a/></td>
<td><a th:href="@{/shop/articles/4151}">USB-Magic Light<a/></td>
<td>11,90 €</td>
<td>
<select size="1">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<button>Entfernen</button>
</td>
</tr>
<tr>
<td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-4.jpg}" class="s" /><a/></td>
<td><a th:href="@{/shop/articles/4151}">3D Magic Stativ<a/></td>
<td>15,99 €</td>
<td>
<select size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected>5</option>
</select>
</td>
<td>
<button>Entfernen</button>
</td>
</tr>
<tr>
<td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-5.jpg}" class="s" /><a/></td>
<td><a th:href="@{/shop/articles/4151}">Ersatzfernbedinung<a/></td>
<td>7,95 €</td>
<td>
<select size="1">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<button>Entfernen</button>
</td>
</tr>
</table>
</div>
<form method="POST" th:action="@{/shop/checkoutFinish}">
<div class="detailflex hero">
<div>
<h1>Checkout</h1>
</div>
<div>
<h2>Lieferadresse:</h2>
<textarea rows="5" class="full-width" type="text" name="address" placeholder="Optional: Zusatz&#10;Optional: Unternehmen&#10;Straße Hausnummer&#10;Postleitzeit Ort&#10;Land">
Max Mustermann
Musterstraße 42
42424 Mustertal
</textarea>
</div>
<div>
<h2>Zahlung:</h2>
<fieldset>
<input type="radio" name="type" value="priv" id="payment-card" required selected>
<label for="payment-card">Kartenzahlung</label> <br />
<input class="full-width" type="text" id="cardnumber" name="cardnumber" placeholder="Kartennummer" required />
</fieldset>
</div>
<div>
<h2>Bestellübersicht</h2>
<!-- Dirty TODO: -->
<table>
<tr>
<th>Artikel (Netto)</th>
<th>200,29 €</th>
</tr>
<tr>
<th>Umsatzsteuer (19%)</th>
<th>35,00 €</th>
</tr>
<tr>
<th>Umsatzsteuer (7%)</th>
<th>2,50 €</th>
</tr>
<tr class="secondary">
<th>Gesamt:</th>
<th>240,79 €</th>
</tr>
<tr class="secondary">
<th colspan="2" class=" no-padding"><button class=" no-margin secondary full-width">jetzt kostenpflichtig bestellen</button></th>
</tr>
</table>
</div>
</div>
</form>
</main>
<footer th:replace="/fragments/footer :: footer"></footer>
</body>
</html>