diff --git a/client/css/cart.css b/client/css/cart.css
index 50f2a2aeb5fed27bc8a572889b87ea66f27f28a3..353a6cc6599a089ad50e190c7dde5ee38bf37bac 100644
--- a/client/css/cart.css
+++ b/client/css/cart.css
@@ -8,6 +8,7 @@
transition: 0.5;
}
+
.container{
max-width: 100%;
height: 100vh;
@@ -18,70 +19,85 @@
flex-direction: column;
}
-.cart-group{
- padding-top: 5%;
- display: block;
+.page-group {
+ flex: 1 1 auto;
position: relative;
+ padding-top: 5vh;
+ min-width: 300px;
+ display: flex;
+ flex-direction: column;
+ margin-left: 10%;
+ margin-right: 10%;
}
-.cart-group h1{
- margin-bottom: 10px;
- margin-left: 5%;
+.page-group h1 {
font-size: 30px;
}
-.cart-list{
- /* border-style: solid; */
- border-radius: 10px;
- margin-left: 5%;
- margin-right: 5%;
- display: block;
+#cart-group {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 50px;
}
+
+#cart-list {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ flex: 1 1 auto;
+ overflow-y: scroll;
+}
+
.item{
- margin: 15px;
- border-radius: 10px;
- background-color: #eaeaea;
- padding: 1%;
display: flex;
+ flex-direction: row;
+ background-color: #eaeaea;
+ border-radius: 10px;
}
-.item-picture-group{
- display:inline-block;
- min-width: 20%;
- min-height: 15vw;
- background-color: azure;
+.item-picture-group {
+ background-color : rgb(198, 247, 247);
border-radius: 10px;
- margin: 10px;
}
-.item-text-fields{
- display:inline-block;
+.item-text-fields {
+ display: flex;
+ flex-direction: column;
+ padding: 10px;
+ flex: 1 1 auto;
+}
+#item-name {
+ resize:none;
+ background-color: transparent;
+ border-color: transparent;
+ font-size: 24px;
+ color: black;
}
-/* .item-picture{} */
-.item-label{
- display: block;
- margin: 10px;
+#item-quantity {
+ margin-top: auto;
+ align-self: flex-end;
+}
+#checkout-options-field {
+ align-self: flex-start;
+ margin-left: auto;
}
-
.button-field {
- display:flex;
- padding: 10px;
- justify-content: right;
+ width: 100%;
+ margin-top: 4vh;
+ display: flex;
}
-
-#checkout-button {
- cursor: pointer;
- color: white;
- background-color: rgb(137, 62, 137);
+.button-field button{
+ /* flex-basis: 48%; */
min-width: 25%;
- height: 10vh;
- font-size: 20px;
- border-radius : 10px;
+ height: 5vh;
border-color: transparent;
- margin-right: 15px;
- margin-bottom: 15px;
-}
-
-@media screen and ((max-width: 400px) or (max-height: 750px)) {
- .cart-group{
- height: 750px;
- }
+ padding : 0px 15px;
+ /* margin-bottom: 15px; */
+ background: #3c00a0;
+ color: #fff;
+ border-radius: 10px;
+ font-size: 20px;
+ border: 0;
+ outline: 0;
+ cursor: pointer;
+ transition: background 1s;
}
\ No newline at end of file
diff --git a/client/js/cart.js b/client/js/cart.js
new file mode 100644
index 0000000000000000000000000000000000000000..2c564ec321ca6cb831c3700a34a8e3951bad05c4
--- /dev/null
+++ b/client/js/cart.js
@@ -0,0 +1,40 @@
+cartList = () => {
+ var cartListItems = document.getElementById("cart-list");
+ const xhr = new XMLHttpRequest();
+ xhr.open('POST', "../../server/controllers/cartdetail_query.php", true);
+ xhr.send();
+ xhr.onreadystatechange = function () {
+ if (xhr.readyState === 4 && xhr.status === 200) {
+ try {
+ // Process the response data here
+ var responseData = JSON.parse(xhr.responseText);
+ if (responseData.success) {
+ cartListItems.innerHTML = "";
+ cartDataArray = responseData.data;
+ cartDataArray.forEach(row => {
+ cartListItems.innerHTML += `
+ <div class="item">
+ <div class="item-picture-group">
+ <image src="../image/${row['picture_path']}" class="item-picture"></image>
+ </div>
+ <div class="item-text-fields">
+ <textarea class="cart-item-detail" id="item-name" disabled>${row['name']}</textarea>
+ <h2 class="cart-item-detail" id="item-price">${row['price']*row['item_quantity']}</h2>
+ <p class="cart-item-detail" id="item-quantity">${row['item_quantity']}</p>
+ </div>
+ </div>
+ `
+ });
+ } else {
+ alert("error: " + responseData.message)
+ }
+ } catch (error) {
+
+ }
+ // Update the DOM or perform other actions with the data
+ } else if (xhr.status === 404) {
+ var responseData = JSON.parse(xhr.responseText);
+ console.log(responseData.message);
+ }
+ };
+}
\ No newline at end of file
diff --git a/client/js/catalog.js b/client/js/catalog.js
index d9c9bf63503a5f37ec5da715fdc016deadb065be..6ae7e2325be0cdca0b829f5c6dd9ded1e1389dea 100644
--- a/client/js/catalog.js
+++ b/client/js/catalog.js
@@ -4,8 +4,12 @@ var activePage;
const input = document.getElementById("Searchinput");
var myPromises = new Promise(function(resolve, reject){
const formdata = new FormData();
- formdata.append('search', document.getElementById("Searchinput").value);
- console.log(input.value);
+ try {
+ formdata.append('search', document.getElementById("Searchinput").value);
+ } catch (error) {
+
+ }
+ // console.log(input.value);
const xhr = new XMLHttpRequest();
xhr.open('GET', '../../server/controllers/catalog.php', true);
@@ -70,8 +74,12 @@ function changePage(page){
formdata.append('rows', row);
// taking search keyword from search bar
- formdata.append('search', document.getElementById("Searchinput").value);
- console.log(document.getElementById("Searchinput").value);
+ try {
+ formdata.append('search', document.getElementById("Searchinput").value);
+ } catch (error) {
+
+ }
+ // console.log(document.getElementById("Searchinput").value);
const xhr = new XMLHttpRequest();
xhr.open('POST', '../../server/controllers/catalog.php', true);
diff --git a/client/js/make-purchase.js b/client/js/make-purchase.js
index 2bd669a7c724634b2e736eeea032e2991994c783..16761826b6a4e9f0cf0bb8fc9e7e8ed6614a139c 100644
--- a/client/js/make-purchase.js
+++ b/client/js/make-purchase.js
@@ -14,6 +14,31 @@ keyboardInputQuantity = () => {
subTotal();
}
+addToCart = () => {
+ const formData = new FormData();
+ formData.append("item_id", item_id);
+ formData.append("item_quantity", document.getElementById("buy-quantity-input").value)
+
+ const xhr = new XMLHttpRequest();
+ xhr.open('POST', "../../server/controllers/add_cart.php", true);
+ xhr.onreadystatechange = function () {
+ if (xhr.readyState === 4 && xhr.status === 200) {
+ // Process the response data here
+ var responseData = JSON.parse(xhr.responseText);
+ if (responseData.success) {
+ alert(responseData.message);
+ } else {
+ alert("error: " + responseData.message)
+ }
+ // Update the DOM or perform other actions with the data
+ } else if (xhr.status === 404) {
+ var responseData = JSON.parse(xhr.responseText);
+ console.log(responseData.message);
+ }
+ }
+ xhr.send(formData);
+}
+
subTotal = () => {
var buyQuantity = document.getElementById("buy-quantity-input").value;
var buyPrice = parseInt(document.getElementById("product_price").textContent);
diff --git a/client/pages/cart.php b/client/pages/cart.php
index 9fd59ae8f99cff49b91baba0574748ec8d45e7da..1e7a1f93ea901e557e0ea2d651f1e72bee1aaecc 100644
--- a/client/pages/cart.php
+++ b/client/pages/cart.php
@@ -8,8 +8,10 @@
<title>Cart</title>
<link rel="stylesheet" href="../css/cart.css">
<link rel="stylesheet" href="../css/navbar.css">
+ <link rel="stylesheet" href="../css/sidebar.css">
<script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
<script src="../js/navbar.js"></script>
+ <script src="../js/sidebar.js"></script>
<script src="../js/cart.js"></script>
</head>
<body>
@@ -19,47 +21,25 @@
addnavbar();
</script>
</div>
- <div class="cart-group">
+ <div class="page-group">
<h1>
Cart
</h1>
- <div class="cart-list">
- <div class="item">
- <div class="item-picture-group">
- <image src="#" class="item-picture"></image>
- </div>
- <div class="item-text-fields">
- <label class="item-label">Name</label>
- <label class="item-label">Quantity</label>
- <label class="item-label">Price</label>
- </div>
+ <div id="cart-group">
+ <div id="cart-list">
+ <script>
+ cartList();
+ </script>
</div>
- <div class="item">
- <div class="item-picture-group">
- <image src="#" class="item-picture"></image>
- </div>
- <div class="item-text-fields">
- <label class="item-label">Name</label>
- <label class="item-label">Quantity</label>
- <label class="item-label">Price</label>
+ <div id="checkout-options-field">
+ <p>Total price:</p>
+ <p>TOTAL PRICE</p>
+ <div class="button-field">
+ <button id="checkout-button" onclick="submitCheckout()">
+ <i class="fa-solid fa-money-bill-wave"></i> Checkout
+ </button>
</div>
</div>
- <div class="item">
- <div class="item-picture-group">
- <image src="#" class="item-picture"></image>
- </div>
- <div class="item-text-fields">
- <label class="item-label">Name</label>
- <label class="item-label">Quantity</label>
- <label class="item-label">Price</label>
- </div>
- </div>
- <!-- contains item divs according to data -->
- </div>
- <div class="button-field">
- <button id="checkout-button" onclick="submitCheckout()">
- Checkout
- </button>
</div>
</div>
<div class="sidebar" id="sidebar">
diff --git a/client/pages/make-purchase.php b/client/pages/make-purchase.php
index 531695bea7e355cc3825a14ea00150e33585af28..698fffbf406652d78dadb7ad9a7277d678fa351d 100644
--- a/client/pages/make-purchase.php
+++ b/client/pages/make-purchase.php
@@ -90,7 +90,7 @@
</p>
</div>
<div id="add2cart-button-field">
- <button>
+ <button onclick="addToCart()">
<i class="fa-solid fa-cart-shopping">
</i>
Add To Cart
@@ -109,4 +109,7 @@
<script id="quantity-editor-max-setter">
document.getElementById("buy-quantity-input").setAttribute("max", document.getElementById('product_quantity').textContent);
</script>
+ <script id="item-id2js" type="text/javascript">
+ var item_id = "<?php echo $_GET['id']?>";
+ </script>
</html>
\ No newline at end of file
diff --git a/client/prototype/cart.html b/client/prototype/cart.html
deleted file mode 100644
index 31fff5c543af234d45b7ac20bc043fd313f9de58..0000000000000000000000000000000000000000
--- a/client/prototype/cart.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta name="viewport" content="width=device-width, initial scale=1.0">
- <title>Cart</title>
- <link rel="stylesheet" href="../css/cart.css">
- <link rel="stylesheet" href="../css/navbar.css">
- <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
- <script src="../js/navbar.js"></script>
- </head>
- <body>
- <div class="container">
- <div id="tabgroup">
- <script>
- addnavbar();
- </script>
- </div>
- <div class="cart-group">
- <h1>
- Cart
- </h1>
- <div class="cart-list">
- <div class="item">
- <div class="item-picture-group">
- <image src="#" class="item-picture"></image>
- </div>
- <div class="item-text-fields">
- <label class="item-label">Name</label>
- <label class="item-label">Quantity</label>
- <label class="item-label">Price</label>
- </div>
- </div>
- <div class="item">
- <div class="item-picture-group">
- <image src="#" class="item-picture"></image>
- </div>
- <div class="item-text-fields">
- <label class="item-label">Name</label>
- <label class="item-label">Quantity</label>
- <label class="item-label">Price</label>
- </div>
- </div>
- <div class="item">
- <div class="item-picture-group">
- <image src="#" class="item-picture"></image>
- </div>
- <div class="item-text-fields">
- <label class="item-label">Name</label>
- <label class="item-label">Quantity</label>
- <label class="item-label">Price</label>
- </div>
- </div>
- <!-- contains item divs according to data -->
- </div>
- <div class="button-field">
- <button id="checkout-button">
- Checkout
- </button>
- </div>
- </div>
- </div>
- </body>
-</html>
\ No newline at end of file
diff --git a/server/controllers/add_cart.php b/server/controllers/add_cart.php
index 8c8197a64b254d93566d8f190e37bb37571a9abe..7d2d8287acb696f27e366d04c7c7898d0355540e 100644
--- a/server/controllers/add_cart.php
+++ b/server/controllers/add_cart.php
@@ -1,5 +1,6 @@
<?php
session_start();
+ require_once "../../server/controllers/loggedout_catch.php";
require_once "connect_database.php";
global $conn; $conn = connect_database();
if ($_SERVER["REQUEST_METHOD"] == "POST") {
diff --git a/server/controllers/cartdetail_query.php b/server/controllers/cartdetail_query.php
index c470770633e6d02f4a8c1535bae9e503e1a5062f..924499d49ed483b9772cb4b56a3f2bd17a015bc4 100644
--- a/server/controllers/cartdetail_query.php
+++ b/server/controllers/cartdetail_query.php
@@ -4,11 +4,13 @@
global $conn; $conn = connect_database();
if ($_SERVER["REQUEST_METHOD"] == "POST") {
global $conn;
- $query = "SELECT * FROM `cart` WHERE `cart_username` = (?))
+ $query = "SELECT * FROM `cart`
+ JOIN `item` ON `cart`.`item_id` = `item`.`item_id`
+ WHERE `cart_username` = (?)
";
$cart_username = $_SESSION["username"];
- $stmt = $conn->prepare($insert_query);
+ $stmt = $conn->prepare($query);
if (!$stmt) {
die("Error in query preparation". $conn->error);
}
@@ -22,7 +24,7 @@
$response = array("success" => "false", "message" => $stmt.error);
die ("Error in query execution: " . $stmt->error);
} else {
- $response = array("success" => "true", "message" => "item has been added", "data" => $resultSet->fetch_all(MYSQLI_ASSOC));
+ $response = array("success" => "true", "message" => "showing ".$cart_username."'s cart", "data" => $resultSet->fetch_all(MYSQLI_ASSOC));
}
echo json_encode($response);
mysqli_close($conn);