From a118fc11585ed2a7b3d1672aeb79921e4444aa19 Mon Sep 17 00:00:00 2001 From: vista-man <524715@vistacollege.nl> Date: Wed, 19 Feb 2025 10:23:07 +0100 Subject: [PATCH] Refactor shopping cart functionality and update UI elements --- website/Cart/cart.js | 20 ++----- website/index.html | 5 +- website/media/logo.png | Bin 0 -> 1554 bytes website/script.js | 17 ++++-- website/style.css | 118 ++++++++++++++++++++++++++++++++++++++--- 5 files changed, 132 insertions(+), 28 deletions(-) create mode 100644 website/media/logo.png diff --git a/website/Cart/cart.js b/website/Cart/cart.js index bf4445a..3d1d9f0 100644 --- a/website/Cart/cart.js +++ b/website/Cart/cart.js @@ -1,10 +1,11 @@ // Array to hold items added to the shopping cart -const cart = []; -let cartCount = 0; // Initialize cart count +const cart = JSON.parse(localStorage.getItem('cart')) || []; +let cartCount = cart.length; // Initialize cart count // Function to add an item to the shopping cart 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(); cartCount++; // Increment cart count updateCartCountDisplay(); // Update the cart count display @@ -41,6 +42,7 @@ function updateCart() { // Function to remove an item from the shopping cart function removeFromCart(index) { cart.splice(index, 1); + localStorage.setItem('cart', JSON.stringify(cart)); updateCart(); cartCount--; // Decrement cart count updateCartCountDisplay(); // Update the cart count display @@ -54,23 +56,11 @@ function updateCartCountDisplay() { } } - // Initial calls updateCart(); updateCartCountDisplay(); // Initialize the cart count on page load - // Function to close the modal window function closeModal() { 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 \ No newline at end of file diff --git a/website/index.html b/website/index.html index 60a9b98..6d3ad97 100644 --- a/website/index.html +++ b/website/index.html @@ -6,7 +6,6 @@ Het hoofdmenu van de Mees - @@ -14,6 +13,9 @@ + + +
Broodjes
@@ -40,7 +42,6 @@ -
diff --git a/website/media/logo.png b/website/media/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..fe61b2370f88f4c12770f1373db2f1639c524726 GIT binary patch literal 1554 zcmZ{keKgYx7{`aaT;j&c%azuZ=tz^wmL}_ED%ZQDFmIQU)NHgVFZ0^f45e~MG)@#o zs4PDX^OE8UCZs(q>d+xdaJkR$$=lh)VobUOZhwS8VQdRjUWe^CY zYI6$Z0s_gP*K~%G+*$=X-Z!kZFef`#>$NVGN-HZX*=+XQ+#H|JUtCd8`-0M~|{vgI2AO&O~4e|5LQi2h_} zT!=cZB+gbIy{1WuSX&{giW0Spr6$Tgy#&1wh|CYPYPLuAu*g+W2?%pY;L-*-4AL6B zWqCE7OTG(d)kgu9Eqcor3-DeXzw_uhzV2{{;_|#!1~8%+l&0%})OO=$iswP!u8}XF zX8@N3Y)g(GsaZ`BtSs4cbT&a=t=szVKg@FbI1f4NNQ{z;6zYWafy;?yj8KETUQ&L&AAQPF)zE&^*X=m z{Ky$DwT^+!P(;_qg@guf#R+;+`6f`}`BY#jARu>nL&PP^PLG&?4l|Z~%;RLW$uUvy z1Q}GW`A;(6r}Y2YnF%a_xg0wUT*Yh}OL~O9+)qHS9@3hi)kG1GQ-<~;>myq!rcLoC zvQYnZC<0S*u0Wr3@2@+sXVrau{2gNrm@+bx^cPsca`12`TTI;{=mq587@nizB_t9J zayz@iaod{}hn$;xhOIfgv)(IYXnC%aYs|#VP2u2W&WNIjUOm4;5sQsA@K$W$D?RA! z($ce7DKR1$kEA5hqN@%LSIpxyc=`6YbU$sH^@k{@jIBz}c4~?X2#NIFY!jaGVg(2Nymc8!esxCXWyzAX}bF_R+4jInkk*OY(e_{=Uye#Cqm5c zq%-wNw@w7%ck~wpB~iT%Z?y)fpkpfzhZ49MMzb0|ZF*q-pgZ>@GOQ&dr#63u{t(v{ zQB!J5?`irasA3vR5&Xs_h5%L!tML}Eh4w$l(e3yp3~G{2KdF+DRTh}B$(_(>h&8=~ za8`vE3>PthAdL}lm@toAYn9k=7!vTZWBz!Xk;Eyrf$%28vw8e_0XnbIAjNQ5g+$Pz zzBb_^!CnZ32e^`gYp;;konpt7&^5mPPq$Z_X4mpR$NL81!I8-@N4WLEs<3g^yjgF| zDcy3w&;__Q<69_TTMgB-#et!5{9-TSqs)VuvAtLy4In6;4-w|Im=@qDh;xnyxT69# z`>Gt5hkBQl8Cya_r6%2Vt9>FGG#czl2q2h_5j1SLJlf)_&5H+?QCC#ZSD#xr+_&+t zkceLhxF-ERF{1t^-f_3=hq##^j<%$=609XFyB(N`0U9%*@f=QW6Hh(eSc>1zY=MJ*5c0iRM^G)~@%uxsA literal 0 HcmV?d00001 diff --git a/website/script.js b/website/script.js index 7fa8b44..60da581 100644 --- a/website/script.js +++ b/website/script.js @@ -97,6 +97,16 @@ function showCategory(category) { 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 @@ -112,8 +122,7 @@ 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() { - const quantity = parseInt(document.getElementById("item-quantity").value); - addToCart({ title, price, quantity }); + addToCart({ title, price }); }; document.getElementById('modal').style.display = 'block'; @@ -160,9 +169,7 @@ function getDescription(title) { // 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); - } + cart.push(item); // Add item to the cart array localStorage.setItem('cart', JSON.stringify(cart)); updateCart(); } diff --git a/website/style.css b/website/style.css index 5313a92..2b844fc 100644 --- a/website/style.css +++ b/website/style.css @@ -13,13 +13,25 @@ body { background-color: #f2c14e; padding: 10px 0; display: flex; - justify-content: space-around; + flex-wrap: wrap; /* Allow wrapping of menu items */ + justify-content: center; /* Center the menu items */ align-items: center; 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 */ top: 0; - z-index: 1000; /* Ensure it is above other elements */ - transition: background-color 0.3s ease; /* Add transition for background color */ + left: 0; + 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 { @@ -34,11 +46,12 @@ body { cursor: pointer; font-size: 1.2em; 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 { - background-color: #f59e42; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +.menu-bar.top .menu-item { + flex: none; /* Remove flex-grow to fit all items in a single row */ } /* Productweergave in een grid */ @@ -130,6 +143,7 @@ body { /* Winkelwagen-icoon */ .cart-icon { + display: none; /* Initially hide the cart icon */ position: fixed; top: 80px; /* Move the cart icon down */ right: 20px; @@ -142,6 +156,10 @@ body { 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 { background-color: #e65c00; } @@ -201,4 +219,92 @@ body { bottom: 0; /* Position at the bottom */ 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 */ } \ No newline at end of file