mirror of
https://github.com/Alvin-Zilverstand/Schoolkantine.git
synced 2026-03-06 11:07:40 +01:00
Refactor shopping cart functionality and styles; add new cart.js and cart.css files
This commit is contained in:
vista-man
52
website/cart.css
Normal file
52
website/cart.css
Normal file
@@ -0,0 +1,52 @@
|
||||
/* Winkelmandje sectie */
|
||||
.cart {
|
||||
width: 30%;
|
||||
background-color: #fff; /* Change background color to white */
|
||||
padding: 20px;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
order: 3; /* Ensure the cart is on the right */
|
||||
position: fixed; /* Fix the cart to the right side */
|
||||
right: 0; /* Align the cart to the right */
|
||||
top: 0; /* Align the cart to the top */
|
||||
display: flex;
|
||||
flex-direction: column; /* Ensure the content is arranged in a column */
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.cart-item button {
|
||||
background-color: #d32f2f;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.cart-item button:hover {
|
||||
background-color: #b71c1c;
|
||||
}
|
||||
|
||||
#order-button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
display: none; /* Hide the button by default */
|
||||
align-self: flex-end; /* Ensure the button is at the bottom */
|
||||
}
|
||||
|
||||
#order-button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
45
website/cart.js
Normal file
45
website/cart.js
Normal file
@@ -0,0 +1,45 @@
|
||||
// Array to hold items added to the shopping cart
|
||||
const cart = [];
|
||||
|
||||
// Functie om een item aan het winkelwagentje toe te voegen
|
||||
function addToCart(item) {
|
||||
cart.unshift(item); // Add item to the beginning of the cart array
|
||||
updateCart();
|
||||
closeModal();
|
||||
}
|
||||
|
||||
// Functie om het winkelwagentje bij te werken
|
||||
function updateCart() {
|
||||
const cartItemsContainer = document.getElementById("cart-items");
|
||||
cartItemsContainer.innerHTML = '';
|
||||
let totalPrice = 0;
|
||||
cart.forEach((item, index) => {
|
||||
const cartItemElement = document.createElement('li');
|
||||
cartItemElement.className = 'cart-item';
|
||||
cartItemElement.innerHTML = `
|
||||
<span>${item.title}</span>
|
||||
<span>€${item.price.toFixed(2)}</span>
|
||||
<button onclick="removeFromCart(${index})">Verwijderen</button>
|
||||
`;
|
||||
cartItemsContainer.appendChild(cartItemElement);
|
||||
totalPrice += item.price;
|
||||
});
|
||||
document.getElementById('total-price').innerText = totalPrice.toFixed(2);
|
||||
|
||||
// Show or hide the "Bestellen" button based on the cart's content
|
||||
const orderButton = document.getElementById('order-button');
|
||||
if (cart.length > 0) {
|
||||
orderButton.style.display = 'block';
|
||||
} else {
|
||||
orderButton.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Functie om een item uit het winkelwagentje te verwijderen
|
||||
function removeFromCart(index) {
|
||||
cart.splice(index, 1);
|
||||
updateCart();
|
||||
}
|
||||
|
||||
// Initial call to updateCart to ensure the button is hidden on page load
|
||||
updateCart();
|
||||
@@ -5,6 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Het hoofdmenu van de Mees</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="cart.css">
|
||||
<link rel="icon" href="media/favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
@@ -51,4 +52,5 @@
|
||||
|
||||
</body>
|
||||
<script src="script.js"></script>
|
||||
<script src="cart.js"></script>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
BIN
website/media/spa.webp
Normal file
BIN
website/media/spa.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
@@ -1,6 +1,3 @@
|
||||
// Array to hold items added to the shopping cart
|
||||
const cart = [];
|
||||
|
||||
// Functie om de details van een geselecteerd item weer te geven
|
||||
function showItemDetails(item) {
|
||||
var title = "";
|
||||
@@ -16,7 +13,7 @@ function showItemDetails(item) {
|
||||
price = 3.50;
|
||||
} else if (item === 'drinks') {
|
||||
title = "Spa Water";
|
||||
imageSrc = "media/spa.jpg";
|
||||
imageSrc = "media/spa.webp";
|
||||
description = "Koude verfrissende water.";
|
||||
price = 1.00;
|
||||
} else if (item === 'Snacks') {
|
||||
@@ -64,46 +61,6 @@ function showItemDetails(item) {
|
||||
document.getElementById("modal").style.display = "block";
|
||||
}
|
||||
|
||||
// Functie om een item aan het winkelwagentje toe te voegen
|
||||
function addToCart(item) {
|
||||
cart.unshift(item); // Add item to the beginning of the cart array
|
||||
updateCart();
|
||||
closeModal();
|
||||
}
|
||||
|
||||
// Functie om het winkelwagentje bij te werken
|
||||
function updateCart() {
|
||||
const cartItemsContainer = document.getElementById("cart-items");
|
||||
cartItemsContainer.innerHTML = '';
|
||||
let totalPrice = 0;
|
||||
cart.forEach((item, index) => {
|
||||
const cartItemElement = document.createElement('li');
|
||||
cartItemElement.className = 'cart-item';
|
||||
cartItemElement.innerHTML = `
|
||||
<span>${item.title}</span>
|
||||
<span>€${item.price.toFixed(2)}</span>
|
||||
<button onclick="removeFromCart(${index})">Verwijderen</button>
|
||||
`;
|
||||
cartItemsContainer.appendChild(cartItemElement);
|
||||
totalPrice += item.price;
|
||||
});
|
||||
document.getElementById('total-price').innerText = totalPrice.toFixed(2);
|
||||
|
||||
// Show or hide the "Bestellen" button based on the cart's content
|
||||
const orderButton = document.getElementById('order-button');
|
||||
if (cart.length > 0) {
|
||||
orderButton.style.display = 'block';
|
||||
} else {
|
||||
orderButton.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Functie om een item uit het winkelwagentje te verwijderen
|
||||
function removeFromCart(index) {
|
||||
cart.splice(index, 1);
|
||||
updateCart();
|
||||
}
|
||||
|
||||
// Functie om het modaal venster te sluiten
|
||||
function closeModal() {
|
||||
document.getElementById("modal").style.display = "none";
|
||||
@@ -115,6 +72,3 @@ window.onclick = function(event) {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
// Initial call to updateCart to ensure the button is hidden on page load
|
||||
updateCart();
|
||||
|
||||
@@ -73,59 +73,6 @@ body {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Winkelmandje sectie */
|
||||
.cart {
|
||||
width: 30%;
|
||||
background-color: #fff; /* Change background color to white */
|
||||
padding: 20px;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
order: 3; /* Ensure the cart is on the right */
|
||||
position: fixed; /* Fix the cart to the right side */
|
||||
right: 0; /* Align the cart to the right */
|
||||
top: 0; /* Align the cart to the top */
|
||||
display: flex;
|
||||
flex-direction: column; /* Ensure the content is arranged in a column */
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.cart-item button {
|
||||
background-color: #d32f2f;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.cart-item button:hover {
|
||||
background-color: #b71c1c;
|
||||
}
|
||||
|
||||
#order-button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
display: none; /* Hide the button by default */
|
||||
align-self: flex-end; /* Ensure the button is at the bottom */
|
||||
}
|
||||
|
||||
#order-button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
/* Modaal venster (pop-up) */
|
||||
.modal {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user