Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2adc5ee

Browse files
minor updates ecommerce product page
1 parent 9fa2175 commit 2adc5ee

File tree

6 files changed

+53
-13
lines changed

6 files changed

+53
-13
lines changed

‎src/App.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ AOS.init({
6262
<Route path='/components/multi-step-form' element={<MultiStepForm></MultiStepForm>}/>
6363
<Route path='/components/todo' element={<ToDo></ToDo>}/>
6464
<Route path='/components/static-jobs' element={<StaticJobs></StaticJobs>}/>
65+
<Route path='/components/product-page' element={<ProductPage></ProductPage>}/>
6566

6667
{/* Pages */}
6768
<Route path='/pages' element={<Pages></Pages>}/>

‎src/components/data.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@ export const componentCardData = [
88
type: "component",
99
link:"/components/multi-step-form",
1010
},
11+
{
12+
id:"18",
13+
title: "E-commerce product page",
14+
desc: "Lightbox Desktop Image Gallery & Slider Images Gallery for mobile, Functions to add items to cart. Smooth mobile Nav",
15+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_475/Challenges/fhzpdnabrek50hvhftnl.jpg",
16+
category:"intermediate",
17+
type: "component",
18+
link:"/components/product-page",
19+
},
1120
{
1221
id:"9",
1322
title: "News homepage",

‎src/components/intermediate/ProductPage/Cart.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,31 @@
1313
grid-template-rows: auto 1fr;
1414
}
1515

16-
.product-page-cart-title {
16+
.product-page-cart-top {
1717
padding: 20px;
1818
border-bottom: 0.5px solid hsl(220, 14%, 75%);
19+
display: flex;
20+
justify-content: space-between;
21+
align-items: center;
22+
}
23+
.product-page-cart-title {
1924
font-weight: 700;
2025
}
2126

27+
.product-page-cart-top > button {
28+
background-color: transparent;
29+
border: none;
30+
cursor: pointer;
31+
}
32+
33+
.product-page-cart-top > button > svg > path {
34+
transition: all 0.2s ease;
35+
}
36+
37+
.product-page-cart-top > button:hover > svg > path {
38+
fill: hsl(26, 100%, 55%);
39+
}
40+
2241
.product-page-empty-cart {
2342
display: grid;
2443
place-items: center;

‎src/components/intermediate/ProductPage/Cart.jsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,17 @@ import './Cart.css'
33
import deleteIcon from './assets/ecommerce-product-page-main/images/icon-delete.svg'
44
import {product} from './data.js'
55

6+
67
const Cart = ({cartItems, setCartItems, setShowCart}) => {
78
return (
89
<div className="product-page-cart-container">
9-
<h5 className="product-page-cart-title">Cart</h5>
10+
<div className="product-page-cart-top">
11+
<h5 className="product-page-cart-title">Cart
12+
</h5>
13+
<button onClick={()=>setShowCart(false)}>
14+
<svg width="14" height="15" xmlns="http://www.w3.org/2000/svg"><path d="m11.596.782 2.122 2.122L9.12 7.499l4.597 4.597-2.122 2.122L7 9.62l-4.595 4.597-2.122-2.122L4.878 7.5.282 2.904 2.404.782l4.595 4.596L11.596.782Z" fill="#69707D" fillRule="evenodd"/></svg>
15+
</button>
16+
</div>
1017
{
1118
cartItems === '' ?
1219

‎src/components/intermediate/ProductPage/ProductPage.jsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,15 @@ import './ProductPage.css'
55

66
const ProductPage = () => {
77

8-
const [amount, setAmount] = useState(0)
8+
const [amount, setAmount] = useState(1)
99
const [cartItems, setCartItems] = useState('')
1010

1111
return (
12-
<div className='product-page'>
12+
<div className='product-page'
13+
data-aos="fade-in"
14+
data-aos-delay="200"
15+
data-aos-duration="600"
16+
>
1317
<Nav amount={amount} cartItems={cartItems} setCartItems={setCartItems}></Nav>
1418
<Product amount={amount} setAmount={setAmount} setCartItems={setCartItems} cartItems={cartItems}></Product>
1519
</div>

‎src/pages/data.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@ export const pagesData = [
88
type: "multi",
99
link:"https://archstudios.netlify.app/",
1010
},
11+
{
12+
id:"4",
13+
title: "Planets fact site",
14+
desc: "Each planet from our solar system has a dedicated page with three subsections. Smooth Mobile Nav Menu.",
15+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_475/Challenges/wrljilk72cxhipdjyhpa.jpg",
16+
category:"junior",
17+
type: "multi",
18+
link:"/pages/planet-facts",
19+
},
1120
{
1221
id:"2",
1322
title: "Easybank landing page",
@@ -26,13 +35,4 @@ export const pagesData = [
2635
type: "multi",
2736
link:"/pages/sunnyside",
2837
},
29-
{
30-
id:"4",
31-
title: "Planets fact site",
32-
desc: "8-page Site",
33-
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_475/Challenges/wrljilk72cxhipdjyhpa.jpg",
34-
category:"junior",
35-
type: "multi",
36-
link:"/pages/planet-facts",
37-
},
3838
]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /