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

Merge branch 'main' of https://github.com/DerTyp187/onlineshop

Browse Source
This commit is contained in:
Janis M
2022-03-30 14:31:59 +02:00
parent cde637c702 8edc854877
commit df8f0688ae
4 changed files with 82 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
views/index.ejs
View File

@@ -79,7 +79,7 @@
</div>
<div class="grid-item">
<% let randomNr2=Math.floor(Math.random() * products.length); %>
<p><%= products[randomNr].name %></p>
<p><%= products[randomNr2].name %></p>
<img src="/productImage/<%= products[randomNr2].id %>"
style='height: 100%; width: 100%; object-fit: contain'
onclick="window.open('/product/<%- products[randomNr2].id%>','_self')">
@@ -87,7 +87,7 @@
</div>
<div class="grid-item">
<% let randomNr3=Math.floor(Math.random() * products.length); %>
<p><%= products[randomNr].name %></p>
<p><%= products[randomNr3].name %></p>
<img src="/productImage/<%= products[randomNr3].id %>"
style='height: 100%; width: 100%; object-fit: contain'
onclick="window.open('/product/<%- products[randomNr3].id%>','_self')">
@@ -95,7 +95,7 @@
</div>
<div class="grid-item">
<% let randomNr4=Math.floor(Math.random() * products.length); %>
<p><%= products[randomNr].name %></p>
<p><%= products[randomNr4].name %></p>
<img src="/productImage/<%= products[randomNr4].id %>"
style='height: 100%; width: 100%; object-fit: contain'
onclick="window.open('/product/<%- products[randomNr4].id%>','_self')">
@@ -103,7 +103,7 @@
</div>
<div class="grid-item">
<% let randomNr5=Math.floor(Math.random() * products.length); %>
<p><%= products[randomNr].name %></p>
<p><%= products[randomNr5].name %></p>
<img src="/productImage/<%= products[randomNr5].id %>"
style='height: 100%; width: 100%; object-fit: contain'
onclick="window.open('/product/<%- products[randomNr5].id%>','_self')">

62
views/search.ejs
View File

@@ -7,9 +7,23 @@
<header>
<%- include('partials/header'); %>
</header>
<div class="filtersDIV" style="display:none">
<br/>
<h3 style="text-align: center; "> FILTER COMMING SOON </h3>
<div class="filtersDIV">
<select id="cat-select" class="left" onchange="updateFilters();">
<option value="0">Kategorie: Alle</option>
<% for(var i=0; i < categories.length; i++) { var cat = categories[i]; %>
<option <%=Cat == cat.id ? "selected" : ""%> value="<%=cat.id%>">Kategorie: <%=cat.name %></option>
<% } console.log(sort) %>
</select>
<select id="sort-select" class="right" onchange="updateFilters();">
<option <%=sort == 0 ? "selected" : ""%> value="0">Sortierung: Standart</option>
<option <%=sort == 1 ? "selected" : ""%> value="1">Sortierung: Preis aufsteigend</option>
<option <%=sort == 2 ? "selected" : ""%> value="2">Sortierung: Preis absteigend</option>
<option <%=sort == 3 ? "selected" : ""%> value="3">Sortierung: Meistverkauft</option>
<option <%=sort == 4 ? "selected" : ""%> value="4">Sortierung: A-Z</option>
<option <%=sort == 5 ? "selected" : ""%> value="5">Sortierung: Z-A</option>
</select>
</div>
<% if (products.length == 0) { %>
@@ -69,22 +83,23 @@
</html>
<script type="text/javascript">
var cat = document.getElementById("cat-select");
var sort = document.getElementById("sort-select");
function updateFilters() {
window.open('/search/<%=search %>/?cat='+cat.value+'&sort='+sort.value,'_self')
}
function openProduct(id, newWindow) {
window.open('/product/'+id, newWindow ? '_blank' : '_self')
}
</script>
<style type="text/css">
html,body{
height: 100% !important;
display: block !important;
min-height: 100vh;
flex-direction:unset !important;
}
a, a:hover, a:focus, a:active > .allProductsDIV {
text-decoration: none;
color: inherit;
html, body{
height: 100% !important;
display: block !important;
min-height: 100vh;
flex-direction:unset !important;
}
/* SEARCH INFO */
@@ -129,7 +144,7 @@
right: 0;
bottom: 0;
}
.productDIV > .productImage {
.productImage {
width: calc(50% - 15px);
height: calc(100% - 120px);
position: absolute;
@@ -142,7 +157,7 @@
}
/* DESCRIPTION */
.productDIV > .productInfo {
.productInfo {
width: calc(50% - 15px);
height: calc(100% - 60px);
position: absolute;
@@ -153,7 +168,7 @@
}
/* PRICE ETC */
.productDIV > .productData {
.productData {
width: calc(100% - 20px);
height: 90px;
position: absolute;
@@ -164,16 +179,25 @@
margin: 0px;
color: LightSlateGray;
}
a, a:hover, a:focus, a:active > .allProductsDIV {
text-decoration: none;
color: inherit;
}
/* FILTERS */
.filtersDIV {
margin-top: 20px;
position: relative;
left: calc(10% + 10px);
width: calc(80% - 20px);
height: 100px;
background-color: grey;
height: 30px;
}
.filtersDIV > .right {
float: right;
}
.filtersDIV > .left{
float: left;
}
/* PRODUCTS GRID */
.allProductsDIV {