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

implement article detail

Browse Source
This commit is contained in:
CodeSteak 2020-01-25 16:41:11 +01:00
parent e124a677b1
commit f3d344fa3c
6 changed files with 105 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
prototype/src/main/resources/templates/fragments/shop.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>e-commerce</title>
</head>
<body>
<nav th:fragment="sidebar">
<h1>Kategorien</h1>
<ul class="secondary">
<li><a>Aufnahmegeräte</a></li>
<li><a>Computer</a></li>
<li><a>Fernseher</a></li>
<li><a>Handys</a></li>
<li><a>Unterhaltungselektronik</a></li>
<li><a>Sonstiges</a></li>
</ul>
</nav>
</body>
</html>

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

@ -10,7 +10,7 @@
<body> <body>
<!-- <nav th:replace="/fragments/header :: header">Header</nav> --> <!-- <nav th:replace="/fragments/header :: header">Header</nav> -->
<main class="content-width modal"> <main class="content-width modal">
<form class="detailgrid s hero " th:action="@{/login}"> <form class="detailgrid s hero " method="post" th:action="@{/login}">
<div class="s"> <div class="s">
<label for="username">Email Adresse</label> <label for="username">Email Adresse</label>
<input class="full-width" type="text" name="username" placeholder="Email Adresse" id="username" required> <input class="full-width" type="text" name="username" placeholder="Email Adresse" id="username" required>

79
prototype/src/main/resources/templates/shop/articles/id.html
View File

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
<title>Sucherergebnisse</title>
<link rel="stylesheet" th:href="@{/css/ecom.css}" />
</head>
<body>
<!-- Dirty hack to align the heading.-->
<nav th:replace="/fragments/header :: header">Header</nav>
<main class=" content-width">
<div class="sidebar-layout" style="min-height: 75vh;">
<nav th:replace="/fragments/shop :: sidebar"></nav>
<div class="content-width">
<div class="detailgrid">
<div class="s">
<h1>Tolle Kamera</h1>
<h2>25.14 €</h2>
<p>
Eine TOLLE Kamera <br>
Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
Aber glaub mir, sie is echt echt TOLL! <br>
Indianerehrenwort!
</p>
</div>
<div class="s">
<img th:src="@{/img/product-1.jpg}" />
</div>
<div class="s"></div>
<form class="s" method="POST">
<h2>50.28 €</h2>
<div>
<label class="nolinebreak">Menge:</label>
<select size="1">
<option>2</option>
</select>
</div>
<h3 class="secondarytext">Auf Lager</h3>
<button>In den Einkaufswagen</button>
</form>
</div>
</div>
</div>
<div class="sidebar-layout">
<div></div>
<div>
<h1>Weitere Schnäpchen</h1>
<div class='grid m base shadow'>
<section> <a th:href="@{/shop/articles/1234}" class="section">
<img th:src="@{/img/product-4.jpg}">
<h2>Kamera Stativ.</h2>
<p class='price'> 25.14 €</p>
<p>
Das Stativ der Zukunft! Jetzt kaufen und verwenden für
wackelfreie Bilder aus der Zukunft!.
</p>
</a>
</section>
<section> <a th:href="@{/shop/articles/1234}" class="section">
<img th:src="@{/img/product-5.jpg}">
<h2>Bluetooth Ersatzfernbedinung</h2>
<p class='price'> 10.14 €</p>
<p>
Kann alles und jeden ausknippsen.
</p>
</a>
</section>
</div>
</div>
</main>
<footer th:replace="/fragments/footer :: footer"></footer>
</body>
</html>

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

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>e-commerce</title> <title>Checkout</title>
<link rel="stylesheet" th:href="@{/css/ecom.css}" /> <link rel="stylesheet" th:href="@{/css/ecom.css}" />
<link rel="stylesheet" th:href="@{/css/listedArticles.css}" /> <link rel="stylesheet" th:href="@{/css/listedArticles.css}" />
<script th:src="@{/js/filterTable.js}"></script> <script th:src="@{/js/filterTable.js}"></script>

2
prototype/src/main/resources/templates/shop/checkoutFinish.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>e-commerce</title> <title>Checkout erfolgreich!</title>
<link rel="stylesheet" th:href="@{/css/ecom.css}" /> <link rel="stylesheet" th:href="@{/css/ecom.css}" />
<link rel="stylesheet" th:href="@{/css/listedArticles.css}" /> <link rel="stylesheet" th:href="@{/css/listedArticles.css}" />
<script th:src="@{/js/scrollToContent.js}"></script> <script th:src="@{/js/scrollToContent.js}"></script>

12
prototype/src/main/resources/templates/shop/search.html
View File

@ -19,17 +19,7 @@
</div> </div>
</div> </div>
<main class="sidebar-layout content-width"> <main class="sidebar-layout content-width">
<nav> <nav th:replace="/fragments/shop :: sidebar"></nav>
<h1>Kategorien</h1>
<ul class="secondary">
<li><a>Aufnahmegeräte</a></li>
<li><a>Computer</a></li>
<li><a>Fernseher</a></li>
<li><a>Handys</a></li>
<li><a>Unterhaltungselektronik</a></li>
<li><a>Sonstiges</a></li>
</ul>
</nav>
<div class="content-width"> <div class="content-width">
<div class='grid m condensed'> <div class='grid m condensed'>
<section> <a th:href="@{/shop/articles/1234}" class="section"> <section> <a th:href="@{/shop/articles/1234}" class="section">