implement checkout
This commit is contained in:
parent
b402b4fb57
commit
28d2118df8
@ -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;
|
|
||||||
}
|
}
|
||||||
|
@ -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 Optional: Unternehmen Straße Hausnummer Postleitzeit Ort
Land"></textarea>
|
<textarea rows="5" class="full-width" type="text" name="address" placeholder="Optional: Zusatz Optional: Unternehmen Straße Hausnummer Postleitzeit Ort 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>
|
||||||
|
@ -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 Optional: Unternehmen Straße Hausnummer Postleitzeit Ort 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>
|
Reference in New Issue
Block a user