mirror of
https://github.com/DerTyp7/shop-ejs-expressjs.git
synced 2025-10-30 12:57:10 +01:00
123 lines
4.6 KiB
Plaintext
123 lines
4.6 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<%- include('partials/head'); %>
|
|
<link rel="stylesheet" href="/css/product.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<%- include('partials/header'); %>
|
|
</header>
|
|
|
|
<div class="content">
|
|
<section class="product-header">
|
|
<div id="product-image">
|
|
<img src="<%=images[0].url %>" alt="" id="productIMG">
|
|
<button style="left: 0" onclick="swImg(1)"><</button>
|
|
<button style="right: 0" onclick="swImg(-1)">></button>
|
|
</div>
|
|
<div id="product-info">
|
|
<h2 style="padding-left: 0px"><%= product.productName %></h2><br>
|
|
<p class="badge">Nr.:<%= product.id %></p><br>
|
|
|
|
<p class="seller">Verkäufer: <%= product.sellerName%></p><br>
|
|
|
|
<p class="product-detail"><b>Preis:</b> <%= product.price.toFixed(2) %> € / Stück</h2>
|
|
<p class="product-detail"><b>Kategorien:</b>
|
|
<% for (var i=0; i < categories.length; i++) {
|
|
%><%=categories[i]["name"] %><%
|
|
if (i != (categories.length - 1)) {
|
|
%>, <%
|
|
}
|
|
} %>
|
|
</h2>
|
|
<div>
|
|
<% if(product.quantity > 0){%>
|
|
<p style="margin-right: 30px; margin-left: 0px;color: green;">
|
|
Lieferbar in <%= product.delivery_time %> - <%= product.delivery_time + 1 %> Tagen
|
|
</p><br><br>
|
|
|
|
|
|
<div style=" float:right;">
|
|
<span><input type="number" id="quantity" min="1" max="<%= product.quantity %>" style="width: 30px; margin-left: 20px" value="1" ></span>
|
|
<label>/<%= product.quantity %></label><br>
|
|
<button class ="order-button"onclick="window.open('/order/<%= product.id %>/' + document.getElementById('quantity').value, '_self')">Bestellen</button>
|
|
</div>
|
|
<% } else { %>
|
|
<p style="margin-right: 30px; margin-left: 0px;color: red; font-weight:bold;">
|
|
Aktuell nicht lieferbar!
|
|
</p>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Beschreibung</h2>
|
|
<p><%= product.productDescription %> </p>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<h2 style="padding-left: 30px;">Rezensionen</h2>
|
|
<% if(user){ %>
|
|
<form class="product-form" action="/review/create/<%= product.id %>" method="post">
|
|
<label for="title">
|
|
<p>Titel: </p>
|
|
<input required type="text" name="title">
|
|
</label>
|
|
|
|
<label for="rating">
|
|
<p>Bewertung (0-10): </p>
|
|
<input required type="number" name="rating" max="10" min="0">
|
|
</label>
|
|
|
|
<label for="content">
|
|
<textarea required name="content" id="" max="500" cols="30" rows="10"></textarea>
|
|
</label>
|
|
|
|
<input style="width: 150px" type="submit" value="Senden">
|
|
</form>
|
|
<% } %>
|
|
</section>
|
|
<section>
|
|
<% if(reviews.length > 0){ %>
|
|
<% for(let i = 0; i < reviews.length; i++){ %>
|
|
<div class="review-container">
|
|
<div class="review-header">
|
|
<p>(<%= reviews[i].rating %>) <b><%= reviews[i].name %>: </b> <%= reviews[i].title %></p>
|
|
</div>
|
|
<div class="review-content">
|
|
<p><%= reviews[i].content %></p>
|
|
</div>
|
|
</div>
|
|
<% } %>
|
|
<% }else{ %>
|
|
<h4 style="color:rgb(158, 51, 51);" class="text-center">Leider hat dieses Produkt noch keine Bewertung.</h4>
|
|
<% } %>
|
|
</section>
|
|
</div>
|
|
<%- include('partials/footer'); %>
|
|
</body>
|
|
</html>
|
|
|
|
<script type="text/javascript">
|
|
var curImg = 0;
|
|
var images = [
|
|
<% for (var i=1; i < images.length; i++) { var url = images[i].url; %>
|
|
"<%=images[i].url %>",
|
|
<% } %>
|
|
];
|
|
function swImg(dir) {
|
|
curImg = curImg + dir;
|
|
console.log(curImg)
|
|
if (curImg > (images.length - 1)) {
|
|
curImg = 0;
|
|
} else if (curImg == -1) {
|
|
curImg = images.length - 1;
|
|
}
|
|
|
|
document.getElementById("productIMG").src = images[curImg];
|
|
}
|
|
</script> |