Skip to content
Snippets Groups Projects
Commit 3c5b211e authored by xulirong2000's avatar xulirong2000
Browse files

cart

parent 57926ba4
No related branches found
No related tags found
No related merge requests found
import React, { useContext } from "react";
import { ShopContext } from "../../context/shop-context";
export const CartItem = (props) => {
const { id, productName, price, productImage } = props.data;
const { cartItems, addToCart, removeFromCart, updateCartItemCount } =
useContext(ShopContext);
return (
<div className="cartItem">
<img src={productImage} />
<div className="description">
<p>
<b>{productName}</b>
</p>
<p> Price: ${price}</p>
<div className="countHandler">
<button onClick={() => removeFromCart(id)}> - </button>
<input
value={cartItems[id]}
onChange={(e) => updateCartItemCount(Number(e.target.value), id)}
/>
<button onClick={() => addToCart(id)}> + </button>
</div>
</div>
</div>
);
};
.cart {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.cartItem {
width: 700px;
height: 250px;
display: flex;
align-items: center;
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
border-radius: 25px;
margin: 30px;
}
.cartItem img {
width: 200px;
}
.cartItem .description {
width: 100%;
font-size: 30px;
}
.countHandler input {
width: 40px;
text-align: center;
font-weight: bolder;
}
.checkout button {
width: 150px;
height: 50px;
background-color: rgb(19, 19, 19);
color: white;
border: none;
border-radius: 8px;
margin: 10px;
cursor: pointer;
}
\ No newline at end of file
...@@ -7,6 +7,8 @@ import { useNavigate } from "react-router-dom"; ...@@ -7,6 +7,8 @@ import { useNavigate } from "react-router-dom";
import "./cart.css"; import "./cart.css";
export const Cart = () => { export const Cart = () => {
const { cartItems, getTotalCartAmount, checkout } = useContext(ShopContext); const { cartItems, getTotalCartAmount, checkout } = useContext(ShopContext);
const totalAmount = getTotalCartAmount();
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
...@@ -22,6 +24,23 @@ export const Cart = () => { ...@@ -22,6 +24,23 @@ export const Cart = () => {
})} })}
</div> </div>
{totalAmount > 0 ? (
<div className="checkout">
<p> Subtotal: ${totalAmount} </p>
<button onClick={() => navigate("/")}> Continue Shopping </button>
<button
onClick={() => {
checkout();
navigate("/checkout");
}}
>
{" "}
Checkout{" "}
</button>
</div>
) : (
<h1> Your Shopping Cart is Empty</h1>
)}
</div> </div>
); );
}; };
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment