Skip to content

Commit 09025ba

Browse files
snehalgadgesnehalgadge
committed
cart started
1 parent 5e9b3fb commit 09025ba

File tree

10 files changed

+117
-14
lines changed

10 files changed

+117
-14
lines changed

‎04_REACT/ecommerce-app/src/App.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Home from './pages/Home'
1212
import { productsData } from './api/api'
1313
import Signin from './pages/Signin'
1414
import Registration from './pages/Registration'
15+
import Cart from './pages/Cart'
1516

1617
const Layout =() =>{
1718
return(
@@ -28,7 +29,7 @@ const App = () => {
2829
<Route>
2930
<Route path="/" element={<Layout />}>
3031
<Route index element={<Home />} loader={productsData}></Route>
31-
{/* <Route path="/cart" element={<Cart />}></Route> */}
32+
<Route path="/cart" element={<Cart />}></Route>
3233
</Route>
3334
<Route path="/signin" element={<Signin />}></Route>
3435
<Route path="/registration" element={<Registration />}></Route>

‎04_REACT/ecommerce-app/src/components/Footer/FooterTop.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
import React from 'react'
2+
import { Link } from 'react-router-dom'
23

34
const FooterTop = () => {
45
return (
56
<div className='w-full bg-white py-6'>
67
<div className='w-full border-t-[1px] border-b-[1px] py-8'>
78
<div className='w-64 mx-auto text-center flex flex-col gap-1'>
89
<p className='text-sm'>See Personalised recommendation</p>
10+
<Link to="/signin">
911
<button className='w-full bg-yellow-400 rounded-md py-1 font-semibold
1012
cursor-pointer hover:bg-yellow-500 active:bg-yellow-700'>
1113
Sign In
1214
</button>
15+
</Link>
1316
<p className='text-sm mt-1'>
14-
New Customer? <span className='text-blue-600 ml-1 cursor-pointer'>
17+
New Customer?
18+
<Link to="/resgistration">
19+
<span className='text-blue-600 ml-1 cursor-pointer'>
1520
Start here.</span>
21+
</Link>
1622
</p>
1723
</div>
1824
</div>

‎04_REACT/ecommerce-app/src/components/Header/Header.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,13 @@ import {logo} from "../../assets/index"
1010

1111
// Component
1212
import HeaderBottom from './HeaderBottom';
13+
import { useSelector } from 'react-redux';
1314

1415
const Header = () => {
1516
const ref = useRef();
1617
const[showAll, setShowAll] = useState(false);
18+
const products = useSelector((state) => state.amazonReducer.products)
19+
1720
useEffect(() =>{
1821
document.body.addEventListener("click",(e) =>{
1922
if(e.target.contains(ref.current)){
@@ -25,9 +28,11 @@ const Header = () => {
2528
<div className='w-full font-bodyFont sticky top-0 z-50'>
2629
<div className='w-full bg-amazon_blue text-white px-4 py-3 flex items-center gap-4' >
2730
{/* <------------Image here -----------> */}
31+
<Link to="/">
2832
<div className='headerHover'>
2933
<img className='w-24 mt-2' src={logo} alt='logo'/>
3034
</div>
35+
</Link>
3136
{/* <------------Image End here -----------> */}
3237

3338
{/* <------------Deliver Start here -----------> */}
@@ -100,14 +105,18 @@ const Header = () => {
100105
{/* <------------Order End here -----------> */}
101106

102107
{/* <------------Cart Start here -----------> */}
108+
<Link to="/cart">
103109
<div className='flex items-start justify-center headerHover relative'>
104110
<ShoppingCartOutlinedIcon />
105111
<p className='text-xs font-semibold mt-3 text-white'>
106112
Cart<span className='absolute text-xs -top-1 left-6 font-semibold p-1 h-4
107113
bg-[#f3a847] text-amazon_blue rounded-full flex justify-center
108-
items-center'>0</span>
114+
items-center'>
115+
{products.length > 0?products.length:0}
116+
</span>
109117
</p>
110118
</div>
119+
</Link>
111120
{/* <------------Cart End here -----------> */}
112121
</div>
113122

‎04_REACT/ecommerce-app/src/components/Home/Products.js‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
55
import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
66
import FavoriteIcon from '@mui/icons-material/Favorite';
77
import { useLoaderData } from 'react-router-dom'
8+
import { useDispatch } from 'react-redux';
9+
import { addToCart } from '../../redux/amazonSlice';
810

911

1012

1113
const Products = () => {
14+
const disptach = useDispatch();
1215
const data = useLoaderData();
1316
const productsData = data.data;
1417

@@ -37,8 +40,8 @@ const Products = () => {
3740
src={item.image}
3841
alt='ProductImg'
3942
/>
40-
<ul className='w-full h-36 bg-gray-100 absolute -bottom-[170px]
41-
group-hover:bottom-0 duration-700 flex flex-col items-end justify-center gap-2
43+
<ul className='w-full h-36 bg-gray-100 absolute -bottom-[168px]
44+
group-hover:bottom-2 duration-700 flex flex-col items-end justify-center gap-2
4245
px-2 border-1 border-r'>
4346
<li className='productli'>
4447
Compare{' '}
@@ -72,7 +75,7 @@ const Products = () => {
7275
</li>
7376
</ul>
7477
</div>
75-
<div className='px-4 z-10 bg-white'>
78+
<div className='px-4 py-4 z-10 bg-white'>
7679
<div className='flex items-center justify-between'>
7780
<h2 className='tracking-wide text-lg text-amazon_blue
7881
font-medium'>
@@ -90,11 +93,20 @@ const Products = () => {
9093
<StarBorderIcon />
9194
</div>
9295
<div>
93-
<button className='w-full font-medium text-base bg-gradient-to-tr
96+
<button onClick={()=>disptach(addToCart({
97+
id:item.id,
98+
title:item.title,
99+
description:item.description,
100+
price:item.price,
101+
category:item.category,
102+
image:item.image,
103+
quantity:1,
104+
}))}
105+
className='w-full font-medium text-base bg-gradient-to-tr
94106
from-yellow-400 to yellow-500 border hover:from-yellow-300 hover:to-yellow-600
95107
active:from-yellow-400 active:to-yellow-500 duration-200 py-1.5 rounded-md
96108
mt-3'>
97-
Add to
109+
Add to Cart
98110
</button>
99111
</div>
100112
</div>

‎04_REACT/ecommerce-app/src/index.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
import React from 'react';
22
import { createRoot } from 'react-dom/client';
33
import "slick-carousel/slick/slick.css";
4+
import { Provider } from 'react-redux';
5+
import {store} from './redux/store'
46
import App from './App';
57
import './index.css';
68

79
const container = document.getElementById('root');
810
const root = createRoot(container);
911

10-
root.render(<App />);
12+
root.render(
13+
<Provider store={store}>
14+
<App />
15+
</Provider>
16+
);
1117

1218

‎04_REACT/ecommerce-app/src/pages/Cart.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react'
2+
import { useSelector } from 'react-redux'
3+
4+
const Cart = () => {
5+
const products = useSelector((state) => state.amazonReducer.products)
6+
return (
7+
<div className='w-full bg-gray-100 p-4'>
8+
<div className='container mx-auto h-96 grid grid-cols-5 gap-8'>
9+
<div className='w-full h-auto bg-white px-4 col-span-4'>
10+
<div className='flex items-center justify-between border-b-[1px]
11+
border-b-gray-400 py-3'>
12+
<h1 className='text-3xl font-semibold'>Shopping Cart</h1>
13+
<h4 className='text-xl font-semibold'>Subtitle</h4>
14+
</div>
15+
{/* Products start here */}
16+
<div>
17+
{
18+
products.map((item)=>(
19+
<div className='w-full border-b-[1px] border-b-gray-300 p-4 flex
20+
items-center gap-6' >
21+
<div>
22+
<img
23+
src={item.image}
24+
className='w-full h-44 object-contain'
25+
alt='ProductsImgs'/>
26+
</div>
27+
</div>
28+
))
29+
}
30+
</div>
31+
</div>
32+
<div className='w-full h-full bg-white col-span-1'></div>
33+
</div>
34+
</div>
35+
)
36+
}
37+
38+
export default Cart

‎04_REACT/ecommerce-app/src/pages/Registration.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,13 @@ const Registration = () => {
6464
setErrCPassword("Password not matched")
6565
}
6666

67-
if(name && email && password && cPassword && password.length >= 6 &&
68-
cPassword === password && emailValidation(email)){
67+
if(name &&
68+
email &&
69+
password &&
70+
cPassword &&
71+
password.length >= 6 &&
72+
cPassword === password &&
73+
emailValidation(email)){
6974
console.log(name,email, password,cPassword)
7075
setName("");
7176
setEmail("");

‎04_REACT/ecommerce-app/src/pages/Signin.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Signin = () => {
3232
if(!email){
3333
setErrEmail("Enter your Email")
3434
}else if(!emailValidation(email)){
35-
setErrEmail("Enter vaild email");
35+
setErrEmail("Invaild email");
3636
}
3737
if(!password){
3838
setErrPassword("Enter your Password")

‎04_REACT/ecommerce-app/src/redux/amazonSlice.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { createSlice } from "@reduxjs/toolkit";
2+
3+
const initialState = {
4+
products:[],
5+
userInfo:[],
6+
};
7+
8+
export const amazonSlice = createSlice({
9+
name:"amazon",
10+
initialState,
11+
reducers:{
12+
addToCart:(state,action)=>{
13+
const item = state.products.find((item)=>item.id === action.payload.id)
14+
if(item){
15+
item.quantity += action.payload.quantity;
16+
}else{
17+
state.products.push(action.payload)
18+
}
19+
}
20+
}
21+
})
22+
23+
export const{ addToCart } = amazonSlice.actions;
24+
export default amazonSlice.reducer;

04_REACT/ecommerce-app/src/app/store.js renamed to 04_REACT/ecommerce-app/src/redux/store.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { configureStore } from '@reduxjs/toolkit';
2-
import counterReducer from '../features/counter/counterSlice';
2+
import amazonReducer from "../redux/amazonSlice"
33

44
export const store = configureStore({
55
reducer: {
6-
counter: counterReducer,
6+
amazonReducer
77
},
88
});
9+
10+
export default store

0 commit comments

Comments
 (0)