From e0077b4e1c0d74917b98b2b7838ed6543df96029 Mon Sep 17 00:00:00 2001
From: vista-man <524715@vistacollege.nl>
Date: Wed, 12 Feb 2025 13:38:13 +0100
Subject: [PATCH] Refactor shopping cart functionality and styles; add new
cart.js and cart.css files
---
website/cart.css | 52 ++++++++++++++++++++++++++++++++++++++++
website/cart.js | 45 ++++++++++++++++++++++++++++++++++
website/index.html | 2 ++
website/media/spa.jpg | Bin 28338 -> 0 bytes
website/media/spa.webp | Bin 0 -> 5940 bytes
website/script.js | 48 +------------------------------------
website/style.css | 53 -----------------------------------------
7 files changed, 100 insertions(+), 100 deletions(-)
create mode 100644 website/cart.css
create mode 100644 website/cart.js
delete mode 100644 website/media/spa.jpg
create mode 100644 website/media/spa.webp
diff --git a/website/cart.css b/website/cart.css
new file mode 100644
index 0000000..5bf9ec8
--- /dev/null
+++ b/website/cart.css
@@ -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;
+}
diff --git a/website/cart.js b/website/cart.js
new file mode 100644
index 0000000..d90e190
--- /dev/null
+++ b/website/cart.js
@@ -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 = `
+ ${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';
+ }
+}
+
+// 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();
diff --git a/website/index.html b/website/index.html
index 9b709e7..12a1be9 100644
--- a/website/index.html
+++ b/website/index.html
@@ -5,6 +5,7 @@
Het hoofdmenu van de Mees
+
@@ -51,4 +52,5 @@
+