/
products.php
183 lines (148 loc) · 8.08 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
<?php
session_start(); // Session starts
$session_id = session_id();
$title = 'Ramp Riot Online Store - Products';
require('templates/header.php');
require("lib/class.products.php");
// creating $category so later it is possible to list products with given GET-category name
if (isset($_GET['category'])) {
$category = $_GET['category'];
} else {
$category = "all";
}
// using getCategory or getProducts object
$products = new Products(0, $sql, $category);
// if $_GET['category'] has not set, if uses object to get all the products to row
if (!isset($category) || $category == "all") {
$row = $products->getProducts();
// if $_GET['category'] is set, else uses object to get all the products in given category
} else {
$row = $products->getCategory();
}
?>
<!-- CONTENT STARTS -->
<div class="col-lg-10" id="content">
<!-- Category-buttons -->
<div class="container-fluid" style="padding: 20px;">
<h1 style="color: #2C4A52;">Products</h1>
<h2 style="padding: 20px;">Select category from below:</h2>
<!-- List-group navigation start -->
<div class="list-group">
<?php
// all products-button is active if category is empty
if (strstr($_SERVER["SCRIPT_FILENAME"], 'products.php') && !isset($_GET['category']) || $_GET['category'] == 'all') {
echo '<a href="products.php?category=all" class="list-group-item list-group-item-action active" aria-current="true">all products</a>';
} else {
echo '<a href="products.php?category=all" class="list-group-item list-group-item-action" aria-current="true">all products</a>';
}
?>
<?php
// Using function "allCategories() to have all the categories in an array.
$categories = allCategories();
// for-loop through the array to print category-buttons
for ($i = 0; $i < count($categories); $i++) {
// category-button is active when proper category is selected
if (isset($_GET['category']) && $_GET['category'] == $categories[$i]['name']) {
echo '<a href="products.php?category=' . $categories[$i]['name'] . '" class="list-group-item list-group-item-action active">' . $categories[$i]['name'] . '</a></li>';
} else {
echo '<a href="products.php?category=' . $categories[$i]['name'] . '" class="list-group-item list-group-item-action">' . $categories[$i]['name'] . '</a>';
}
}
?>
</div>
<!-- List-group navigation end -->
</div>
<div id="category-content">
<div class="row" style="padding: 20px;">
<?php
// for loop to print all the products and make unique ids.
for ($i = 0; $i < count($row); $i++) {
?>
<!-- PRODUCT CARD -->
<div class="col-sm-auto" style="margin: 10px;">
<div class="card card-custom" style="width: 18rem; height: 100%;">
<a href="product.php?id=<?= $row[$i]['id']?>&category=<?=$row[$i]['category']?>"><img style="width: 100%; " src="<?= $row[$i]['imgurl']; ?>" class="card-img-top" alt="<?= $row[$i]['short_description'] ?>">
<div class="card-body">
<a href="product.php?id=<?= $row[$i]['id']?>&category=<?=$row[$i]['category']?>">
<h5 class="card-title"><?= $row[$i]['name']; ?></h5>
</a>
</div>
<ul class="list-group">
<li class="list-group-item lgc">
<h2><?= $row[$i]['price']; ?> €</h2>
</li>
</ul>
<div class="card-body">
<form><input id="session_id_<?= $row[$i]['id'] ?>" type="hidden" value="<?= $session_id; ?>">
<input id="product_id_<?= $row[$i]['id'] ?>" type="hidden" value="<?= $row[$i]['id']; ?>">
<!-- Checks if the product found in stock using getStock-function -->
<p>
<?php
if ($stock = getStock($row[$i]['id'])) {
echo $stock;
}
?>
</p>
<!-- Checks what category and then shows the right size-type. -->
<select id="form-select<?= $row[$i]['id'] ?>" class="form-select" aria-label="Default select example" style="width: 90%; margin: 10px;">
<option value="size" selected>Size</option>
<!-- Prints sizes what are in the stock -->
<?php
$result_sizes = $sql->query("SELECT * FROM stock WHERE product_id = '" . $row[$i]['id'] . "' AND quantity > 0");
while ($row_sizes = $result_sizes->fetch_assoc()) {
echo '<option value="' . $row_sizes['size'] . '">' . $row_sizes['size'] . '</option>';
}
?>
</select>
<button class="btn btn-dark" id="add<?= $row[$i]['id']; ?>" name="add" type="button">Add to cart</button>
<p class="answer" id="answer<?= $row[$i]['id']; ?>"></p>
</form>
</div>
</div>
</div>
<!-- Json for adding products to the cart -->
<script>
var submit = document.getElementById("add" + <?= $row[$i]['id']; ?>);
submit.addEventListener("click", function() {
var cartTotal = document.getElementById("cart-total");
var product_id = document.getElementById("product_id_" + <?= $row[$i]['id']; ?>).value;
var session_id = document.getElementById("session_id_" + <?= $row[$i]['id']; ?>).value;
var product_size = document.getElementById("form-select" + <?= $row[$i]['id'] ?>).value;
// returns "Select size" if product_size is not selected
if (product_size == "size") {
answer.innerHTML = "Please, select size";
} else {
fetch('tocart_ajax.php', {
method: 'POST', // Send as POST
headers: { // Tells headers to the server
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
product_id: product_id,
session_id: session_id,
product_size: product_size
}) // Sending JSON-data to server
}).then(function(response) {
// when then-promise has been succesful parse to json
return response.json();
}).then(function(myJson) {
// when then-promise has been succesful modal opens
$("#getCode").html(myJson);
jQuery("#addedModal").modal('show');
cartTotal.innerHTML = myJson;
});
}
});
</script>
<?php
}
?>
</div>
</div>
</div>
</div>
</div>
<!-- CONTENT ENDS -->
<!-- FOOTER INCLUDE -->
<?php require('templates/footer.php'); ?>