Skip to content

Commit 06fcc97

Browse files
author
codingphase
committed
added cart popup component
1 parent 951e1ca commit 06fcc97

File tree

10 files changed

+324
-131
lines changed

10 files changed

+324
-131
lines changed

‎public/css/styles.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/dist/CartBtn.js

Lines changed: 33 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/dist/CartPopup.js

Lines changed: 138 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/dist/vendors~CartBtn.js renamed to ‎public/js/dist/vendors.js

Lines changed: 1 addition & 32 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/assets/js/CartBtn.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react';
22
import ReactDOM from 'react-dom';
33

4-
class Layout extends Component {
4+
class CartBtn extends Component {
55
constructor() {
66
super();
77
this.state = {
@@ -19,6 +19,6 @@ class Layout extends Component {
1919
}
2020
}
2121

22-
const cartBtn = document.getElementById('cartBtn');
22+
const CartBtnRoot = document.getElementById('CartBtnRoot');
2323

24-
ReactDOM.render(<Layout />, cartBtn);
24+
ReactDOM.render(<CartBtn />, CartBtnRoot);

‎resources/assets/js/CartPopup.js

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React, { Component } from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
class CartPopup extends Component {
5+
constructor() {
6+
super();
7+
this.state = {
8+
name: 'Joe'
9+
};
10+
}
11+
clickedBtn = () => {};
12+
async test() {}
13+
render() {
14+
return (
15+
<section id="cart-popup" className="active">
16+
<div className="cart-title">
17+
<div className="title">My Cart</div>
18+
</div>
19+
<div className="cart-items">
20+
<div className="item-container">
21+
<div className="item">
22+
<img src="/img/products/adidas-yeezy-boost-350-white.png" />
23+
<div className="delete-btn">
24+
<div className="circle">X</div>
25+
</div>
26+
</div>
27+
</div>
28+
<div className="item-container">
29+
<div className="item">
30+
<img src="/img/products/adidas-yeezy-boost-350-white.png" />
31+
<div className="delete-btn">
32+
<div className="circle">X</div>
33+
</div>
34+
</div>
35+
</div>
36+
<div className="item-container">
37+
<div className="item">
38+
<img src="/img/products/adidas-yeezy-boost-350-white.png" />
39+
<div className="delete-btn">
40+
<div className="circle">X</div>
41+
</div>
42+
</div>
43+
</div>
44+
<div className="item-container">
45+
<div className="item">
46+
<img src="/img/products/adidas-yeezy-boost-350-white.png" />
47+
<div className="delete-btn">
48+
<div className="circle">X</div>
49+
</div>
50+
</div>
51+
</div>
52+
<div className="item-container">
53+
<div className="item">
54+
<img src="/img/products/adidas-yeezy-boost-350-white.png" />
55+
<div className="delete-btn">
56+
<div className="circle">X</div>
57+
</div>
58+
</div>
59+
</div>
60+
<div className="item-container">
61+
<div className="item">
62+
<img src="/img/products/adidas-yeezy-boost-350-white.png" />
63+
<div className="delete-btn">
64+
<div className="circle">X</div>
65+
</div>
66+
</div>
67+
</div>
68+
<div className="item-container">
69+
<div className="item">
70+
<img src="/img/products/adidas-yeezy-boost-350-white.png" />
71+
<div className="delete-btn">
72+
<div className="circle">X</div>
73+
</div>
74+
</div>
75+
</div>
76+
<div className="item-container">
77+
<div className="item">
78+
<img src="/img/products/adidas-yeezy-boost-350-white.png" />
79+
<div className="delete-btn">
80+
<div className="circle">X</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
<div className="product-total">
86+
<div className="inside-container">
87+
<div className="title">Total</div>
88+
<div className="number"> x4</div>
89+
</div>
90+
</div>
91+
<div className="price-total">
92+
<div className="inside-container">
93+
<div className="title">Total</div>
94+
<div className="number"> $3,000</div>
95+
</div>
96+
</div>
97+
<div className="checkout">
98+
<div className="title">Checkout</div>
99+
<span className="ti-shopping-cart" />
100+
</div>
101+
</section>
102+
);
103+
}
104+
}
105+
106+
const CartPopupRoot = document.getElementById('CartPopupRoot');
107+
108+
ReactDOM.render(<CartPopup />, CartPopupRoot);

‎resources/assets/js/CartProvider.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { Component } from 'react';
2+
export const CartContext = React.createContext();
3+
export class CartProvider extends Component {
4+
state = {
5+
name: 'Joe',
6+
popupActive: true
7+
};
8+
render() {
9+
return (
10+
<CartContext.Provider
11+
value={{
12+
state: this.state,
13+
clickedBtn: event => {
14+
event.preventDefault();
15+
console.log('this.state');
16+
this.setState({ popupActive: !this.state.popupActive }, () =>
17+
console.log(this.state)
18+
);
19+
}
20+
}}
21+
>
22+
{this.props.children}
23+
</CartContext.Provider>
24+
);
25+
}
26+
}

‎resources/assets/scss/styles.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ header{
4545
font-size: 1rem;
4646
text-transform: uppercase;
4747
padding: 20px 0;
48-
#cartBtn{
48+
#CartBtnRoot{
4949
display: inline-block;
5050
}
5151
a{

‎resources/views/layouts/main.edge

Lines changed: 4 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -17,107 +17,22 @@
1717
<a href="/about">About</a>
1818
<a href="/products/new-arrivals">New Arrival</a>
1919
<a href="/products">All Products</a>
20-
<div href="#" id="cartBtn">Cart<div>4</div></div>
20+
<div href="#" id="CartBtnRoot">Cart<div>4</div></div>
2121
</div>
2222
</header>
2323

2424
@!section('content')
2525

26-
<section id="cart-popup" class="">
27-
<div class="cart-title">
28-
<div class="title">My Cart</div>
29-
</div>
30-
<div class="cart-items">
31-
<div class="item-container">
32-
<div class="item">
33-
<img src="/img/products/adidas-yeezy-boost-350-white.png">
34-
<div class="delete-btn">
35-
<div class="circle">X</div>
36-
</div>
37-
</div>
38-
</div>
39-
<div class="item-container">
40-
<div class="item">
41-
<img src="/img/products/adidas-yeezy-boost-350-white.png">
42-
<div class="delete-btn">
43-
<div class="circle">X</div>
44-
</div>
45-
</div>
46-
</div>
47-
<div class="item-container">
48-
<div class="item">
49-
<img src="/img/products/adidas-yeezy-boost-350-white.png">
50-
<div class="delete-btn">
51-
<div class="circle">X</div>
52-
</div>
53-
</div>
54-
</div>
55-
<div class="item-container">
56-
<div class="item">
57-
<img src="/img/products/adidas-yeezy-boost-350-white.png">
58-
<div class="delete-btn">
59-
<div class="circle">X</div>
60-
</div>
61-
</div>
62-
</div>
63-
<div class="item-container">
64-
<div class="item">
65-
<img src="/img/products/adidas-yeezy-boost-350-white.png">
66-
<div class="delete-btn">
67-
<div class="circle">X</div>
68-
</div>
69-
</div>
70-
</div>
71-
<div class="item-container">
72-
<div class="item">
73-
<img src="/img/products/adidas-yeezy-boost-350-white.png">
74-
<div class="delete-btn">
75-
<div class="circle">X</div>
76-
</div>
77-
</div>
78-
</div>
79-
<div class="item-container">
80-
<div class="item">
81-
<img src="/img/products/adidas-yeezy-boost-350-white.png">
82-
<div class="delete-btn">
83-
<div class="circle">X</div>
84-
</div>
85-
</div>
86-
</div>
87-
<div class="item-container">
88-
<div class="item">
89-
<img src="/img/products/adidas-yeezy-boost-350-white.png">
90-
<div class="delete-btn">
91-
<div class="circle">X</div>
92-
</div>
93-
</div>
94-
</div>
95-
</div>
96-
<div class="product-total">
97-
<div class="inside-container">
98-
<div class="title">Total</div>
99-
<div class="number"> x4</div>
100-
</div>
101-
</div>
102-
<div class="price-total">
103-
<div class="inside-container">
104-
<div class="title">Total</div>
105-
<div class="number"> $3,000</div>
106-
</div>
107-
</div>
108-
<div class="checkout">
109-
<div class="title">Checkout</div>
110-
<span class="ti-shopping-cart"></span>
111-
</div>
112-
</section>
26+
<div id="CartPopupRoot"></div>
11327

11428

11529

11630

11731

11832

11933
@!section('javascript')
120-
<script src="/js/dist/vendors~CartBtn.js"></script>
34+
<script src="/js/dist/vendors.js"></script>
12135
<script src="/js/dist/CartBtn.js"></script>
36+
<script src="/js/dist/CartPopup.js"></script>
12237
</body>
12338
</html>

‎webpack.config.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ compress.unused = true;
1616
module.exports = env => {
1717
return {
1818
entry: {
19-
CartBtn: './resources/assets/js/CartBtn.js'
19+
CartBtn: './resources/assets/js/CartBtn.js',
20+
CartPopup: './resources/assets/js/CartPopup.js'
2021
},
2122
output: {
2223
path: path.resolve(__dirname, 'public/js/dist'),
@@ -57,8 +58,13 @@ module.exports = env => {
5758
],
5859
optimization: {
5960
splitChunks: {
60-
chunks: 'all',
61-
minSize: 0
61+
cacheGroups: {
62+
vendor: {
63+
test: /[\\/]node_modules[\\/](react|react-dom|axios)[\\/]/,
64+
name: 'vendors',
65+
chunks: 'all'
66+
}
67+
}
6268
},
6369
minimize: true,
6470
minimizer: [

0 commit comments

Comments
 (0)