Skip to content

Commit 97650b6

Browse files
ebrajebraj
committed
Cart(Add&Retrieve) functionality added
1 parent f2ba35f commit 97650b6

File tree

10 files changed

+104
-37
lines changed

10 files changed

+104
-37
lines changed

‎src/components/App.js

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,30 @@ import Laptops from "./Laptops/Laptops";
1111
import Phones from "./Phones/Phones";
1212
import Footer from "./Footer/Footer";
1313
import SpecsCmp from "./SpecsCmp/SpecsCmp";
14+
import Cart from "./Cart/Cart";
1415

1516
const App = () => {
1617
const [currentItem, setCurrentItem] = useState([]);
1718
const [laptopsList, setLaptopsList] = useState([]);
1819
const [phonesList, setPhonesList] = useState([]);
20+
const [retrievedData, setRetrievedData] = useState([]);
21+
22+
// About the Commerce Cart
23+
// commerce.cart.retrieve().then((cart) => console.log(cart));
1924

2025
const getCurrentItem = (curItem) => {
2126
setCurrentItem(curItem);
2227
};
2328

29+
/**
30+
* Function to add the item to the cart....!
31+
*/
32+
const addItemsToCart = (productID, quantity = 1) => {
33+
commerce.cart
34+
.add(productID, quantity)
35+
.then((response) => console.log(response));
36+
};
37+
2438
useEffect(() => {
2539
commerce.products
2640
.list({ category_slug: ["laptop"] })
@@ -31,11 +45,14 @@ const App = () => {
3145
.list({ category_slug: ["phone"] })
3246
.then((response) => setPhonesList(response.data));
3347
}, []);
48+
useEffect(() =>
49+
commerce.cart.retrieve().then((response) => setRetrievedData(response))
50+
);
3451

3552
return (
3653
<Router>
3754
<div className="flex flex-col w-full min-h-screen justify-between">
38-
<Navbar />
55+
<Navbar retrievedData={retrievedData} />
3956
<Switch>
4057
<Route path="/" exact>
4158
<div>
@@ -49,7 +66,15 @@ const App = () => {
4966
</Route>
5067
<Router path="/specs">
5168
<div>
52-
<SpecsCmp currentItem={currentItem} />
69+
<SpecsCmp
70+
currentItem={currentItem}
71+
addItemsToCart={addItemsToCart}
72+
/>
73+
</div>
74+
</Router>
75+
<Router path="/cart">
76+
<div>
77+
<Cart />
5378
</div>
5479
</Router>
5580
</Switch>

‎src/components/Cart/Cart.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
3+
const Cart = () => {
4+
return (
5+
<div className="py-5 px-6">
6+
<div className="lg:container mx-auto bg-pink-100"></div>
7+
</div>
8+
);
9+
};
10+
11+
export default Cart;

‎src/components/Cart/Cart.scss

Whitespace-only changes.

‎src/components/Laptops/Laptops.jsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,11 @@ const Laptops = ({ getCurrentItem, laptopsList }) => {
2525
<div>
2626
<div className="e__grid-container text-center">
2727
{laptopsList.map((laptop) => (
28-
<Products laptop={laptop} getCurrentItem={getCurrentItem} />
28+
<Products
29+
key={laptop.id}
30+
laptop={laptop}
31+
getCurrentItem={getCurrentItem}
32+
/>
2933
))}
3034
</div>
3135
</div>

‎src/components/Navbar/Navbar.jsx

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React from "react";
2+
import "./Navbar.scss";
23

34
//Importing this way so the I can use both the links
45
import { Link as PageLink } from "react-router-dom";
56
import { Link } from "react-scroll";
67

7-
const Navbar = () => {
8+
const Navbar = ({ retrievedData }) => {
9+
const { total_items } = retrievedData;
810
return (
911
<div className="bg-black py-6 px-6">
1012
<nav className="lg:container mx-auto text-gray-100 flex items-center justify-between">
@@ -13,29 +15,32 @@ const Navbar = () => {
1315
<PageLink to="/">EZONE</PageLink>
1416
</h4>
1517
</div>
16-
<ul className="flex items-center text-gray-400">
18+
<ul className="flex items-center text-gray-400 py-1">
1719
<li className="px-3 hover:text-gray-100 cursor-pointer">
1820
<Link to="laptops-cmp" spy={true} smooth={true} duration={600}>
1921
Laptops
2022
</Link>
2123
</li>
22-
<li className="px-3 hover:text-gray-100 cursor-pointer">
24+
<li className="px-3 pr-6 hover:text-gray-100 cursor-pointer">
2325
<Link to="phones-cmp" spy={true} smooth={true} duration={900}>
2426
Phones
2527
</Link>
2628
</li>
27-
<li>
28-
<span>
29-
<svg
30-
xmlns="http://www.w3.org/2000/svg"
31-
width="25"
32-
height="25"
33-
viewBox="0 0 24 24"
34-
fill="#eeeeff"
35-
>
36-
<path d="M20 7h-4v-3c0-2.209-1.791-4-4-4s-4 1.791-4 4v3h-4l-2 17h20l-2-17zm-11-3c0-1.654 1.346-3 3-3s3 1.346 3 3v3h-6v-3zm-4.751 18l1.529-13h2.222v1.5c0 .276.224.5.5.5s.5-.224.5-.5v-1.5h6v1.5c0 .276.224.5.5.5s.5-.224.5-.5v-1.5h2.222l1.529 13h-15.502z" />
37-
</svg>
38-
</span>
29+
<li className="e_cart">
30+
<PageLink to="/cart" className="cursor-pointer">
31+
<span>
32+
<svg
33+
xmlns="http://www.w3.org/2000/svg"
34+
width="25"
35+
height="25"
36+
viewBox="0 0 24 24"
37+
fill="#eeeeff"
38+
>
39+
<path d="M20 7h-4v-3c0-2.209-1.791-4-4-4s-4 1.791-4 4v3h-4l-2 17h20l-2-17zm-11-3c0-1.654 1.346-3 3-3s3 1.346 3 3v3h-6v-3zm-4.751 18l1.529-13h2.222v1.5c0 .276.224.5.5.5s.5-.224.5-.5v-1.5h6v1.5c0 .276.224.5.5.5s.5-.224.5-.5v-1.5h2.222l1.529 13h-15.502z" />
40+
</svg>
41+
</span>
42+
</PageLink>
43+
<span className="e_cart_num">{total_items}</span>
3944
</li>
4045
</ul>
4146
</nav>

‎src/components/Navbar/Navbar.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.e_cart {
2+
position: relative;
3+
&_num {
4+
position: absolute;
5+
width: 23.5px;
6+
height: 23.5px;
7+
text-align: center;
8+
border-radius: 50%;
9+
top: -15px;
10+
right: -20px;
11+
background-color: #eeeeff;
12+
color: #111111;
13+
display: grid;
14+
place-content: center;
15+
}
16+
}

‎src/components/Phones/Phones.jsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react";
33
// Importing the Product
44
import Products from "../Products/Products";
55

6-
const Laptops = ({ getCurrentItem, phonesList }) => {
6+
const Laptops = ({ getCurrentItem, phonesList, addItemsToCart }) => {
77
return (
88
<div className="pt-4 px-6">
99
<div className="lg:container mx-auto phones-cmp">
@@ -25,7 +25,12 @@ const Laptops = ({ getCurrentItem, phonesList }) => {
2525
<div>
2626
<div className="e__grid-container text-center">
2727
{phonesList.map((laptop) => (
28-
<Products laptop={laptop} getCurrentItem={getCurrentItem} />
28+
<Products
29+
key={laptop.id}
30+
laptop={laptop}
31+
getCurrentItem={getCurrentItem}
32+
addItemsToCart={addItemsToCart}
33+
/>
2934
))}
3035
</div>
3136
</div>

‎src/components/Products/Products.jsx

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,15 @@ const Products = ({ laptop, getCurrentItem }) => {
2121
</h4>
2222
</div>
2323
<div className="py-2">
24-
<button className="px-6 py-2 hover:bg-gray-900 hover:text-gray-100 border-gray-500 rounded-full border">
25-
<PageLink
26-
to="/specs"
27-
onClick={() => {
28-
getTheCurrentItem(laptop);
29-
}}
30-
>
31-
Show Specs
32-
</PageLink>
33-
</button>
24+
<PageLink
25+
className="px-6 py-2 inline-block hover:bg-gray-900 hover:text-gray-100 border-gray-500 rounded-full border"
26+
to="/specs"
27+
onClick={() => {
28+
getTheCurrentItem(laptop);
29+
}}
30+
>
31+
Show Specs
32+
</PageLink>
3433
</div>
3534
</div>
3635
</>

‎src/components/SpecsCmp/SpecsCmp.jsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import "./SpecsCmp.scss";
33

4-
const SpecsCmp = ({ currentItem }) => {
5-
console.log(currentItem);
4+
const SpecsCmp = ({ currentItem, addItemsToCart }) => {
5+
const [totalItem, setTotalItem] = useState(0);
66
if (currentItem.length === 0) return null;
77
return (
88
<div className="py-5 px-6">
@@ -45,7 +45,12 @@ const SpecsCmp = ({ currentItem }) => {
4545
</h2>
4646
</div>
4747
<div className="py-3">
48-
<button className="px-10 py-2 hover:bg-gray-900 hover:text-gray-100 border-gray-500 rounded-full border">
48+
<button
49+
className="px-10 py-2 hover:bg-gray-900 hover:text-gray-100 border-gray-500 rounded-full border"
50+
onClick={() => {
51+
addItemsToCart(currentItem.id);
52+
}}
53+
>
4954
Add to Cart
5055
</button>
5156
</div>

‎src/index.css

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,3 @@
22
@tailwind base;
33
@tailwind components;
44
@tailwind utilities;
5-
* {
6-
user-select: none;
7-
}

0 commit comments

Comments
 (0)