alvin/Schoolkantine
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Schoolkantine.git synced 2026-03-06 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor shopping cart functionality and update UI elements

Browse Source
This commit is contained in:
vista-man
2025-02-19 10:23:07 +01:00
parent 8087679167
commit a118fc1158
5 changed files with 132 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
website/Cart/cart.js
View File

@@ -1,10 +1,11 @@
// Array to hold items added to the shopping cart // Array to hold items added to the shopping cart
const cart = []; const cart = JSON.parse(localStorage.getItem('cart')) || [];
let cartCount = 0; // Initialize cart count let cartCount = cart.length; // Initialize cart count
// Function to add an item to the shopping cart // Function to add an item to the shopping cart
function addToCart(item) { function addToCart(item) {
cart.unshift(item); // Add item to the beginning of the cart array cart.push(item); // Add item to the cart array
localStorage.setItem('cart', JSON.stringify(cart));
updateCart(); updateCart();
cartCount++; // Increment cart count cartCount++; // Increment cart count
updateCartCountDisplay(); // Update the cart count display updateCartCountDisplay(); // Update the cart count display
@@ -41,6 +42,7 @@ function updateCart() {
// Function to remove an item from the shopping cart // Function to remove an item from the shopping cart
function removeFromCart(index) { function removeFromCart(index) {
cart.splice(index, 1); cart.splice(index, 1);
localStorage.setItem('cart', JSON.stringify(cart));
updateCart(); updateCart();
cartCount--; // Decrement cart count cartCount--; // Decrement cart count
updateCartCountDisplay(); // Update the cart count display updateCartCountDisplay(); // Update the cart count display
@@ -54,23 +56,11 @@ function updateCartCountDisplay() {
} }
} }
// Initial calls // Initial calls
updateCart(); updateCart();
updateCartCountDisplay(); // Initialize the cart count on page load updateCartCountDisplay(); // Initialize the cart count on page load
// Function to close the modal window // Function to close the modal window
function closeModal() { function closeModal() {
document.getElementById('modal').style.display = 'none'; document.getElementById('modal').style.display = 'none';
<<<<<<< HEAD:website/cart.js
} }
let cartCount = 0;
function addToCart() {
cartCount++;
document.querySelector('.cart-count').textContent = cartCount;
}
=======
>>>>>>> 1f418f9c8547c52f6394b681eb5ce02ee196b69a:website/Cart/cart.js

5
website/index.html
View File

@@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Het hoofdmenu van de Mees</title> <title>Het hoofdmenu van de Mees</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="Cart/cart.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="icon" href="media/favicon.ico" type="image/x-icon"> <link rel="icon" href="media/favicon.ico" type="image/x-icon">
</head> </head>
@@ -14,6 +13,9 @@
<body> <body>
<!-- Logo or photo -->
<img src="media/logo.png" alt="Logo" class="logo">
<!-- Top bar menu --> <!-- Top bar menu -->
<div class="menu-bar"> <div class="menu-bar">
<div class="menu-item" onclick="showCategory('Broodjes')">Broodjes</div> <div class="menu-item" onclick="showCategory('Broodjes')">Broodjes</div>
@@ -40,7 +42,6 @@
<img id="modal-image" src="" alt=""> <img id="modal-image" src="" alt="">
<p id="modal-description"></p> <p id="modal-description"></p>
<p id="modal-price"></p> <p id="modal-price"></p>
<input type="number" id="item-quantity" value="1" min="1" style="width: 50px; text-align: center;">
<button id="add-to-cart">Toevoegen aan winkelmandje</button> <button id="add-to-cart">Toevoegen aan winkelmandje</button>
</div> </div>
</div> </div>

BIN
website/media/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

17
website/script.js
View File

@@ -97,6 +97,16 @@ function showCategory(category) {
productDisplay.appendChild(productBox); productDisplay.appendChild(productBox);
}); });
// Transition the menu bar to the top
document.querySelector('.menu-bar').classList.add('top');
// Show the shopping cart and cart icon
document.getElementById('cart').classList.add('visible');
document.querySelector('.cart-icon').classList.add('visible');
// Hide the logo
document.querySelector('.logo').classList.add('hidden');
} }
// Functie om de details van een item weer te geven in het modaal // Functie om de details van een item weer te geven in het modaal
@@ -112,8 +122,7 @@ function showItemDetails(item) {
document.getElementById("modal-description").innerText = description; document.getElementById("modal-description").innerText = description;
document.getElementById("modal-price").innerText = `Prijs: €${price.toFixed(2)}`; document.getElementById("modal-price").innerText = `Prijs: €${price.toFixed(2)}`;
document.getElementById("add-to-cart").onclick = function() { document.getElementById("add-to-cart").onclick = function() {
const quantity = parseInt(document.getElementById("item-quantity").value); addToCart({ title, price });
addToCart({ title, price, quantity });
}; };
document.getElementById('modal').style.display = 'block'; document.getElementById('modal').style.display = 'block';
@@ -160,9 +169,7 @@ function getDescription(title) {
// Functie om een item aan het winkelwagentje toe te voegen // Functie om een item aan het winkelwagentje toe te voegen
function addToCart(item) { function addToCart(item) {
const cart = JSON.parse(localStorage.getItem('cart')) || []; const cart = JSON.parse(localStorage.getItem('cart')) || [];
for (let i = 0; i < item.quantity; i++) { cart.push(item); // Add item to the cart array
cart.push(item);
}
localStorage.setItem('cart', JSON.stringify(cart)); localStorage.setItem('cart', JSON.stringify(cart));
updateCart(); updateCart();
} }

118
website/style.css
View File

@@ -13,13 +13,25 @@ body {
background-color: #f2c14e; background-color: #f2c14e;
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
justify-content: space-around; flex-wrap: wrap; /* Allow wrapping of menu items */
justify-content: center; /* Center the menu items */
align-items: center; align-items: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: absolute; /* Initially position in the middle */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000; /* Ensure it is above other elements */
transition: all 0.3s ease; /* Add transition for position and background color */
}
.menu-bar.top {
position: fixed; /* Fix the top bar to the top */ position: fixed; /* Fix the top bar to the top */
top: 0; top: 0;
z-index: 1000; /* Ensure it is above other elements */ left: 0;
transition: background-color 0.3s ease; /* Add transition for background color */ transform: translate(0, 0);
justify-content: space-around; /* Spread the menu items */
flex-wrap: nowrap; /* Ensure all items are in a single row */
} }
.menu-bar.dark { .menu-bar.dark {
@@ -34,11 +46,12 @@ body {
cursor: pointer; cursor: pointer;
font-size: 1.2em; font-size: 1.2em;
transition: all 0.3s ease; transition: all 0.3s ease;
flex: 1 1 calc(33.333% - 10px); /* Allow 3 items per row with margin */
text-align: center; /* Center text inside the menu item */
} }
.menu-item:hover { .menu-bar.top .menu-item {
background-color: #f59e42; flex: none; /* Remove flex-grow to fit all items in a single row */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
/* Productweergave in een grid */ /* Productweergave in een grid */
@@ -130,6 +143,7 @@ body {
/* Winkelwagen-icoon */ /* Winkelwagen-icoon */
.cart-icon { .cart-icon {
display: none; /* Initially hide the cart icon */
position: fixed; position: fixed;
top: 80px; /* Move the cart icon down */ top: 80px; /* Move the cart icon down */
right: 20px; right: 20px;
@@ -142,6 +156,10 @@ body {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} }
.cart-icon.visible {
display: block; /* Show the cart icon when the 'visible' class is added */
}
.cart-icon:hover { .cart-icon:hover {
background-color: #e65c00; background-color: #e65c00;
} }
@@ -201,4 +219,92 @@ body {
bottom: 0; /* Position at the bottom */ bottom: 0; /* Position at the bottom */
height: auto; /* Adjust height */ height: auto; /* Adjust height */
} }
}
/* Winkelmandje sectie */
.cart {
display: none; /* Initially hide the cart */
width: 15%; /* Make the cart a bit smaller */
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 80px; /* Increase margin to ensure it starts below the categories bar */
position: fixed; /* Fix the cart to the right side */
right: 0; /* Align the cart to the right */
top: 60px; /* Ensure it starts below the categories bar */
flex-direction: column; /* Ensure the content is arranged in a column */
}
.cart ul {
list-style-type: none;
padding: 0;
}
.cart li {
margin-bottom: 10px;
}
.cart-item button {
background-color: #d32f2f;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
.cart-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #ff9d3b;
}
.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;
}
.cart.visible {
display: flex; /* Show the cart when the 'visible' class is added */
}
.logo {
width: 100%;
max-width: 200px;
margin: 20px auto;
display: block;
transition: opacity 0.3s ease; /* Add transition for smooth hiding */
}
.logo.hidden {
opacity: 0; /* Hide the logo */
visibility: hidden; /* Ensure the logo is not clickable */
} }