janis/shop-ejs-expressjs
1
0
Fork 0
mirror of https://github.com/DerTyp7/shop-ejs-expressjs.git synced 2025-10-29 20:42:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Startseite - automatisches EInfügen der Produktbilder

Browse Source
This commit is contained in:
jonasChristoph
2022-03-30 13:29:00 +02:00
parent e6eaa271cd
commit 078ab63580
2 changed files with 103 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.js
View File

@@ -113,15 +113,29 @@ function notAuthenticatedHandler(req, res, next){
app.get("/", authNoRedirectHandler, (req, res) => {
mysql_handler.con.query("SELECT * FROM products", function(err, result){
if(err) throw err;
let products = JSON.parse(JSON.stringify(result));
mysql_handler.con.query("SELECT * FROM product_images", function(err, result){
if(err) throw err;
let dict = {
title: "Startseite",
user: req.user,
products: JSON.parse(JSON.stringify(result))
products: products,
product_images: JSON.parse(JSON.stringify(result)),
}
res.render('index', dict)
})
});
});
app.get("/productImage/:productId", (req,res) => {
mysql_handler.con.query(`SELECT url FROM product_images WHERE product_id = ${req.params.productId} `,(err,result) =>{
if (result.length > 0){
res.redirect(JSON.parse(JSON.stringify(result))[0].url)
}
else {
res.redirect("/images/examples.jpg")
}
})
})
// Account
app.get("/account", authenticatedHandler, (req, res) => {

54
views/index.ejs
View File

@@ -1,8 +1,10 @@
<!DOCTYPE html>
<html lang="en" style="">
<head>
<%- include('partials/head'); %>
</head>
<body style="">
<%- include('partials/header'); %>
<style>
@@ -13,16 +15,18 @@
margin: 0;
background-color: white;
}
body {
min-height: 100%;
}
.grid-container {
display: flex;
gap: 20px;
margin: 0 auto;
grid-template-columns: auto auto auto auto;
padding: 20px;
}
.grid-item {
background-color: white;
border: 10px;
@@ -39,6 +43,7 @@
display: block;
height: 50px;
}
.middle-content {
background: linear-gradient(to bottom left, #313c48, white);
background-repeat: no-repeat;
@@ -54,9 +59,12 @@
<div class="grid-container">
<% for (let i=0; i < products.length && i <=4; i++){ %>
<div class="grid-item">
<p><%= products[i].name %></p>
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[i].id%>','_self')">
<p>
<%= products[i].name %>
</p>
<img src="/productImage/<%= products[i].id %>"
style='height: 100%; width: 100%; object-fit: contain'
onclick="window.open('/product/<%- products[i].id%>','_self')">
</div>
<%}%>
</div>
@@ -66,38 +74,46 @@
<div class="grid-container">
<div class="grid-item">
<% let randomNr=Math.floor(Math.random() * products.length); %>
<%= products[randomNr].name %>
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[randomNr].id%>','_self')">
<p><%= products[randomNr].name %></p>
<img src="/productImage/<%= products[randomNr].id %>"
style='height: 100%; width: 100%; object-fit: contain'
onclick="window.open('/product/<%- products[randomNr].id%>','_self')">
</div>
<div class="grid-item">
<% let randomNr2=Math.floor(Math.random() * products.length); %>
<%= products[randomNr2].name %>
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr2].id%>','_self')">
<p><%= products[randomNr].name %></p>
<img src="/productImage/<%= products[randomNr2].id %>"
style='height: 100%; width: 100%; object-fit: contain'
onclick="window.open('/product/<%- products[randomNr2].id%>','_self')">
</div>
<div class="grid-item">
<% let randomNr3=Math.floor(Math.random() * products.length); %>
<%= products[randomNr3].name %>
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr3].id%>','_self')">
<p><%= products[randomNr].name %></p>
<img src="/productImage/<%= products[randomNr3].id %>"
style='height: 100%; width: 100%; object-fit: contain'
onclick="window.open('/product/<%- products[randomNr3].id%>','_self')">
</div>
<div class="grid-item">
<% let randomNr4=Math.floor(Math.random() * products.length); %>
<%= products[randomNr4].name %>
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr4].id%>','_self')">
<p><%= products[randomNr].name %></p>
<img src="/productImage/<%= products[randomNr4].id %>"
style='height: 100%; width: 100%; object-fit: contain'
onclick="window.open('/product/<%- products[randomNr4].id%>','_self')">
</div>
</div>
<div class="grid-container" style="margin-bottom: 100px;">
<% for (let i=0; i < products.length && i <=4; i++){ %>
<div class="grid-item">
<%= products[i].name %>
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[i].id%>','_self')">
<% let randomNr5=Math.floor(Math.random() * products.length); %>
<p><%= products[randomNr].name %></p>
<img src="/productImage/<%= products[randomNr5].id %>"
style='height: 100%; width: 100%; object-fit: contain'
onclick="window.open('/product/<%- products[randomNr5].id%>','_self')">
</div>
<%}%>
</div>
</div>
<%- include('partials/footer'); %>
</body>
</html>