From ac41af07fd8e0373d4c49b11521f8504754493f1 Mon Sep 17 00:00:00 2001
From: vista-man <524715@vistacollege.nl>
Date: Tue, 18 Feb 2025 09:22:29 +0100
Subject: [PATCH] Enhance cart functionality and layout; add item quantity
input and update styles for better responsiveness
---
website/Cart/cart.css | 53 +++++++++++++++++++++---
website/index.html | 14 ++++---
website/script.js | 70 +++++++++++++++++++++++++++++++-
website/style.css | 93 ++++++++++++++++++++++++-------------------
4 files changed, 175 insertions(+), 55 deletions(-)
diff --git a/website/Cart/cart.css b/website/Cart/cart.css
index 2468b23..1eb73f3 100644
--- a/website/Cart/cart.css
+++ b/website/Cart/cart.css
@@ -1,18 +1,36 @@
/* Winkelmandje sectie */
.cart {
- width: 15%;
- background-color: #fff; /* Change background color to white */
+ width: 15%; /* Make the cart a bit smaller */
padding: 20px;
- height: 100vh;
- overflow-y: auto;
- order: 3; /* Ensure the cart is on the right */
+ 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: 0; /* Align the cart to the top */
+ top: 60px; /* Ensure it starts below the categories bar */
display: flex;
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;
@@ -50,3 +68,26 @@
#order-button:hover {
background-color: #45a049;
}
+
+
+.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;
+}
diff --git a/website/index.html b/website/index.html
index f3b9190..d704e33 100644
--- a/website/index.html
+++ b/website/index.html
@@ -1,5 +1,6 @@
+
@@ -13,9 +14,8 @@
-
-
@@ -61,12 +62,13 @@
-
-
+
\ No newline at end of file
diff --git a/website/script.js b/website/script.js
index 6d5b472..03728b2 100644
--- a/website/script.js
+++ b/website/script.js
@@ -5,7 +5,6 @@ function showCategory(category) {
let items = [];
-
// Afhankelijk van de gekozen categorie, voeg je de juiste producten toe
if (category === 'Broodjes') {
items = [
@@ -107,10 +106,12 @@ function showItemDetails(item) {
document.getElementById("modal-description").innerText = description;
document.getElementById("modal-price").innerText = `Prijs: €${price.toFixed(2)}`;
document.getElementById("add-to-cart").onclick = function() {
- addToCart({ title, price });
+ const quantity = parseInt(document.getElementById("item-quantity").value);
+ addToCart({ title, price, quantity });
};
document.getElementById('modal').style.display = 'block';
+ document.querySelector('.menu-bar').classList.add('dark'); // Add dark class to menu-bar
}
// Functie om de beschrijving op te halen afhankelijk van de titel
@@ -136,3 +137,68 @@ function getDescription(title) {
}
return "";
}
+
+// Functie om een item aan het winkelwagentje toe te voegen
+function addToCart(item) {
+ const cart = JSON.parse(localStorage.getItem('cart')) || [];
+ for (let i = 0; i < item.quantity; i++) {
+ cart.push(item);
+ }
+ localStorage.setItem('cart', JSON.stringify(cart));
+ updateCart();
+}
+
+// Functie om het winkelwagentje bij te werken
+function updateCart() {
+ const cart = JSON.parse(localStorage.getItem('cart')) || [];
+ 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 = `
+ ${item.title}
+ €${item.price.toFixed(2)}
+
+ `;
+ 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';
+ }
+
+ // Update the cart count in the cart icon
+ document.getElementById('cart-count').innerText = cart.length;
+}
+
+// Functie om een item uit het winkelwagentje te verwijderen
+function removeFromCart(index) {
+ const cart = JSON.parse(localStorage.getItem('cart')) || [];
+ cart.splice(index, 1);
+ localStorage.setItem('cart', JSON.stringify(cart));
+ updateCart();
+}
+
+// Functie om het modaal venster te sluiten
+function closeModal() {
+ document.getElementById('modal').style.display = 'none';
+ document.querySelector('.menu-bar').classList.remove('dark'); // Remove dark class from menu-bar
+}
+
+// Zorg ervoor dat het modaal venster sluit wanneer er buiten het venster wordt geklikt
+window.onclick = function(event) {
+ if (event.target == document.getElementById('modal')) {
+ closeModal();
+ }
+}
+
+// Initial call to updateCart to ensure the button is hidden on page load
+updateCart();
diff --git a/website/style.css b/website/style.css
index 46bd676..1d6339e 100644
--- a/website/style.css
+++ b/website/style.css
@@ -3,26 +3,36 @@ body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
- justify-content: space-between;
+ flex-direction: column; /* Change to column to accommodate the top bar */
background-color: #f2c14e;
}
-/* Linkerkant menu */
-.menu-list {
- width: 25%;
+/* Top bar menu */
+.menu-bar {
+ width: 100%;
background-color: #f2c14e;
- padding: 20px;
- height: 100vh;
- overflow-y: auto;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ position: fixed; /* Fix the top bar to the top */
+ top: 0;
+ z-index: 1000; /* Ensure it is above other elements */
+ transition: background-color 0.3s ease; /* Add transition for background color */
+}
+
+.menu-bar.dark {
+ background-color: #d1a73e; /* Darker background color when modal is open */
}
.menu-item {
background-color: #fff;
- padding: 20px;
- margin: 10px 0;
+ padding: 10px 20px;
+ margin: 5px;
border-radius: 8px;
cursor: pointer;
- font-size: 1.5em;
+ font-size: 1.2em;
transition: all 0.3s ease;
}
@@ -33,15 +43,16 @@ body {
/* Productweergave in een grid */
.product-display {
- width: 55%;
+ width: calc(100% - 20%); /* Adjust width to leave space for the cart */
+ display: flex;
flex-wrap: wrap;
- padding: 50px;
- justify-content: space-between 40px;
- display: inline-flex;
+ padding: 20px;
+ justify-content: space-around;
+ margin-top: 60px; /* Add margin to ensure it starts below the top bar */
}
.product-box {
- width: 200px;
+ width: 200px; /* Keep the width fixed */
margin: 10px;
border-radius: 8px;
overflow: hidden;
@@ -49,8 +60,6 @@ body {
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
-
-
}
.product-box:hover {
@@ -95,32 +104,14 @@ body {
}
.close {
- color: red;
position: absolute;
- top: 80px;
- right: 450px;
- font-size: 40px;
+ top: 10px;
+ right: 20px;
+ font-size: 30px;
font-weight: bold;
cursor: pointer;
}
-/* Winkelmandje */
-.cart {
- width: 25%;
- padding: 20px;
- background-color: #fff;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.cart ul {
- list-style-type: none;
- padding: 0;
-}
-
-.cart li {
- margin-bottom: 10px;
-}
-
#add-to-cart {
background-color: #4CAF50;
color: white;
@@ -128,16 +119,17 @@ body {
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
+ margin-top: 20px;
}
#add-to-cart:hover {
background-color: #45a049;
}
- /* Winkelwagen-icoon */
- .cart-icon {
+/* Winkelwagen-icoon */
+.cart-icon {
position: fixed;
- top: 20px;
+ top: 80px; /* Move the cart icon down */
right: 20px;
background-color: #ff6600;
color: white;
@@ -188,4 +180,23 @@ body {
.product button:hover {
background-color: #e65c00;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .menu-bar {
+ flex-wrap: wrap; /* Allow wrapping of menu items */
+ }
+
+ .product-display {
+ width: 100%; /* Use full width for product display */
+ margin-top: 120px; /* Increase margin to accommodate wrapped menu bar */
+ }
+
+ .cart {
+ width: 100%; /* Use full width for cart */
+ top: auto; /* Remove fixed position */
+ bottom: 0; /* Position at the bottom */
+ height: auto; /* Adjust height */
+ }
}
\ No newline at end of file