From e36eb4cda753261fec7eec6f5aec71b9dfa56640 Mon Sep 17 00:00:00 2001
From: Tiago Brito <69848652+britotiago03@users.noreply.github.com>
Date: Fri, 10 May 2024 05:15:00 +0200
Subject: [PATCH] Implemented Cart.js
---
frontend/src/components/Cart.js | 49 +++++++++++++++++++++++++++++++++
1 file changed, 49 insertions(+)
create mode 100644 frontend/src/components/Cart.js
diff --git a/frontend/src/components/Cart.js b/frontend/src/components/Cart.js
new file mode 100644
index 0000000..c941c87
--- /dev/null
+++ b/frontend/src/components/Cart.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { useCart } from '../contexts/CartContext';
+import '../css/Cart.css'
+
+function Cart() {
+ const { cart, removeFromCart, updateQuantity } = useCart();
+
+ if (!cart.items.length) {
+ return <div>Your cart is empty.</div>;
+ }
+
+ const handleQuantityChange = (id, event) => {
+ updateQuantity(id, parseInt(event.target.value));
+ };
+
+ return (
+ <div className="cart-container">
+ <h1>Your Shopping Cart</h1>
+ <div className="cart-container-list">
+ {cart.items.map(item => (
+ <div key={item.id} className="cart-item">
+ <img src={item.ImageURL} alt={item.Name} style={{ width: '100px', height: '100px' }} />
+ <div>
+ <h3>{item.Name}</h3>
+ <p>{item.Price},-</p>
+ <p>
+ Quantity:
+ <input
+ type="number"
+ value={item.quantity}
+ onChange={e => handleQuantityChange(item.id, e)}
+ min="1"
+ max="99"
+ />
+ </p>
+ <button onClick={() => removeFromCart(item.id)}>Remove from Cart</button>
+ </div>
+ </div>
+ ))}
+ </div>
+ <div>
+ <h3>Total: {cart.items.reduce((total, item) => total + item.quantity * item.Price, 0).toFixed(2)},-</h3>
+ <button onClick={() => alert('Proceed to Checkout')}>Checkout</button>
+ </div>
+ </div>
+ );
+}
+
+export default Cart;
--
GitLab