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

Search page functionality

Browse Source
This commit is contained in:
Ben PC
2022-03-30 09:18:03 +02:00
parent fb4e88e290
commit 0e9c692b7d
2 changed files with 86 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
index.js
View File

@@ -176,7 +176,6 @@ app.post("/review/create/:productId", authenticatedHandler,(req, res) => {
let title = req.body.title;
let content = req.body.content;
mysql_handler.con.query(`INSERT INTO reviews(title, content, rating, userId, productId)
VALUES('${title}', '${content}', '${rating}', (SELECT id FROM users WHERE id = ${req.user}), (SELECT id FROM products WHERE id = ${productId}))`, (err, result) => {
if(err) throw err;
@@ -186,48 +185,23 @@ app.post("/review/create/:productId", authenticatedHandler,(req, res) => {
});
// Search Page
app.get("/search", authNoRedirectHandler,(req, res) => {
var products = [
{
title: "Panasonic LUMIX DC-GH5M2ME",
price: 1699.99,
img: "https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg",
desc: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
},
{
title: "Sony α 7 IV",
price: 2999.00,
img: "https://m.media-amazon.com/images/I/819+EOCsREL._AC_SL1500_.jpg",
desc: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
},
{
title: "Canon PowerShot G3 X",
price: 876.34,
img: "https://m.media-amazon.com/images/I/91bODLikNBL._AC_SL1500_.jpg",
desc: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
},
{
title: "Canon PowerShot SX710",
price: 495.00,
img: "https://m.media-amazon.com/images/I/91w6iw3JtiL._AC_SL1500_.jpg",
desc: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
},
]
app.get("/search/:query",authNoRedirectHandler,(req, res) => {
let query = req.params.query;
let dict = {
title: "Suche",
products: products,
search: query,
user: req.user,
}
mysql_handler.con.query("SELECT * FROM products", function(err, result){
mysql_handler.con.query("SELECT *, (SELECT url FROM product_images i WHERE i.product_id = p.id LIMIT 1) as img FROM products p WHERE name LIKE ?;",["%"+query+"%"],function(err, result){
if(err) throw err;
dict.products = JSON.parse(JSON.stringify(result));
res.render('search', dict)
});
});
})
// Order Page
app.get("/order/:productId/:quantity/", authenticatedHandler, (req, res) => {

86
views/search.ejs
View File

@@ -8,45 +8,100 @@
<%- include('partials/header'); %>
</header>
<div class="filtersDIV">
<br/>
<h3 style="text-align: center;"> FILTER COMMING SOON </h3>
</div>
<% if (products.length == 0) { %>
<h2 class="noProductsH">Keine Produkte gefunden</h2>
<% } else { %>
<div class="productsResInfDIV">
<h2 class="productsResInfH">Suchergebnisse</h2>
</div>
<div class="allProductsDIV">
<% for(var i=0; i < products.length; i++) { var prod = products[i]; %>
<div class="productDIV">
<h4><%=prod.name %></h4>
<% for(var i=0; i < products.length; i++) {
var prod = products[i];
if (!prod.img) { prod.img = "/images/examples.jpg"; }
prod.rating = Math.round(Math.random()*10); %>
<div class="productDIV" onClick="openProduct(<%=prod.id %>)">
<div class="productData">
<h4 style="color: Navy;"><%=prod.name %></h4>
<h4><%=prod.price %>€</h4>
<h4><%
for (var i2=0; i2 < prod.rating; i2 = i2 + 2) {
%>★<%
}
if (prod.rating%2 == 1) {
%>☆<%
}
%></h4>
<h4><%=prod.quantity %> auf Lager</h4>
</div>
<div class="productImage">
<img src="<%= prod.src %>">
<img src="<%=prod.img %>">
</div>
<div class="productInfo"><%=prod.desc %></div>
<div class="productInfo"><%=prod.description %></div>
</div>
<% } %>
</div>
<% } %>
</body>
</html>
<script type="text/javascript">
function openProduct(id, newWindow) {
window.open('/product/'+id, newWindow ? '_blank' : '_self')
}
</script>
<style type="text/css">
.productDIV > img {
.productsResInfDIV {
position: relative;
left: calc(10% + 10px);
width: calc(80% - 20px);
margin-top: 10px;
}
.noProductsH {
text-align: center;
}
.productImage > img {
position: absolute;
max-width: 100%;
max-height: 100%;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.productDIV > .productData {
width: calc(100% - 20px);
height: 90px;
position: absolute;
left: 10px;
top: 10px;
}
.productData > h4 {
margin: 0px;
color: LightSlateGray;
}
.productDIV > .productImage {
width: calc(50% - 15px);
height: calc(100% - 120px);
position: absolute;
background-color: red;
left: 10px;
bottom: 10px;
}
.productDIV > .productInfo {
width: calc(50% - 15px);
height: calc(100% - 120px);
height: calc(100% - 60px);
position: absolute;
overflow-y: hidden;
background-color: blue;
right: 10px;
bottom: 10px;
}
@@ -67,9 +122,16 @@
position: relative;
height: 250px;
cursor: pointer;
}
.filtersDIV {
position: relative;
left: calc(10% + 10px);
width: calc(80% - 20px);
height: 100px;
background-color: grey;
}
.allProductsDIV {
font-size: 0;