163 lines
7.3 KiB
HTML
163 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Checkout</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>
|
|
|
|
<script th:src="@{/js/back.js}"></script>
|
|
<p class="back" data-group="shop" data-insert="true"></p>
|
|
</div>
|
|
<nav></nav>
|
|
</div>
|
|
<main th:if="${checkoutItems.size() == 0}">
|
|
<div class="detailflex m">
|
|
<h2> Noch keine Artikel im Warenkorb. </h2>
|
|
<p>
|
|
<img th:src="@{/img/undraw_successful_purchase_secondary.svg}"/>
|
|
</p>
|
|
<a class="button" th:href="@{/}"> Weiter shoppen </a>
|
|
</div>
|
|
|
|
</main>
|
|
<main th:if="${checkoutItems.size() > 0}" class="content-width sidebar-layout" style="min-height: 100vh;">
|
|
<div style="max-width: 45em; width: 100%;">
|
|
<table>
|
|
<tr>
|
|
<th>Bild</th>
|
|
<th>Name</th>
|
|
<th>Preis (Brutto)</th>
|
|
<th>Menge</th>
|
|
<th></th>
|
|
</tr>
|
|
<th:block th:each="item : ${checkoutItems}">
|
|
<tr>
|
|
<td><a th:href="@{/shop/articles/{id}(id = ${item.article.id})}"><img
|
|
th:src="@{/shop/articles/{id}/image.jpg(id=${item.article.id})}" class="s"/></a></td>
|
|
|
|
<td><a th:href="@{/shop/articles/{id}(id = ${item.article.id})}"
|
|
th:text="${item.article.title}"></a></td>
|
|
<td><span
|
|
th:text="${#numbers.formatDecimal(item.article.getPriceGross() * 0.01, 1, 'POINT', 2, 'COMMA')}"></span>
|
|
EUR <b>x</b></td>
|
|
<td>
|
|
<form method="POST" th:action="@{/shop/articles/{id}(id = ${item.article.id})}">
|
|
<input type="hidden" name="fastcheckout" value="true"/>
|
|
<input type="hidden" name="set_amount" value="true"/>
|
|
<select name="quantity" size="1">
|
|
<option th:value="${item.amount}" th:text="${item.amount}" selected></option>
|
|
<option value="0">Entfernen</option>
|
|
<option th:if="${item.inStock > 0}"
|
|
th:each="quantity : ${#numbers.sequence(1,item.inStock)}"
|
|
th:value="${quantity}"
|
|
th:text="${quantity}"></option>
|
|
</select>
|
|
<button class="small">Ändern</button>
|
|
</form>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr th:if="${item.amount > item.inStock}">
|
|
<td class="error" colspan="4">
|
|
Die gewählte Anzahl des Artikels ist leider derzeit nicht lieferbar.
|
|
</td>
|
|
</tr>
|
|
<th:block>
|
|
</table>
|
|
</div>
|
|
<form method="POST" th:action="@{/shop/checkoutFinish}" style="min-width: 30em; max-width: 45em;">
|
|
<div class="detailflex hero">
|
|
<div>
|
|
<h1>Checkout</h1>
|
|
</div>
|
|
<div th:if="${user}">
|
|
<input type="hidden" name="shopping_cart_revision" th:value="${shoppingCart.getRevision()}"/>
|
|
<input type="hidden" name="expected_total" th:value="${checkoutTotals.total}"/>
|
|
|
|
<h2>Lieferadresse:</h2>
|
|
<textarea rows="5" class="full-width" type="text" name="address"
|
|
placeholder="Name Optional: Zusatz Optional: Unternehmen Straße Hausnummer Postleitzeit Ort Land"
|
|
th:text="${user.defaultDeliveryAddress != null ? user.defaultDeliveryAddress.toString() : ''}"
|
|
required>
|
|
Max Mustermann
|
|
Musterstraße 4
|
|
42424 Mustertal
|
|
</textarea>
|
|
</div>
|
|
<div th:if="${user}">
|
|
<h2>Zahlung:</h2>
|
|
<fieldset>
|
|
<input type="radio" name="type" value="priv" id="payment-card" required checked>
|
|
<label for="payment-card">Kartenzahlung</label> <br/>
|
|
<input class="full-width" type="text" id="cardnumber" name="cardnumber" placeholder="Kartennummer"
|
|
th:value="${user.defaultPayment != null ? user.defaultPayment.creditCardNumber : ''}"
|
|
pattern="[0-9]{6,16}"
|
|
required/>
|
|
<p th:if="${user.defaultPayment == null}" class="secondary card">
|
|
Da dies Ihre erste Bestellung ist, wird die Kreditkarte als Standartzahlungsmittel hinterlegt.
|
|
Sie kann unter den Nutzereinstellungen gelöscht oder geändert werden.
|
|
</p>
|
|
<small th:if="${user.defaultPayment != null}" class="no-padding">Die Standardkreditkarte kann unter
|
|
den <a href="/user/settings">Nutzereinstellungen</a> gelöscht oder geändert werden.</small>
|
|
</fieldset>
|
|
</div>
|
|
<div>
|
|
<h2>Bestellübersicht</h2>
|
|
<!-- Dirty TODO: -->
|
|
<table>
|
|
<tr>
|
|
<th>Artikel (Netto)</th>
|
|
<th><span
|
|
th:text="${#numbers.formatDecimal(checkoutTotals.net * 0.01, 1, 'POINT', 2, 'COMMA')}"></span>
|
|
EUR
|
|
</th>
|
|
</tr>
|
|
<th:block th:each="item : ${checkoutTotals.vatAmounts.entrySet()}">
|
|
<tr>
|
|
<th>Umsatzsteuer (<span th:text="${item.getKey()}"></span>%)</th>
|
|
<th><span
|
|
th:text="${#numbers.formatDecimal(item.getValue() * 0.01, 1, 'POINT', 2, 'COMMA')}"></span>
|
|
EUR
|
|
</th>
|
|
</tr>
|
|
</th:block>
|
|
<tr class="secondary">
|
|
<th>Gesamt:</th>
|
|
<th><span
|
|
th:text="${#numbers.formatDecimal(checkoutTotals.total * 0.01, 1, 'POINT', 2, 'COMMA')}"></span>
|
|
EUR
|
|
</th>
|
|
</tr>
|
|
<tr th:if="${user}" class="secondary">
|
|
<th colspan="2" class=" no-padding"></th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div th:if="${user}">
|
|
<button class=" no-margin secondary full-width" th:disabled="${inValid}">jetzt kostenpflichtig
|
|
bestellen
|
|
</button>
|
|
</div>
|
|
<div th:unless="${user}">
|
|
<a th:href="@{/login}" class="button secondary no-margin full-width">Einloggen und fortfahren.</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
<footer th:replace="fragments/footer :: footer"></footer>
|
|
|
|
</body>
|
|
|
|
</html>
|