Skip to content

Commit 5609404

Browse files
AdityaKumar5155AdityaKumar5155
authored
Merge pull request #9 from devraushan/productDetailPage_devraushan
feat: added product details page for individual products
2 parents 8d0100b + c78f573 commit 5609404

File tree

5 files changed

+147
-19
lines changed

5 files changed

+147
-19
lines changed

‎app/controllers/viewControllers.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,22 @@ const productListView = (req,res)=>{
4141
});
4242
}
4343

44+
const productDetailsView=(req,res)=>{
45+
if(!req.session.isLoggedIn){
46+
res.redirect('/login');
47+
return;
48+
}
49+
const { productId } = req.params
50+
db.query(`SELECT * FROM products WHERE id="${productId}"`,(error,results,fields)=>{
51+
if(error){
52+
console.log('Error executing query: '+error);
53+
res.send(error);
54+
return;
55+
}
56+
res.render("productDetails",{product:results[0],isLoggedIn:req.session.isLoggedIn});
57+
})
58+
}
59+
4460
module.exports = {
45-
loginView,signUpView,forgotPassView,productListView
61+
loginView,signUpView,forgotPassView,productListView,productDetailsView
4662
}

‎app/public/stylesPro.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ header {
2424
border-radius: 5px;
2525
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
2626
margin: 10px;
27+
transition: transform 0.25s ease-in-out;
28+
}
29+
30+
.card:hover{
31+
transform: scale(1.03);
2732
}
2833

2934
.product-image {
@@ -89,3 +94,8 @@ header {
8994
outline: none;
9095
border-color: #007bff;
9196
}
97+
98+
a{
99+
text-decoration: none;
100+
color:inherit;
101+
}

‎app/routes/route.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,5 +35,6 @@ router.get('/forgotPass', viewController.forgotPassView)
3535
router.post('/forgotPass', loginController.forgotPass)
3636
router.post('/changePass', loginController.changePass)
3737
router.post('/logout', loginController.logout)
38+
router.get('/product/:productId',viewController.productDetailsView)
3839

3940
module.exports = router;

‎app/views/productDetails.ejs‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title><%=product.name%></title>
7+
</head>
8+
<style>
9+
*{
10+
margin: 0;
11+
}
12+
header{
13+
14+
height: 100px;
15+
display: flex;
16+
align-items: center;
17+
background-color: blue;
18+
color: whitesmoke;
19+
}
20+
header>h1{
21+
text-align: center;
22+
margin: auto;
23+
}
24+
.mainProductContainer{
25+
display: flex;
26+
row-gap: 10px;
27+
}
28+
.subContainer1{
29+
flex: 50%;
30+
margin:20px;
31+
32+
}
33+
.subContainer1>img{
34+
height: 100%;
35+
width: 100%;
36+
}
37+
.subContainer2{
38+
margin: 20px;
39+
flex:50%;
40+
}
41+
.colorVariantContainer{
42+
display: flex;
43+
}
44+
.colorVariant{
45+
margin: 2px;
46+
height: 20px;
47+
width: 20px;
48+
border-radius: 50%;
49+
}
50+
.description{
51+
margin-top: 20px;
52+
width: 50%;
53+
}
54+
p{
55+
margin:10px 0;
56+
font-size: 1.1rem;
57+
}
58+
.productName{
59+
color: rgb(4, 4, 82);
60+
}
61+
@media only screen and (max-width: 1025px) {
62+
63+
.mainProductContainer{
64+
flex-direction: column;
65+
}
66+
}
67+
</style>
68+
<body>
69+
<header>
70+
<h1>InsecureNet</h1>
71+
</header>
72+
<div class="mainProductContainer">
73+
<div class="subContainer1">
74+
<img src=<%=product.image%>/>
75+
76+
</div>
77+
<div class="subContainer2">
78+
<h1 class="productName"><%=product.name%></h1>
79+
<p><strong>Category : </strong><%=product.category%></p>
80+
<p><strong>Company : </strong> <%=product.company %></p>
81+
<p><strong>Price : </strong><%=product.price %> INR</p>
82+
<div>
83+
<h3>Available Colour Variants : </h3>
84+
<div class="colorVariantContainer">
85+
<% product.colors.forEach(color=>{ %>
86+
<div class="colorVariant" style="background-color: <%= color%>;" ></div>
87+
<% }) %>
88+
</div>
89+
</div>
90+
<div class="description">
91+
<p><%=product.description%></p>
92+
</div>
93+
<p style="color:#1877f2;"><strong>Featured: </strong><%=(product.featured==1)?"Yes":"No"%></p>
94+
<p style="color:#1877f2;"><strong>Shipping: </strong><%=(product.shipping==1)?"Yes":"No"%></p>
95+
<a href="/">Back To Home</a>
96+
</div>
97+
</div>
98+
</body>
99+
</html>

‎app/views/products.ejs‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,27 @@
2323

2424
<div class="container">
2525
<% products.forEach(product => { %>
26-
<div class="card">
27-
<img src="<%= product.image %>" alt="<%= product.name %>" class="product-image">
28-
<div class="product-details">
29-
<h2><%= product.name %></h2>
30-
<p class="company"><strong>Company:</strong> <%= product.company %></p>
31-
<p class="price"><strong>Price:</strong> <%= product.price %></p>
32-
<p class="category"><strong>Category:</strong> <%= product.category %></p>
33-
<% if (product.featured) { %>
34-
<p class="featured"><strong>Featured:</strong> Yes</p>
35-
<% } else { %>
36-
<p class="featured"><strong>Featured:</strong> No</p>
37-
<% } %>
38-
<% if (product.shipping) { %>
39-
<p class="shipping"><strong>Shipping:</strong> Yes</p>
40-
<% } else { %>
41-
<p class="shipping"><strong>Shipping:</strong> No</p>
42-
<% } %>
26+
<a href="/product/<%=product.id%>">
27+
<div class="card">
28+
<img src="<%= product.image %>" alt="<%= product.name %>" class="product-image">
29+
<div class="product-details">
30+
<h2><%= product.name %></h2>
31+
<p class="company"><strong>Company:</strong> <%= product.company %></p>
32+
<p class="price"><strong>Price:</strong> <%= product.price %></p>
33+
<p class="category"><strong>Category:</strong> <%= product.category %></p>
34+
<% if (product.featured) { %>
35+
<p class="featured"><strong>Featured:</strong> Yes</p>
36+
<% } else { %>
37+
<p class="featured"><strong>Featured:</strong> No</p>
38+
<% } %>
39+
<% if (product.shipping) { %>
40+
<p class="shipping"><strong>Shipping:</strong> Yes</p>
41+
<% } else { %>
42+
<p class="shipping"><strong>Shipping:</strong> No</p>
43+
<% } %>
44+
</div>
4345
</div>
44-
</div>
46+
</a>
4547
<% }); %>
4648
</div>
4749
</body>

0 commit comments

Comments
 (0)