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 f58a08e

Browse files
author
followDev
committed
Merge pull request #24 from lucaspulliese/dev
Dev
2 parents 4027e31 + bbc4b3a commit f58a08e

File tree

69 files changed

+3106
-3946
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+3106
-3946
lines changed

‎.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
NEXT_PUBLIC_ANALYTICS_ID=UA-114361661-6

‎README.md‎

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
1-
# Next.js Ecommerce
2-
3-
This repo contains a work in progress Ecommerce responsive made with Next.js, Redux, Redux-persist, Hooks, SCSS and BEM. If you like it please give it a star :)
4-
## Design
5-
6-
[This](https://www.xdguru.com/free-xd-ecommerce-ui-kit-by-iceo/) is the design of the project.
7-
8-
## Available pages
9-
10-
- Home page: /
11-
- Products page: /products
12-
- Product single page: /product/1
13-
- Cart page: /cart
14-
- Login page: /login
15-
- Register page: /register
16-
- 404 page: /page-not-found
17-
18-
## Screenshots
19-
20-
![Next Ecommerce screenshot](https://lucaspulliese.com/wp-content/uploads/2020/09/ecommerce-1.jpg)
21-
22-
![Next Ecommerce screenshot](https://lucaspulliese.com/wp-content/uploads/2020/09/ecommerce-2.jpg)
23-
24-
## Next TO-DO
25-
26-
- [ ] Checkout page
27-
- [ ] Add Facebook login
28-
- [ ] Add Google login
29-
- [ ] Add Proptypes on components
1+
# Updates!
2+
3+
This new version contains an integration with redux-toolkit instead of redux and it's witch Typescript :)
4+
5+
# Next.js Ecommerce
6+
7+
This repo contains a work in progress Ecommerce responsive made with Next.js, Redux, Redux-persist, Hooks, SCSS and BEM. If you like it please give it a star :)
8+
## Design
9+
10+
[This](https://www.xdguru.com/free-xd-ecommerce-ui-kit-by-iceo/) is the design of the project.
11+
12+
## Available pages
13+
14+
- Home page: /
15+
- Products page: /products
16+
- Product single page: /product/1
17+
- Cart page: /cart
18+
- Login page: /login
19+
- Register page: /register
20+
- 404 page: /page-not-found
21+
22+
## Screenshots
23+
24+
![Next Ecommerce screenshot](https://lucaspulliese.com/wp-content/uploads/2020/09/ecommerce-1.jpg)
25+
26+
![Next Ecommerce screenshot](https://lucaspulliese.com/wp-content/uploads/2020/09/ecommerce-2.jpg)
27+
28+
## Next TO-DO
29+
30+
- [X] Checkout page
31+
- [ ] Add Facebook login
32+
- [ ] Add Google login
33+
- [ ] Add Proptypes on components
3034
- [ ] Use CSS variables instead of static colors

‎assets/css/main.scss‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1750,7 +1750,7 @@ h1,h2,h3,h4,h5 {
17501750
.reviews-list {
17511751
width: 100%;
17521752
margin-left: auto;
1753-
@include breakpoint(phone) {
1753+
@include breakpoint(tablet-lg) {
17541754
width: 48%;
17551755
}
17561756
}
@@ -1957,6 +1957,11 @@ h1,h2,h3,h4,h5 {
19571957
&.is-active {
19581958
color: var(--color-orange);
19591959
}
1960+
&.is-active-half {
1961+
&:before {
1962+
color: var(--color-orange);
1963+
}
1964+
}
19601965
}
19611966
}
19621967
}
@@ -1978,9 +1983,11 @@ h1,h2,h3,h4,h5 {
19781983
@include breakpoint(phone) {
19791984
display: flex;
19801985
justify-content: center;
1981-
margin-bottom: 0;
19821986
flex-wrap: wrap;
19831987
}
1988+
@include breakpoint(tablet-lg) {
1989+
width: 52%;
1990+
}
19841991
.product-punctuation__values {
19851992
text-align: center;
19861993
margin-bottom: 25px;
@@ -2001,12 +2008,17 @@ h1,h2,h3,h4,h5 {
20012008
&.is-active {
20022009
color: var(--color-orange);
20032010
}
2011+
&.is-active-half {
2012+
&:before {
2013+
color: var(--color-orange);
2014+
}
2015+
}
20042016
}
20052017
}
20062018
}
20072019
.product-punctuation__rates {
2020+
width: 200px;
20082021
@include breakpoint(phone) {
2009-
width: 200px;
20102022
margin-left: 68px;
20112023
}
20122024
}
@@ -2029,6 +2041,11 @@ h1,h2,h3,h4,h5 {
20292041
&.is-active {
20302042
color: var(--color-orange);
20312043
}
2044+
&.is-active-half {
2045+
&:before {
2046+
color: var(--color-orange);
2047+
}
2048+
}
20322049
}
20332050
}
20342051
> span {
Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
const Breadcrumb = () => (
2-
<section className="breadcrumb">
3-
<div className="container">
4-
<ul className="breadcrumb-list">
5-
<li><a href="#"><i className="icon-home"></i></a></li>
6-
<li>All Products</li>
7-
</ul>
8-
</div>
9-
</section>
10-
);
11-
12-
1+
const Breadcrumb = () => (
2+
<section className="breadcrumb">
3+
<div className="container">
4+
<ul className="breadcrumb-list">
5+
<li><a href="#"><i className="icon-home"></i></a></li>
6+
<li>All Products</li>
7+
</ul>
8+
</div>
9+
</section>
10+
);
11+
12+
1313
export default Breadcrumb
Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1-
const CheckoutStatus = ({ step }) => {
2-
return (
3-
<div className="checkout-status">
4-
<ul className="checkout-steps">
5-
<li className={`${step === 'cart' ? 'active' : 'done'}`}><i className="icon-cart"></i></li>
6-
<li className={`${step === 'checkout' ? 'active' : 'done'}`}><i className="icon-delivery"></i></li>
7-
</ul>
8-
</div>
9-
)
10-
};
11-
12-
1+
type CheckoutStatusProps = {
2+
step: string;
3+
}
4+
5+
const CheckoutStatus = ({ step }: CheckoutStatusProps) => {
6+
return (
7+
<div className="checkout-status">
8+
<ul className="checkout-steps">
9+
<li className={`${step === 'cart' ? 'active' : 'done'}`}><i className="icon-cart"></i></li>
10+
<li className={`${step === 'checkout' ? 'active' : 'done'}`}><i className="icon-delivery"></i></li>
11+
</ul>
12+
</div>
13+
)
14+
};
15+
16+
1317
export default CheckoutStatus
Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import { useSelector } from 'react-redux';
2-
3-
const CheckoutItems = () => {
4-
const { cartItems } = useSelector(state => state.cart);
5-
6-
return (
7-
<ul className="checkout-items">
8-
{cartItems.map(item => (
9-
<li className="checkout-item">
10-
<div className="checkout-item__content">
11-
<div className="checkout-item__img">
12-
<img src={item.thumb} />
13-
</div>
14-
15-
<div className="checkout-item__data">
16-
<h3>{item.name}</h3>
17-
<span>#{item.id}</span>
18-
</div>
19-
</div>
20-
<h3>${item.price}</h3>
21-
</li>
22-
))}
23-
</ul>
24-
)
25-
};
26-
27-
1+
import { useSelector } from 'react-redux';
2+
3+
const CheckoutItems = () => {
4+
const { cartItems } = useSelector(state => state.cart);
5+
6+
return (
7+
<ul className="checkout-items">
8+
{cartItems.map(item => (
9+
<li className="checkout-item">
10+
<div className="checkout-item__content">
11+
<div className="checkout-item__img">
12+
<img src={item.thumb} />
13+
</div>
14+
15+
<div className="checkout-item__data">
16+
<h3>{item.name}</h3>
17+
<span>#{item.id}</span>
18+
</div>
19+
</div>
20+
<h3>${item.price}</h3>
21+
</li>
22+
))}
23+
</ul>
24+
)
25+
};
26+
27+
2828
export default CheckoutItems
Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,57 @@
1-
import Logo from '../../assets/icons/logo';
2-
3-
const Footer = () => {
4-
return (
5-
<footer className="site-footer">
6-
<div className="container">
7-
<div className="site-footer__top">
8-
<div className="site-footer__description">
9-
<h6><Logo /> <span>E</span>-Shop</h6>
10-
<p>House My Brand designs clothing for the young, the old & everyone in between – but most
11-
importantly, for the fashionable</p>
12-
<ul className="site-footer__social-networks">
13-
<li><a href="#"><i className="icon-facebook"></i></a></li>
14-
<li><a href="#"><i className="icon-twitter"></i></a></li>
15-
<li><a href="#"><i className="icon-linkedin"></i></a></li>
16-
<li><a href="#"><i className="icon-instagram"></i></a></li>
17-
<li><a href="#"><i className="icon-youtube-play"></i></a></li>
18-
</ul>
19-
</div>
20-
21-
<div className="site-footer__links">
22-
<ul>
23-
<li>Shopping online</li>
24-
<li><a href="#">Order Status</a></li>
25-
<li><a href="#">Shipping and Delivery</a></li>
26-
<li><a href="#">Returns</a></li>
27-
<li><a href="#">Payment options</a></li>
28-
<li><a href="#">Contact Us</a></li>
29-
</ul>
30-
<ul>
31-
<li>Information</li>
32-
<li><a href="#">Gift Cards</a></li>
33-
<li><a href="#">Find a store</a></li>
34-
<li><a href="#">Newsletter</a></li>
35-
<li><a href="#">Bacome a member</a></li>
36-
<li><a href="#">Site feedback</a></li>
37-
</ul>
38-
<ul>
39-
<li>Contact</li>
40-
<li><a href="#">store@uikit.com</a></li>
41-
<li><a href="#">Hotline: +1 131 138 138</a></li>
42-
</ul>
43-
</div>
44-
</div>
45-
</div>
46-
47-
<div className="site-footer__bottom">
48-
<div className="container">
49-
<p>DESIGN BY ICEO.CO - © 2019. ALL RIGHTS RESERVED.</p>
50-
</div>
51-
</div>
52-
</footer>
53-
)
54-
};
55-
56-
1+
import Logo from '../../assets/icons/logo';
2+
3+
const Footer = () => {
4+
return (
5+
<footer className="site-footer">
6+
<div className="container">
7+
<div className="site-footer__top">
8+
<div className="site-footer__description">
9+
<h6><Logo /> <span>E</span>-Shop</h6>
10+
<p>House My Brand designs clothing for the young, the old & everyone in between – but most
11+
importantly, for the fashionable</p>
12+
<ul className="site-footer__social-networks">
13+
<li><a href="#"><i className="icon-facebook"></i></a></li>
14+
<li><a href="#"><i className="icon-twitter"></i></a></li>
15+
<li><a href="#"><i className="icon-linkedin"></i></a></li>
16+
<li><a href="#"><i className="icon-instagram"></i></a></li>
17+
<li><a href="#"><i className="icon-youtube-play"></i></a></li>
18+
</ul>
19+
</div>
20+
21+
<div className="site-footer__links">
22+
<ul>
23+
<li>Shopping online</li>
24+
<li><a href="#">Order Status</a></li>
25+
<li><a href="#">Shipping and Delivery</a></li>
26+
<li><a href="#">Returns</a></li>
27+
<li><a href="#">Payment options</a></li>
28+
<li><a href="#">Contact Us</a></li>
29+
</ul>
30+
<ul>
31+
<li>Information</li>
32+
<li><a href="#">Gift Cards</a></li>
33+
<li><a href="#">Find a store</a></li>
34+
<li><a href="#">Newsletter</a></li>
35+
<li><a href="#">Bacome a member</a></li>
36+
<li><a href="#">Site feedback</a></li>
37+
</ul>
38+
<ul>
39+
<li>Contact</li>
40+
<li><a href="#">store@uikit.com</a></li>
41+
<li><a href="#">Hotline: +1 131 138 138</a></li>
42+
</ul>
43+
</div>
44+
</div>
45+
</div>
46+
47+
<div className="site-footer__bottom">
48+
<div className="container">
49+
<p>DESIGN BY ICEO.CO - © 2019. ALL RIGHTS RESERVED.</p>
50+
</div>
51+
</div>
52+
</footer>
53+
)
54+
};
55+
56+
5757
export default Footer

‎components/Header/index.js‎ renamed to ‎components/header/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,15 @@ import useOnClickOutside from 'use-onclickoutside';
44
import Logo from '../../assets/icons/logo';
55
import Link from 'next/link';
66
import { useRouter } from 'next/router';
7+
import { RootState } from 'store';
78

8-
const Header = ({ isErrorPage }) => {
9+
type HeaderType = {
10+
isErrorPage?: Boolean;
11+
}
12+
13+
const Header = ({ isErrorPage }: HeaderType) => {
914
const router = useRouter();
10-
const { cartItems } = useSelector(state => state.cart);
15+
const { cartItems } = useSelector((state: RootState) => state.cart);
1116
const arrayPaths = ['/'];
1217

1318
const [onTop, setOnTop] = useState(( !arrayPaths.includes(router.pathname) || isErrorPage ) ? false : true);

0 commit comments

Comments
(0)

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