-
Notifications
You must be signed in to change notification settings - Fork 0
/
products.php
471 lines (430 loc) · 17.9 KB
/
products.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
<?php require 'connection.php' ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/index.css" />
<!--THE MAIN STYLES FILE-->
<link rel="stylesheet" href="css/CARDstyles.css" />
<!-- <link rel="stylesheet" href="footer.css"> -->
<link rel="stylesheet" href="css/accordian.css" />
<link rel="stylesheet" href="css/hamburger.css" />
<link rel="stylesheet" href="css/ratings.css" />
<link rel="stylesheet" href="css/footer.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<!--FONT AWESOME STYLES FILE-->
<title>PRODUCT_PROFILE</title>
<!--THE MAIN JS FILE-->
</head>
<body>
<!--THE MAIN TYPE OF NAV BAR BEGINS-->
<nav class="prinav">
<div class="left">
<a href="index.php">HOME</a>
<!-- <a href="products.php">PRODUCTS</a> -->
<a href="index.html">EDUCATION</a>
<a href="contact.html">CONTACT US</a>
</div>
<div class="right">
<a href=""><i class="fa fa-phone" style="position: absolute; margin-right: 25px; font-size: 14px" aria-hidden="true"></i></a><a href="#"> 011454525687</a>
<!-- <a href="#">PRODUCTS</a> -->
<a href="adminlogs.html" target="_blank">SIGN-IN/UP</a>
</div>
</nav>
<!--THE SECOND TYPE OF NAV BAR BEGINS-->
<div class="secnav">
<div class="image">
<a href="index.php"> <img src="IMG/logo.png" alt="logo" /></a>
</div>
<div class="details">
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><a class="menu__item" href="index.php">HOME</a></li>
<li><a class="menu__item" href="adminlogs.html">SIGN-UP</a></li>
<li><a class="menu__item" href="adminlogs.html">SIGN-IN</a></li>
<li><a class="menu__item" href="index.html">EDUCATION</a></li>
<li><a class="menu__item" href="products.php">PRODUCTS</a></li>
</ul>
</div>
<a class="secnav_item" href="#">STRINGS</a>
<a class="secnav_item" href="#">DRUMS</a>
<a class="secnav_item" href="#">FLUTES</a>
<div id="input-container">
<i class="fa-solid fa-magnifying-glass filter"></i>
<input type="search" id="search-input" class="searchbox secnav_item" placeholder="search" />
</div>
</div>
</div>
<!--THE MAIN CONTINER OF PRODUCT,FOOTER,SIDEBAR-->
<div class="main">
<div class="filters">
<h2>FILTERS<i class="fa-solid fa-filter"></i></h2>
<br /><br />
<button class="accordion">
PRICE<i class="fa-solid fa-sort-down"></i>
</button>
<div class="panel price_ranger">
<input id="pricemin" type="number" min="0" placeholder="Min" />
<span>-</span>
<input id="pricemax" type="number" min="0" placeholder="Max" />
<button class="filter playbtn"><i class="fa-solid fa-play"></i></button>
<br />
</div>
<button class="accordion">
SHIPPING<i class="fa-solid fa-sort-down"></i>
</button>
<div class="panel">
<label for="">FREE SHIPPING</label>
<input id="freeshipping" class="filter check" type="checkbox" />
<label for="">PAID</label>
<input id="shipping" class="filter check" type="checkbox" />
</div>
<button class="accordion">
RATINGS<i class="fa-solid fa-sort-down"></i>
</button>
<div id="div" class="panel">
<!--THE STAR RATINGS CATEGOEY STARTS HERE-->
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
</fieldset>
</div>
<button class="accordion">
WARRANTY<i class="fa-solid fa-sort-down"></i>
</button>
<div class="panel">
<label for="">3 MONTHS</label>
<input id="3m" class="filter check warranty" type="checkbox" /><br />
<label for="">6 MONTHS</label>
<input id="6m" class="filter check warranty" type="checkbox" /><br />
<label for="">1 YEAR</label>
<input id="1y" class="filter check warranty" type="checkbox" /><br />
</div>
<button id="clear-filters">Clear filters</button>
<script src="script.js"></script>
</div>
<div id="products" class="products">
<div id="p_list" class="products_list">
<!--THE PRODUCT CARD CATEGORY STARTS HERE-->
<?php
//in first the $query stores the all of the outputs from product table
$query = "SELECT * FROM product ";
//values assigned to pricemin in default
$pricemin = 0;
//values assigned to pricemax in default
$pricemax = pow(10, 10);
//initially the $warranty_in variable stores the '0' value
$warranty_in = '0';
//initially the $shipping_in variable stores the '5' value
$shipping_in = '5';
//this checks abut the warranty period
if (isset($_GET['3m'])) {
//initially the $warranty_in variable stores the '0' value and now thw variable changes to "0,'3m'"
$warranty_in .= ",'3m'";
}
if (isset($_GET['6m'])) {
//initially the $warranty_in variable stores the '0' value and now thw variable changes to "0,'6m'"
$warranty_in .= ",'6m'";
}
if (isset($_GET['1y'])) {
//initially the $warranty_in variable stores the '0' value and now the variable changes to "0,'1y'"
$warranty_in .= ",'1y'";
}
//Using free shipping to filter the products
if (isset($_GET['freeshipping'])) {
//initially the $shipping_in variable stores the '5' value and now the variable changes to "'5','0'"
$shipping_in .= ",'0'";
}
if (isset($_GET['shipping'])) {
//initially the $shipping_in variable stores the '5' value and now the variable changes to "'5','1'"
$shipping_in .= ",'1'";
}
//this condition executes if there is no shipping fieldss are choosen in the filter tab
if (!isset($_GET['freeshipping']) && !isset($_GET['shipping'])) {
$shipping_in .= ",'0','1'";
}
//this condition executes if there is no warrnty fields are choosen in the filter tab
if (!isset($_GET['3m']) && !isset($_GET['6m']) && !isset($_GET['1y'])) {
$warranty_in .= ",'0','3m','6m','1y'";
}
//SETTING THE PRICE RANGE
if (isset($_GET['pricemax'])) {
//this sets the value if pricemax is setted
$pricemax = $_GET['pricemax'];
}
if (isset($_GET['pricemin'])) {
//this sets the value if pricemin is setted
$pricemin = $_GET['pricemin'];
}
//Using average rating to filter the products
if (isset($_GET['rating'])) {
// the below query executes if rating is set
/* selects all from the product table and selects the avg_ratng from the table r (r is allias of rating)
inside the innerjoin the sub-querie from 196-198 line is executed
in it the product_id as well as the average of the rating is calculated and shown in the newly made avg_rating
column and is grouped by the product_id
*/
$query = "SELECT product.*,r.avg_rating
FROM product
INNER JOIN (
SELECT product_ID, AVG(rating) avg_rating
FROM review
GROUP BY product_ID
) r ON r.product_ID = product.product_ID
where r.avg_rating >={$_GET['rating']} and warranty IN ($warranty_in)";
} else {
//from here onwarsd the $query variable concatinates the relevant query accordingly to warranty
$query .= " where warranty IN ($warranty_in)";
}
//from here onwarsd the $query variable concatinates the relevant query accordingly to shipping
$query .= " and shipping IN ($shipping_in) ";
//from here onwarsd the $query variable concatinates the relevant query accordingly to pricemin and max set values
$query .= "and price BETWEEN $pricemin AND $pricemax ";
if (isset($_GET['search'])) {
//from here onwarsd the $query variable concatinates the relevant search query if it is set
$query .= " AND name LIKE '%{$_GET['search']}%'";
}
// echo $query;
//now the relevant query is finalized and is passed to the search method
$products = database::search($query);
//of above $product is as an object and in it the attribute num_rows is taken
$product_count = $products->num_rows;
//loop iterates untill the end of the produtcs present in the db
while ($product = $products->fetch_assoc()) {
//this fetches the image from the database with compraing to the product id
$img = database::search("SELECT * FROM `image` WHERE `product_id` = '{$product['product_ID']}' ")->fetch_assoc()['path'];
//this fetch the category specification from the database and query enables here
$category = database::search("SELECT * FROM `category` WHERE `category_ID` = '" . $product['category_ID'] . "' ");
$category = $category->fetch_assoc()['name'];
?>
<div class="product-card">
<div class="badge"><?php echo $product['deal'] ?></div>
<div class="product-tumb">
<!--this href makes the thumbnail direct to the relevant product-->
<a href="product.php?id=<?php echo $product['product_ID'] ?>""><img style=" width: 350px; object-fit:contain;" src=" <?php echo $img ?>" alt="" srcset="" /></a>
</div>
<div class="product-details">
<span class="product-catagory"><?php echo $category ?></span>
<!--this href makes title text to re-direct to the relevant product-->
<h4><a href="product.php?id=<?php echo $product['product_ID'] ?>"><?php echo $product['name'] ?></a></h4>
<p>
<?php echo $product['description'] ?>
</p>
<div class="product-bottom-details">
<div class="product-price"><small>Rs<?php echo $product['mrp'] ?></small>Rs<?php echo $product['price'] ?></div>
<div class="product-links">
<a href="Cart.html"><button class="btnbuy">BUY NOW</button></a>
<a href="#"><i class="fa fa-heart"></i></a>
<a href="My Shopping Cart.html"><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
</div>
</div>
<!--tHE CARD DIV ENDS HERE-->
<?php }
//condition checks the number of rows are 0 or not if 0 displays no product
if ($product_count == 0) {
?>
<h1>No Product Found</h1>
<?php
}
?>
</div>
</div>
<footer>
<div class="footer">
<div class="inner-footer">
<!-- for company name and description -->
<div class="footer-items">
<img src="" alt="" />
<h1>WEENA NAADHA</h1>
<p>THE ONE AND ONLY PLACE FOR YOU MUSICAL NEEDS</p>
</div>
<!-- for quick links -->
<div class="footer-items">
<h3>USEFUL Links</h3>
<div class="border1"></div>
<!--for the underline -->
<ul>
<a href="index.php"><li>Home</li></a>
<a href="products.php"><li>Shop Now</li></a>
<a href="index.html"><li>Education</li></a>
<a href="contact.html"><li>Contact us</li></a>
</ul>
</div>
<!-- for some other links -->
<div class="footer-items">
<h3>Categories</h3>
<div class="border1"></div>
<!--for the underline -->
<ul>
<a href="#">
<li>Drums</li>
</a>
<a href="#">
<li>Flutes</li>
</a>
<a href="#">
<li>Strings</li>
</a>
<a href="#">
<li>Columns</li>
</a>
</ul>
</div>
<!-- for contact us info -->
<div class="footer-items">
<h3>Contact us</h3>
<div class="border1"></div>
<ul>
<li>
<!-- <i class="fa fa-map-marker" aria-hidden="true"></i>--> <a href="#zzz"> Find Us Here</a>
</li>
<li>
<!-- <i class="fa fa-phone" aria-hidden="true"></i>-->011454525687
</li>
<li>
<!-- <i class="fa fa-envelope" aria-hidden="true"></i>-->[email protected]
</li>
</ul>
<!-- for social links -->
<div class="social-media">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-google-plus-square"></i></a>
</div>
</div>
</div>
<!-- Footer Bottom start -->
<div class="footer-bottom">
<span>
WE ACCEPT<i class="fa-brands fa-cc-visa"></i><i class="fa-brands fa-cc-mastercard"></i><i class="fa-solid fa-building-columns"></i><i class="fa-solid fa-money-bill"></i>
</span>
<div class="email">
<label for="">ENTER E-MAIL</label>
<!-- <i class="fa-solid fa-magnifying-glass"></i> -->
<input class="intouch" type="text" placeholder="Get In Touch" />
</div>
</div>
</div>
</footer>
</div>
<script src="js/accordian.js"></script>
<script>
var search = document.getElementById("search-input");
var pmax = document.getElementById("pricemax");
var pmin = document.getElementById("pricemin");
var warranty3m = document.getElementById("3m");
var warranty6m = document.getElementById("6m");
var warranty1y = document.getElementById("1y");
var freeshiping = document.getElementById("freeshipping");
var shipping = document.getElementById("shipping");
var rating = 0;
const radioButtons = document.querySelectorAll('input[name="rating"]');
//set values using url
//in here the location,search,length are built in variables in JS
if (location.search.length > 0) {
//in here location.href gives the releavnt link of the website
let url_string = location.href;
url = new URL(url_string);//this is a object of URL
if (url.searchParams.get("pricemax") != null) {
//in searchparams the method .get takes the value of the relevant parameter of the URL
pmax.value = url.searchParams.get("pricemax");
}
if (url.searchParams.get("pricemin") != null) {
pmin.value = url.searchParams.get("pricemin");
}
if (url.searchParams.get("3m") != null) {
warranty3m.checked = true;
}
if (url.searchParams.get("6m") != null) {
warranty6m.checked = true;
}
if (url.searchParams.get("1y") != null) {
warranty1y.checked = true;
}
if (url.searchParams.get("freeshipping") != null) {
freeshiping.checked = true;
}
if (url.searchParams.get("shipping") != null) {
shipping.checked = true;
}
if (url.searchParams.get("rating") != null) {
rating = url.searchParams.get("rating");
}
if (rating > 0) {
radioButtons.forEach(function(radioButton) {
if (radioButton.value == rating) {
radioButton.checked = true;
}
});
}
}
for (const radioButton of radioButtons) {
radioButton.addEventListener("click", getRating);
}
document.getElementById('clear-filters').addEventListener("click", () => {
location.href = "products.php";
});
function getRating() {
for (const radioButton of radioButtons) {
if (radioButton.checked) {
rating = radioButton.value;
setGetParams();
}
}
}
let filter_elements = document.getElementsByClassName("filter");
for (var i = 0; i < filter_elements.length; i++) {
filter_elements[i].addEventListener('click', setGetParams, false);
}
pmin.oninput = function() {
pmax.min = this.value;
};
pmax.oninput = function() {
pmin.max = this.value;
};
//from here onwards thelink or the url is made and redirets to the relevant link
function setGetParams() {
let url = "products.php?";
if (pmax.value != "") {
url = url + "&pricemax=" + pmax.value;
}
if (pmin.value != "") {
url = url + "&pricemin=" + pmin.value;
}
if (rating != "") {
url = url + "&rating=" + rating;
}
if (warranty3m.checked) {
url = url + "&3m=true";
}
if (warranty6m.checked) {
url = url + "&6m=true";
}
if (warranty1y.checked) {
url = url + "&1y=true";
}
if (freeshiping.checked) {
url = url + "&freeshipping=true";
}
if (shipping.checked) {
url = url + "&shipping=true";
}
url = url + "&search=" + search.value;
//the final
window.location.href = url;
}
</script>
</body>
</html>
<!--<i class="fa-solid fa-caret-up"></i>-->