Skip to content

Commit b16320d

Browse files
author
WebDeveloperGuide
committed
Add to Cart Functionality added on product detail page
1 parent c999c17 commit b16320d

File tree

10 files changed

+110
-25
lines changed

10 files changed

+110
-25
lines changed

‎web_panel/src/components/Cart.js

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ import {showCart} from '../redux/actions/cartActions';
66

77
const Cart = () => {
88
const showCartStatus = useSelector((state)=> state.cart.showCart);
9+
const cartItems = useSelector((state)=> state.cart.cartItems);
10+
const cartItemsList = cartItems.map((product)=>{
11+
return(
12+
<CartProduct detail={product} key={product.id}/>
13+
)
14+
})
915
const dispatch = useDispatch();
1016
const closeCart = () => {
1117
dispatch(showCart(false))
@@ -19,12 +25,20 @@ const Cart = () => {
1925
<i className="fas fa-times" />
2026
</button>
2127
<header>
22-
<h3 className="text-slanted">your bag</h3>
28+
<h3 className="text-slanted">Shopping Cart</h3>
2329
</header>
2430
{/* cart items */}
2531
<div className="cart-items">
26-
<CartProduct/>
27-
<CartProduct/>
32+
{
33+
cartItems.length === 0 ? (
34+
<div className="empty-cart">
35+
Your cart is empty
36+
</div>
37+
):(
38+
cartItemsList
39+
)
40+
41+
}
2842
</div>
2943
<CartTotal/>
3044
</aside>

‎web_panel/src/components/CartProduct.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React from 'react';
22

3-
const CartProduct = () => {
3+
const CartProduct = ({detail}) => {
4+
5+
const {image, name, price} = detail;
46
return(
57
<>
68
<article className="cart-item">
7-
<img src="https://dl.airtable.com/.attachments/14ac9e946e1a02eb9ce7d632c83f742f/4fd98e64/product-1.jpeg" className="cart-item-img" alt="product" />
9+
<img src={image} className="cart-item-img" alt="product" />
810
<div className="cart-item-info">
9-
<h5 className="cart-item-name">high-back bench</h5>
10-
<span className="cart-item-price">$19.99</span>
11+
<h5 className="cart-item-name">{name}</h5>
12+
<span className="cart-item-price">${price}</span>
1113
<button className="cart-item-remove-btn">remove</button>
1214
</div>
1315
<div>

‎web_panel/src/components/CartTotal.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import React from 'react';
2+
import {useSelector} from 'react-redux';
23

34
const CartTotal = () => {
5+
const cart = useSelector((state) => state.cart);
6+
const { cartItems } = cart;
7+
const cartTotal = cartItems.reduce((a, i) => a + i.qty * i.price, 0).toFixed(2);
48
return(
59
<>
610
<footer>
7-
<h3 className="cart-total text-slanted">total : $12.99</h3>
11+
<h3 className="cart-total text-slanted">total : ${cartTotal}</h3>
812
<button className="cart-checkout btn">checkout</button>
913
</footer>
1014
</>

‎web_panel/src/components/Navbar.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {showCart} from '../redux/actions/cartActions';
88
const NavBar = () => {
99
const dispatch = useDispatch();
1010
const showCartStatus = useSelector((state)=> state.cart.showCart);
11+
const cartItemsCount = useSelector((state)=> state.cart.cartItems).length;
1112

1213
const toggleCart = () => {
1314
dispatch(showCart(!showCartStatus))
@@ -43,7 +44,7 @@ const NavBar = () => {
4344
<button className="toggle-cart" onClick={toggleCart}>
4445
<i className="fas fa-shopping-cart" />
4546
</button>
46-
<span className="cart-item-count">2</span>
47+
<span className="cart-item-count">{cartItemsCount}</span>
4748
</div>
4849
</div>
4950
</nav>

‎web_panel/src/components/ProductDetail.js

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
1-
import React from 'react';
1+
import React, {useState} from 'react';
2+
import {useDispatch} from 'react-redux';
3+
import {addToCart} from '../redux/actions/cartActions';
24

35
const Products = (props) => {
46
const {id,thumbnail,title,price,description} = props.details;
7+
const [itemQty, setItemQty] = useState(1);
8+
const dispatch = useDispatch();
9+
const addToCartHandle = (product) => {
10+
dispatch(addToCart(product,itemQty));
11+
}
12+
13+
const handleItemQty = (e) =>{
14+
setItemQty(e.target.value)
15+
}
516
return(
617
<>
718
<section className="single-product section">
@@ -19,7 +30,21 @@ const Products = (props) => {
1930
<p className="single-product-desc">
2031
{description}
2132
</p>
22-
<button className="addToCartBtn btn" data-id="id">add to cart</button>
33+
<p className="item-qty">
34+
<select onChange={handleItemQty} defaultValue={itemQty}>
35+
<option value="1">1</option>
36+
<option value="2">2</option>
37+
<option value="3">3</option>
38+
<option value="4">4</option>
39+
<option value="5">5</option>
40+
<option value="6">6</option>
41+
<option value="7">7</option>
42+
<option value="8">8</option>
43+
<option value="9">9</option>
44+
<option value="10">10</option>
45+
</select>
46+
</p>
47+
<button className="addToCartBtn btn" data-id="id" onClick={() => addToCartHandle(props.details)}>add to cart</button>
2348
</div>
2449
</article>
2550
</div>

‎web_panel/src/index.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -895,4 +895,18 @@ Cart
895895
.not-found-text{
896896
margin-bottom: 15px;
897897
margin-top: -20px;
898+
}
899+
900+
.single-product .item-qty select{
901+
background-color: #f3f3f3;
902+
width: 100px;
903+
height: 40px;
904+
text-align: center;
905+
border: 0px;
906+
border-radius: 5px;
907+
}
908+
909+
.empty-cart{
910+
margin:150px 0;
911+
text-align: center;
898912
}

‎web_panel/src/redux/actions/cartActions.js

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,31 @@ export const showCart = (cartStatus) => async(dispatch) =>{
2020
}
2121

2222

23-
export const setProductDetail = (id) => async(dispatch) =>{
23+
export const addToCart = (product,qty) => (dispatch,getState) => {
2424
try{
25-
const response = await axios.get(`https://dummyjson.com/products/${id}`);
26-
console.log(response)
27-
dispatch({ type: ActionTypes.SET_PRODUCT_DETAIL, payload: response.data });
28-
29-
} catch (error){
30-
25+
26+
dispatch({
27+
type: ActionTypes.ADD_ITEM_TO_CART,
28+
payload: {
29+
id: product.id,
30+
name: product.title,
31+
image: product.thumbnail,
32+
price: product.price,
33+
countInStock: product.stock,
34+
qty,
35+
}
36+
});
37+
38+
localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems));
39+
40+
toast.error("Added to Cart", ToastObjects);
41+
42+
}catch (error){
3143
const message =
3244
error.response && error.response.data.message
3345
? error.response.data.message
3446
: error.message;
3547

3648
toast.error(message, ToastObjects);
3749
}
38-
}
39-
40-
export const resetProductDetail = () => async(dispatch) =>{
41-
dispatch({ type: ActionTypes.RESET_PRODUCT_DETAIL});
4250
}

‎web_panel/src/redux/actions/productActions.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export const getProducts = () => async(dispatch) =>{
2323
export const setProductDetail = (id) => async(dispatch) =>{
2424
try{
2525
const response = await axios.get(`https://dummyjson.com/products/${id}`);
26-
console.log(response)
2726
dispatch({ type: ActionTypes.SET_PRODUCT_DETAIL, payload: response.data });
2827

2928
} catch (error){

‎web_panel/src/redux/constants/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ export const ActionTypes = {
22
FETCH_PRODUCTS:"FETCH_PRODUCTS",
33
SET_PRODUCT_DETAIL:"SET_PRODUCT_DETAIL",
44
RESET_PRODUCT_DETAIL:"RESET_PRODUCT_DETAIL",
5-
CART_STATUS:"CART_STATUS"
5+
CART_STATUS:"CART_STATUS",
6+
ADD_ITEM_TO_CART:"ADD_ITEM_TO_CART",
67
}

‎web_panel/src/redux/reducers/cartReducer.js

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,31 @@
11
import { ActionTypes } from '../constants';
22

33
const initialState = {
4-
cartProducts:[],
4+
cartItems: [],
55
showCart:false
66
}
77

88
export const cartReducer = (state = initialState,{type,payload}) => {
99
switch(type){
1010
case ActionTypes.CART_STATUS:
1111
return {...state,showCart:payload};
12+
case ActionTypes.ADD_ITEM_TO_CART:
13+
const item = payload;
14+
const existItem = state.cartItems.find((x) => x.product === item.product);
15+
16+
if (existItem) {
17+
return {
18+
...state,
19+
cartItems: state.cartItems.map((x) =>
20+
x.id === existItem.id ? item : x
21+
),
22+
};
23+
} else {
24+
return {
25+
...state,
26+
cartItems: [...state.cartItems, item],
27+
};
28+
}
1229
default:
1330
return state;
1431
}

0 commit comments

Comments
 (0)