2020-01-25 16:12:53 +01:00
<!DOCTYPE html>
< html lang = "de" dir = "ltr" xmlns:th = "http://www.thymeleaf.org" >
< head >
2020-04-27 09:48:24 +02:00
< 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 >
2020-01-25 16:12:53 +01:00
< / head >
< body >
2020-04-27 09:48:24 +02:00
< nav th:replace = "fragments/header :: header" > Header< / nav >
< div class = "sidebar-layout content-width" >
< div >
< h1 > Warenkorb< / h1 >
2020-03-06 16:11:26 +01:00
2020-04-27 09:48:24 +02:00
< script th:src = "@{/js/back.js}" > < / script >
< p class = "back" data-group = "shop" data-insert = "true" > < / p >
< / div >
< nav > < / nav >
< / div >
2020-05-05 22:56:12 +02:00
< 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;" >
2020-04-27 09:48:24 +02:00
< div style = "max-width: 45em; width: 100%;" >
< table >
2020-01-25 16:12:53 +01:00
< tr >
2020-04-27 09:48:24 +02:00
< th > Bild< / th >
< th > Name< / th >
< th > Preis (Brutto)< / th >
< th > Menge< / th >
< th > < / th >
2020-01-25 16:12:53 +01:00
< / tr >
2020-05-05 18:59:15 +02:00
< th:block th:each = "item : ${checkoutItems}" >
< tr >
< td > < a th:href = "@{/shop/articles/{id}(id = ${item.article.id})}" > < img
2020-05-08 09:58:29 +02:00
th:src="@{/shop/articles/{id}/image.jpg(id=${item.article.id})}" class="s"/>< / a > < / td >
2020-05-05 18:59:15 +02:00
< td > < a th:href = "@{/shop/articles/{id}(id = ${item.article.id})}"
th:text="${item.article.title}">< / a > < / td >
2020-05-05 22:56:12 +02:00
< td > < span
2020-05-10 14:34:20 +02:00
th:text="${#numbers.formatDecimal(item.article.getPriceGross() * 0.01, 1, 'POINT', 2, 'COMMA')}">< / span >
2020-05-05 22:56:12 +02:00
EUR < b > x< / b > < / td >
2020-05-05 18:59:15 +02:00
< 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 >
2020-05-05 22:56:12 +02:00
< option th:each = "quantity : ${#numbers.sequence(1,10)}"
th:value="${quantity}"
th:text="${quantity}">< / option >
2020-05-05 18:59:15 +02:00
< / select >
< button class = "small" > Ändern< / button >
< / form >
< / td >
< / tr >
< th:block >
2020-04-27 09:48:24 +02:00
< / table >
< / div >
< form method = "POST" th:action = "@{/shop/checkoutFinish}" style = "min-width: 30em; max-width: 45em;" >
< div class = "detailflex hero" >
2020-01-25 16:12:53 +01:00
< div >
2020-04-27 09:48:24 +02:00
< h1 > Checkout< / h1 >
2020-01-25 16:12:53 +01:00
< / div >
2020-04-08 18:27:46 +02:00
< div th:if = "${user}" >
2020-05-05 22:56:12 +02:00
< input type = "hidden" name = "shopping_cart_revision" th:value = "${shoppingCart.getRevision()}" / >
< input type = "hidden" name = "expected_total" th:value = "${checkoutTotals.total}" / >
2020-04-27 09:48:24 +02:00
< h2 > Lieferadresse:< / h2 >
< textarea rows = "5" class = "full-width" type = "text" name = "address"
2020-05-05 22:56:12 +02:00
placeholder="Name Optional: Zusatz Optional: Unternehmen Straße Hausnummer Postleitzeit Ort Land"
th:text="${user.defaultDeliveryAddress != null ? user.defaultDeliveryAddress.toString() : ''}"
required>
2020-01-25 16:12:53 +01:00
Max Mustermann
2020-05-05 22:56:12 +02:00
Musterstraße 4
2020-01-25 16:12:53 +01:00
42424 Mustertal
< / textarea >
< / div >
2020-04-08 18:27:46 +02:00
< div th:if = "${user}" >
2020-04-27 09:48:24 +02:00
< 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"
2020-05-05 22:56:12 +02:00
th:value="${user.defaultPayment != null ? user.defaultPayment.creditCardNumber : ''}"
pattern="[0-9]{6,16}"
2020-04-27 09:48:24 +02:00
required/>
2020-06-25 11:46:01 +02:00
< 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 >
2020-04-27 09:48:24 +02:00
< / fieldset >
2020-01-25 16:12:53 +01:00
< / div >
< div >
2020-04-27 09:48:24 +02:00
< h2 > Bestellübersicht< / h2 >
<!-- Dirty TODO: -->
< table >
< tr >
< th > Artikel (Netto)< / th >
2020-05-05 18:59:15 +02:00
< th > < span
2020-05-10 14:34:20 +02:00
th:text="${#numbers.formatDecimal(checkoutTotals.net * 0.01, 1, 'POINT', 2, 'COMMA')}">< / span >
2020-05-05 18:59:15 +02:00
EUR
< / th >
2020-04-27 09:48:24 +02:00
< / tr >
2020-05-05 18:59:15 +02:00
< th:block th:each = "item : ${checkoutTotals.vatAmounts.entrySet()}" >
< tr >
< th > Umsatzsteuer (< span th:text = "${item.getKey()}" > < / span > %)< / th >
< th > < span
2020-05-10 14:34:20 +02:00
th:text="${#numbers.formatDecimal(item.getValue() * 0.01, 1, 'POINT', 2, 'COMMA')}">< / span >
2020-05-05 18:59:15 +02:00
EUR
< / th >
< / tr >
< / th:block >
2020-04-27 09:48:24 +02:00
< tr class = "secondary" >
< th > Gesamt:< / th >
2020-05-05 18:59:15 +02:00
< th > < span
2020-05-10 14:34:20 +02:00
th:text="${#numbers.formatDecimal(checkoutTotals.total * 0.01, 1, 'POINT', 2, 'COMMA')}">< / span >
2020-05-05 18:59:15 +02:00
EUR
< / th >
2020-04-27 09:48:24 +02:00
< / tr >
< tr th:if = "${user}" class = "secondary" >
< th colspan = "2" class = " no-padding" > < / th >
< / tr >
< / table >
2020-01-25 16:12:53 +01:00
< / div >
2020-04-08 18:27:46 +02:00
< div th:if = "${user}" >
2020-04-27 09:48:24 +02:00
< button class = " no-margin secondary full-width" > jetzt kostenpflichtig bestellen< / button >
2020-04-08 18:27:46 +02:00
< / div >
< div th:unless = "${user}" >
2020-06-24 18:19:14 +02:00
< a th:href = "@{/login}" class = "button secondary no-margin full-width" > Einloggen und fortfahren.< / a >
2020-04-08 18:27:46 +02:00
< / div >
2020-04-27 09:48:24 +02:00
< / div >
< / form >
< / main >
< footer th:replace = "fragments/footer :: footer" > < / footer >
2020-01-25 16:12:53 +01:00
< / body >
2020-01-26 13:55:23 +01:00
2020-01-25 16:12:53 +01:00
< / html >