Skip to content
Snippets Groups Projects
Commit 1cd7bcd3 authored by Christophorus Dharma Winata's avatar Christophorus Dharma Winata
Browse files

feat!:purchase added to cart

fix: adding catch for logged out user in adding items to cart
fix: cart access queries
feat: add2cart front end scripts
feat: cart page
fix: catalog empty search bar catch
feat: cart stylings
parent 9e4ac167
Branches
Tags
No related merge requests found
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
transition: 0.5; transition: 0.5;
} }
.container{ .container{
max-width: 100%; max-width: 100%;
height: 100vh; height: 100vh;
...@@ -18,70 +19,85 @@ ...@@ -18,70 +19,85 @@
flex-direction: column; flex-direction: column;
} }
.cart-group{ .page-group {
padding-top: 5%; flex: 1 1 auto;
display: block;
position: relative; position: relative;
padding-top: 5vh;
min-width: 300px;
display: flex;
flex-direction: column;
margin-left: 10%;
margin-right: 10%;
} }
.cart-group h1{ .page-group h1 {
margin-bottom: 10px;
margin-left: 5%;
font-size: 30px; font-size: 30px;
} }
.cart-list{ #cart-group {
/* border-style: solid; */ display: flex;
border-radius: 10px; flex-direction: row;
margin-left: 5%; justify-content: space-between;
margin-right: 5%; gap: 50px;
display: block;
} }
#cart-list {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
overflow-y: scroll;
}
.item{ .item{
margin: 15px;
border-radius: 10px;
background-color: #eaeaea;
padding: 1%;
display: flex; display: flex;
flex-direction: row;
background-color: #eaeaea;
border-radius: 10px;
} }
.item-picture-group{ .item-picture-group {
display:inline-block; background-color : rgb(198, 247, 247);
min-width: 20%;
min-height: 15vw;
background-color: azure;
border-radius: 10px; border-radius: 10px;
margin: 10px;
} }
.item-text-fields{ .item-text-fields {
display:inline-block; 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-quantity {
.item-label{ margin-top: auto;
display: block; align-self: flex-end;
margin: 10px; }
#checkout-options-field {
align-self: flex-start;
margin-left: auto;
} }
.button-field { .button-field {
display:flex; width: 100%;
padding: 10px; margin-top: 4vh;
justify-content: right; display: flex;
} }
.button-field button{
#checkout-button { /* flex-basis: 48%; */
cursor: pointer;
color: white;
background-color: rgb(137, 62, 137);
min-width: 25%; min-width: 25%;
height: 10vh; height: 5vh;
font-size: 20px;
border-radius : 10px;
border-color: transparent; border-color: transparent;
margin-right: 15px; padding : 0px 15px;
margin-bottom: 15px; /* margin-bottom: 15px; */
} background: #3c00a0;
color: #fff;
@media screen and ((max-width: 400px) or (max-height: 750px)) { border-radius: 10px;
.cart-group{ font-size: 20px;
height: 750px; border: 0;
} outline: 0;
cursor: pointer;
transition: background 1s;
} }
\ No newline at end of file
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
...@@ -4,8 +4,12 @@ var activePage; ...@@ -4,8 +4,12 @@ var activePage;
const input = document.getElementById("Searchinput"); const input = document.getElementById("Searchinput");
var myPromises = new Promise(function(resolve, reject){ var myPromises = new Promise(function(resolve, reject){
const formdata = new FormData(); const formdata = new FormData();
formdata.append('search', document.getElementById("Searchinput").value); try {
console.log(input.value); formdata.append('search', document.getElementById("Searchinput").value);
} catch (error) {
}
// console.log(input.value);
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open('GET', '../../server/controllers/catalog.php', true); xhr.open('GET', '../../server/controllers/catalog.php', true);
...@@ -70,8 +74,12 @@ function changePage(page){ ...@@ -70,8 +74,12 @@ function changePage(page){
formdata.append('rows', row); formdata.append('rows', row);
// taking search keyword from search bar // taking search keyword from search bar
formdata.append('search', document.getElementById("Searchinput").value); try {
console.log(document.getElementById("Searchinput").value); formdata.append('search', document.getElementById("Searchinput").value);
} catch (error) {
}
// console.log(document.getElementById("Searchinput").value);
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open('POST', '../../server/controllers/catalog.php', true); xhr.open('POST', '../../server/controllers/catalog.php', true);
......
...@@ -14,6 +14,31 @@ keyboardInputQuantity = () => { ...@@ -14,6 +14,31 @@ keyboardInputQuantity = () => {
subTotal(); 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 = () => { subTotal = () => {
var buyQuantity = document.getElementById("buy-quantity-input").value; var buyQuantity = document.getElementById("buy-quantity-input").value;
var buyPrice = parseInt(document.getElementById("product_price").textContent); var buyPrice = parseInt(document.getElementById("product_price").textContent);
......
...@@ -8,8 +8,10 @@ ...@@ -8,8 +8,10 @@
<title>Cart</title> <title>Cart</title>
<link rel="stylesheet" href="../css/cart.css"> <link rel="stylesheet" href="../css/cart.css">
<link rel="stylesheet" href="../css/navbar.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="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
<script src="../js/navbar.js"></script> <script src="../js/navbar.js"></script>
<script src="../js/sidebar.js"></script>
<script src="../js/cart.js"></script> <script src="../js/cart.js"></script>
</head> </head>
<body> <body>
...@@ -19,47 +21,25 @@ ...@@ -19,47 +21,25 @@
addnavbar(); addnavbar();
</script> </script>
</div> </div>
<div class="cart-group"> <div class="page-group">
<h1> <h1>
Cart Cart
</h1> </h1>
<div class="cart-list"> <div id="cart-group">
<div class="item"> <div id="cart-list">
<div class="item-picture-group"> <script>
<image src="#" class="item-picture"></image> cartList();
</div> </script>
<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>
<div class="item"> <div id="checkout-options-field">
<div class="item-picture-group"> <p>Total price:</p>
<image src="#" class="item-picture"></image> <p>TOTAL PRICE</p>
</div> <div class="button-field">
<div class="item-text-fields"> <button id="checkout-button" onclick="submitCheckout()">
<label class="item-label">Name</label> <i class="fa-solid fa-money-bill-wave"></i> Checkout
<label class="item-label">Quantity</label> </button>
<label class="item-label">Price</label>
</div> </div>
</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> </div>
<div class="sidebar" id="sidebar"> <div class="sidebar" id="sidebar">
......
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
</p> </p>
</div> </div>
<div id="add2cart-button-field"> <div id="add2cart-button-field">
<button> <button onclick="addToCart()">
<i class="fa-solid fa-cart-shopping"> <i class="fa-solid fa-cart-shopping">
</i> </i>
Add To Cart Add To Cart
...@@ -109,4 +109,7 @@ ...@@ -109,4 +109,7 @@
<script id="quantity-editor-max-setter"> <script id="quantity-editor-max-setter">
document.getElementById("buy-quantity-input").setAttribute("max", document.getElementById('product_quantity').textContent); document.getElementById("buy-quantity-input").setAttribute("max", document.getElementById('product_quantity').textContent);
</script> </script>
<script id="item-id2js" type="text/javascript">
var item_id = "<?php echo $_GET['id']?>";
</script>
</html> </html>
\ No newline at end of file
<!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
<?php <?php
session_start(); session_start();
require_once "../../server/controllers/loggedout_catch.php";
require_once "connect_database.php"; require_once "connect_database.php";
global $conn; $conn = connect_database(); global $conn; $conn = connect_database();
if ($_SERVER["REQUEST_METHOD"] == "POST") { if ($_SERVER["REQUEST_METHOD"] == "POST") {
......
...@@ -4,11 +4,13 @@ ...@@ -4,11 +4,13 @@
global $conn; $conn = connect_database(); global $conn; $conn = connect_database();
if ($_SERVER["REQUEST_METHOD"] == "POST") { if ($_SERVER["REQUEST_METHOD"] == "POST") {
global $conn; 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"]; $cart_username = $_SESSION["username"];
$stmt = $conn->prepare($insert_query); $stmt = $conn->prepare($query);
if (!$stmt) { if (!$stmt) {
die("Error in query preparation". $conn->error); die("Error in query preparation". $conn->error);
} }
...@@ -22,7 +24,7 @@ ...@@ -22,7 +24,7 @@
$response = array("success" => "false", "message" => $stmt.error); $response = array("success" => "false", "message" => $stmt.error);
die ("Error in query execution: " . $stmt->error); die ("Error in query execution: " . $stmt->error);
} else { } 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); echo json_encode($response);
mysqli_close($conn); mysqli_close($conn);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment