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

28
index.js
View File

@@ -113,15 +113,29 @@ function notAuthenticatedHandler(req, res, next){
app.get("/", authNoRedirectHandler, (req, res) => { app.get("/", authNoRedirectHandler, (req, res) => {
mysql_handler.con.query("SELECT * FROM products", function(err, result){ mysql_handler.con.query("SELECT * FROM products", function(err, result){
if(err) throw err; if(err) throw err;
let products = JSON.parse(JSON.stringify(result));
let dict = { mysql_handler.con.query("SELECT * FROM product_images", function(err, result){
title: "Startseite", if(err) throw err;
user: req.user, let dict = {
products: JSON.parse(JSON.stringify(result)) title: "Startseite",
} user: req.user,
res.render('index', dict) 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 // Account
app.get("/account", authenticatedHandler, (req, res) => { app.get("/account", authenticatedHandler, (req, res) => {

148
views/index.ejs
View File

@@ -1,103 +1,119 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" style=""> <html lang="en" style="">
<head>
<%- include('partials/head'); %> <head>
<%- include('partials/head'); %>
</head> </head>
<body style="">
<%- include('partials/header'); %> <body style="">
<style> <%- include('partials/header'); %>
html { <style>
html {
height: 100%; height: 100%;
overflow-x: auto; overflow-x: auto;
overflow-y: scroll; overflow-y: scroll;
margin: 0; margin: 0;
background-color: white; background-color: white;
} }
body {
body {
min-height: 100%; min-height: 100%;
} }
.grid-container {
.grid-container {
display: flex; display: flex;
gap: 20px; gap: 20px;
margin: 0 auto; margin: 0 auto;
grid-template-columns: auto auto auto auto;
padding: 20px; padding: 20px;
} }
.grid-item {
.grid-item {
background-color: white; background-color: white;
border: 10px; border: 10px;
border-color: rgba(111,111,111,0.2) transparent transparent; border-color: rgba(111, 111, 111, 0.2) transparent transparent;
padding: 20px; padding: 20px;
font-size: 20px; font-size: 20px;
height: 320px; height: 320px;
width: 280px; width: 280px;
text-align: left; text-align: left;
}
.grid-item p{ }
display:block;
height: 50px; .grid-item p {
} display: block;
.middle-content { height: 50px;
}
.middle-content {
background: linear-gradient(to bottom left, #313c48, white); background: linear-gradient(to bottom left, #313c48, white);
background-repeat: no-repeat; background-repeat: no-repeat;
width: 80%; width: 80%;
margin: auto; margin: auto;
margin-top: 50px; margin-top: 50px;
} }
</style> </style>
<div class="middle-content"> <div class="middle-content">
<div id="headlineTop"> <div id="headlineTop">
<h2 style="padding-left:20px; padding-top:50px">Top Angebote</h2> <h2 style="padding-left:20px; padding-top:50px">Top Angebote</h2>
</div> </div>
<div class="grid-container" > <div class="grid-container">
<% for (let i=0; i < products.length && i <=4; i++){ %> <% for (let i=0; i < products.length && i <=4; i++){ %>
<div class="grid-item"> <div class="grid-item">
<p><%= products[i].name %></p> <p>
<%= 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')"> </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>
<%}%> <%}%>
</div>
<div id="headlineTop">
<h2 style="padding-left:20px;">Unsere Empfehlungen für Sie</h2>
</div>
<div class="grid-container">
<div class="grid-item">
<% let randomNr=Math.floor(Math.random() * products.length); %>
<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>
<div id="headlineTop"> <div class="grid-item">
<h2 style="padding-left:20px;">Unsere Empfehlungen für Sie</h2> <% let randomNr2=Math.floor(Math.random() * products.length); %>
<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>
<div class="grid-container"> <div class="grid-item">
<div class="grid-item"> <% let randomNr3=Math.floor(Math.random() * products.length); %>
<% let randomNr = Math.floor(Math.random() * products.length); %> <p><%= products[randomNr].name %></p>
<%= products[randomNr].name %> <img src="/productImage/<%= products[randomNr3].id %>"
<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')"> style='height: 100%; width: 100%; object-fit: contain'
</div> onclick="window.open('/product/<%- products[randomNr3].id%>','_self')">
<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')">
</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')">
</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')">
</div>
</div> </div>
<div class="grid-container" style="margin-bottom: 100px;"> <div class="grid-item">
<% for (let i=0; i < products.length && i <=4; i++){ %> <% let randomNr4=Math.floor(Math.random() * products.length); %>
<div class="grid-item"> <p><%= products[randomNr].name %></p>
<%= products[i].name %> <img src="/productImage/<%= products[randomNr4].id %>"
<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')"> style='height: 100%; width: 100%; object-fit: contain'
onclick="window.open('/product/<%- products[randomNr4].id%>','_self')">
</div>
<%}%> </div>
<div class="grid-item">
<% 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> </div>
</div>
<%- include('partials/footer'); %> <%- include('partials/footer'); %>
</body> </body>
</html> </html>