|
|
@@ -1,164 +1,209 @@
|
|
1
|
|
-import { useState, useEffect } from 'react';
|
|
2
|
|
-import Grid from '@mui/material/Grid2';
|
|
3
|
|
-import { Box, Button, TextField, InputAdornment, Typography, Card, CardContent, CardMedia } from '@mui/material';
|
|
4
|
|
-import { useSelector } from 'react-redux';
|
|
|
1
|
+import { useState, useEffect } from "react";
|
|
|
2
|
+import Grid from "@mui/material/Grid2";
|
|
|
3
|
+import {
|
|
|
4
|
+ Box,
|
|
|
5
|
+ Button,
|
|
|
6
|
+ TextField,
|
|
|
7
|
+ InputAdornment,
|
|
|
8
|
+ Typography,
|
|
|
9
|
+ Card,
|
|
|
10
|
+ CardContent,
|
|
|
11
|
+ CardMedia,
|
|
|
12
|
+} from "@mui/material";
|
|
|
13
|
+import { useSelector } from "react-redux";
|
|
5
|
14
|
|
|
6
|
15
|
const SearchProduct = ({ onClose }) => {
|
|
|
16
|
+ const products = useSelector((state) => state.products.products.data);
|
|
|
17
|
+ const [searchedProducts, setSearchedProducts] = useState([]);
|
|
|
18
|
+ const [searchQuery, setSearchQuery] = useState("");
|
|
7
|
19
|
|
|
8
|
|
- const products = useSelector((state) => state.products.products.data)
|
|
9
|
|
- const [searchedProducts, setSearchedProducts] = useState([]);
|
|
10
|
|
- const [searchQuery, setSearchQuery] = useState('');
|
|
|
20
|
+ const filterProduct = function () {
|
|
|
21
|
+ let filteredProducts = products.filter((product) => {
|
|
|
22
|
+ let title = product?.title?.toLowerCase();
|
|
|
23
|
+ let search = searchQuery.toLowerCase();
|
|
|
24
|
+ return title?.includes(search);
|
|
|
25
|
+ });
|
|
11
|
26
|
|
|
12
|
|
- const filterProduct = function () {
|
|
|
27
|
+ // MAX show result
|
|
|
28
|
+ filteredProducts = filteredProducts?.slice(0, 5);
|
|
|
29
|
+ setSearchedProducts(filteredProducts);
|
|
|
30
|
+ };
|
|
13
|
31
|
|
|
14
|
|
- let filteredProducts = products.filter((product) => {
|
|
|
32
|
+ return (
|
|
|
33
|
+ <Box
|
|
|
34
|
+ className="animate__animated animate__fadeIn"
|
|
|
35
|
+ sx={{
|
|
|
36
|
+ position: "fixed",
|
|
|
37
|
+ width: "100%",
|
|
|
38
|
+ height: "100%",
|
|
|
39
|
+ backgroundColor: "rgba(255,255,255,0.8)",
|
|
|
40
|
+ top: 0,
|
|
|
41
|
+ left: 0,
|
|
|
42
|
+ py: 2,
|
|
|
43
|
+ zIndex: 999,
|
|
|
44
|
+ backdropFilter: "blur(10px)",
|
|
|
45
|
+ display: "flex",
|
|
|
46
|
+ flexDirection: "column",
|
|
|
47
|
+ alignItems: "center",
|
|
|
48
|
+ }}
|
|
|
49
|
+ >
|
|
|
50
|
+ {/* Search Box */}
|
|
|
51
|
+ <Box
|
|
|
52
|
+ sx={{
|
|
|
53
|
+ backgroundColor: "rgba(0,0,0,0)",
|
|
|
54
|
+ borderRadius: 2,
|
|
|
55
|
+ padding: 2,
|
|
|
56
|
+ width: "90%",
|
|
|
57
|
+ marginBottom: 4,
|
|
|
58
|
+ }}
|
|
|
59
|
+ >
|
|
|
60
|
+ <Grid container spacing={2}>
|
|
|
61
|
+ <Grid size={12}>
|
|
|
62
|
+ <TextField
|
|
|
63
|
+ fullWidth
|
|
|
64
|
+ placeholder="Search for a product..."
|
|
|
65
|
+ variant="outlined"
|
|
|
66
|
+ value={searchQuery}
|
|
|
67
|
+ onChange={(e) => {
|
|
|
68
|
+ setSearchQuery(e.target.value);
|
|
|
69
|
+ if (!searchQuery || searchQuery.trim() === "") {
|
|
|
70
|
+ setSearchedProducts([]);
|
|
|
71
|
+ } else {
|
|
|
72
|
+ filterProduct();
|
|
|
73
|
+ }
|
|
|
74
|
+ }}
|
|
|
75
|
+ InputProps={{
|
|
|
76
|
+ endAdornment: (
|
|
|
77
|
+ <InputAdornment position="end">
|
|
|
78
|
+ <Button
|
|
|
79
|
+ variant="contained"
|
|
|
80
|
+ color="primary"
|
|
|
81
|
+ sx={{ height: "100%" }}
|
|
|
82
|
+ onClick={onClose}
|
|
|
83
|
+ >
|
|
|
84
|
+ Cancel
|
|
|
85
|
+ </Button>
|
|
|
86
|
+ </InputAdornment>
|
|
|
87
|
+ ),
|
|
|
88
|
+ }}
|
|
|
89
|
+ />
|
|
|
90
|
+ </Grid>
|
|
|
91
|
+ </Grid>
|
|
|
92
|
+ </Box>
|
|
15
|
93
|
|
|
16
|
|
- let title = product?.title?.toLowerCase();
|
|
17
|
|
- let search = searchQuery.toLowerCase();
|
|
18
|
|
- return title?.includes(search)
|
|
19
|
|
- })
|
|
|
94
|
+ {/* Product List */}
|
|
|
95
|
+ <Grid container sx={{ width: "100%" }} columns={12}>
|
|
|
96
|
+ {searchedProducts.length > 0 ? (
|
|
|
97
|
+ searchedProducts.map((product) => {
|
|
20
|
98
|
|
|
21
|
|
- // MAX show result
|
|
22
|
|
- filteredProducts = filteredProducts?.slice(0, 6);
|
|
23
|
|
-
|
|
24
|
|
- setSearchedProducts(filteredProducts)
|
|
25
|
|
-
|
|
26
|
|
- }
|
|
27
|
|
-
|
|
28
|
|
- return (
|
|
29
|
|
- <Box
|
|
30
|
|
- className="animate__animated animate__fadeIn"
|
|
31
|
|
- sx={{
|
|
32
|
|
- position: 'fixed',
|
|
33
|
|
- width: '100%',
|
|
34
|
|
- height: '100%',
|
|
35
|
|
- backgroundColor: 'rgba(255,255,255,0.8)',
|
|
36
|
|
- top: 0,
|
|
37
|
|
- left: 0,
|
|
38
|
|
- py: 2,
|
|
39
|
|
- zIndex: 999,
|
|
40
|
|
- backdropFilter: 'blur(10px)',
|
|
41
|
|
- display: 'flex',
|
|
42
|
|
- flexDirection: 'column',
|
|
43
|
|
- alignItems: 'center',
|
|
44
|
|
- }}
|
|
45
|
|
- >
|
|
46
|
|
- {/* Search Box */}
|
|
47
|
|
- <Box
|
|
48
|
|
- sx={{
|
|
49
|
|
- backgroundColor: 'rgba(0,0,0,0)',
|
|
50
|
|
- borderRadius: 2,
|
|
51
|
|
- padding: 2,
|
|
52
|
|
- width: '90%',
|
|
53
|
|
- marginBottom: 4,
|
|
54
|
|
- }}
|
|
55
|
|
- >
|
|
56
|
|
- <Grid container spacing={2}>
|
|
57
|
|
- <Grid size={12}>
|
|
58
|
|
- <TextField
|
|
59
|
|
- fullWidth
|
|
60
|
|
- placeholder="Search for a product..."
|
|
61
|
|
- variant="outlined"
|
|
62
|
|
- value={searchQuery}
|
|
63
|
|
- onChange={(e) => {
|
|
64
|
|
- setSearchQuery(e.target.value)
|
|
65
|
|
- if ((!searchQuery || searchQuery.trim() === "")) {
|
|
66
|
|
- setSearchedProducts([])
|
|
67
|
|
- } else {
|
|
68
|
|
- filterProduct()
|
|
69
|
|
- }
|
|
70
|
|
- }}
|
|
71
|
|
- InputProps={{
|
|
72
|
|
- endAdornment: (
|
|
73
|
|
- <InputAdornment position="end">
|
|
74
|
|
- <Button
|
|
75
|
|
- variant="contained"
|
|
76
|
|
- color="primary"
|
|
77
|
|
- sx={{ height: '100%' }}
|
|
78
|
|
- onClick={onClose}
|
|
79
|
|
- >
|
|
80
|
|
- Cancel
|
|
81
|
|
- </Button>
|
|
82
|
|
- </InputAdornment>
|
|
83
|
|
- ),
|
|
84
|
|
- }}
|
|
85
|
|
- />
|
|
86
|
|
- </Grid>
|
|
87
|
|
- </Grid>
|
|
88
|
|
- </Box>
|
|
|
99
|
+ return (
|
|
|
100
|
+ <Grid
|
|
|
101
|
+ className="animate__animated animate__fadeIn"
|
|
|
102
|
+ item
|
|
|
103
|
+ size={12}
|
|
|
104
|
+ >
|
|
|
105
|
+ <Card
|
|
|
106
|
+ key={product.id}
|
|
|
107
|
+ sx={{
|
|
|
108
|
+ display: "flex",
|
|
|
109
|
+ alignItems: "center",
|
|
|
110
|
+ py: 2,
|
|
|
111
|
+ px: 2,
|
|
|
112
|
+ width: "100%",
|
|
|
113
|
+ cursor: "pointer",
|
|
|
114
|
+ backgroundColor: "rgba(255,255,255,0.2)",
|
|
|
115
|
+ boxShadow: "none",
|
|
|
116
|
+ borderBottom: "1px solid rgba(0,0,0,0.2)",
|
|
|
117
|
+ transition: "all 0.3s ease-in-out",
|
|
|
118
|
+ ":hover": {
|
|
|
119
|
+ backgroundColor: "#95AAC5",
|
|
|
120
|
+ },
|
|
|
121
|
+ }}
|
|
|
122
|
+ onClick={() => {
|
|
|
123
|
+ window.location.href = `/products/${product?.handle}`;
|
|
|
124
|
+ }}
|
|
|
125
|
+ >
|
|
|
126
|
+ <CardMedia
|
|
|
127
|
+ component="img"
|
|
|
128
|
+ sx={{
|
|
|
129
|
+ width: 100,
|
|
|
130
|
+ height: 100,
|
|
|
131
|
+ borderRadius: 1,
|
|
|
132
|
+ marginRight: 2,
|
|
|
133
|
+ }}
|
|
|
134
|
+ image={product?.images[0]?.url}
|
|
|
135
|
+ alt={product?.title}
|
|
|
136
|
+ />
|
|
|
137
|
+ <CardContent>
|
|
|
138
|
+ <Typography
|
|
|
139
|
+ variant="body2"
|
|
|
140
|
+ sx={{
|
|
|
141
|
+ fontWeight: "100",
|
|
|
142
|
+ fontSize: {
|
|
|
143
|
+ xs: "0.875rem",
|
|
|
144
|
+ sm: "0.875rem",
|
|
|
145
|
+ md: "1.1rem",
|
|
|
146
|
+ },
|
|
|
147
|
+ }}
|
|
|
148
|
+ >
|
|
|
149
|
+ {`${product?.collections[0]?.title}`}
|
|
|
150
|
+ </Typography>
|
|
|
151
|
+ <Typography
|
|
|
152
|
+ variant="body2"
|
|
|
153
|
+ sx={{
|
|
|
154
|
+ fontWeight: "400",
|
|
|
155
|
+ fontSize: {
|
|
|
156
|
+ xs: "0.875rem",
|
|
|
157
|
+ sm: "0.875rem",
|
|
|
158
|
+ md: "1.1rem",
|
|
|
159
|
+ },
|
|
|
160
|
+ }}
|
|
|
161
|
+ >
|
|
|
162
|
+ {product?.title}
|
|
|
163
|
+ </Typography>
|
|
|
164
|
+
|
|
|
165
|
+ <Typography
|
|
|
166
|
+ variant="body2"
|
|
|
167
|
+ sx={{
|
|
|
168
|
+ fontWeight: "400",
|
|
|
169
|
+ fontSize: {
|
|
|
170
|
+ xs: "0.875rem",
|
|
|
171
|
+ sm: "0.875rem",
|
|
|
172
|
+ md: "1.1rem",
|
|
|
173
|
+ },
|
|
|
174
|
+ }}
|
|
|
175
|
+ >
|
|
|
176
|
+ {"Tags: "} {product?.tags?.map((tag) => <span>{`${tag} | `}</span> )}
|
|
|
177
|
+ </Typography>
|
|
89
|
178
|
|
|
90
|
|
- {/* Product List */}
|
|
91
|
|
- <Grid
|
|
92
|
|
- container
|
|
93
|
|
- columns={12}
|
|
94
|
|
- >
|
|
95
|
|
- {searchedProducts.length > 0 ? (
|
|
96
|
|
- searchedProducts.map((product) => (
|
|
97
|
|
- <Grid className="animate__animated animate__fadeIn" item size={12}>
|
|
98
|
|
- <Card
|
|
99
|
|
- key={product.id}
|
|
100
|
|
- sx={{
|
|
101
|
|
- display: 'flex',
|
|
102
|
|
- alignItems: 'center',
|
|
103
|
|
- py: 2,
|
|
104
|
|
- px: 12.5,
|
|
105
|
|
- cursor: "pointer",
|
|
106
|
|
- backgroundColor: "rgba(255,255,255,0.2)",
|
|
107
|
|
- boxShadow: "none",
|
|
108
|
|
- borderBottom: "1px solid rgba(0,0,0,0.2)",
|
|
109
|
|
- transition: "all 0.3s ease-in-out",
|
|
110
|
|
- ":hover": {
|
|
111
|
|
- backgroundColor: "#95AAC5"
|
|
112
|
|
- }
|
|
113
|
|
- }}
|
|
114
|
|
- onClick={() => {
|
|
115
|
|
- window.location.href = `/products/${product?.handle}`
|
|
116
|
|
- }}
|
|
117
|
|
- >
|
|
118
|
|
- <CardMedia
|
|
119
|
|
- component="img"
|
|
120
|
|
- sx={{ width: 100, height: 100, borderRadius: 1, marginRight: 2 }}
|
|
121
|
|
- image={product?.images[0]?.url}
|
|
122
|
|
- alt={product?.title}
|
|
123
|
|
- />
|
|
124
|
|
- <CardContent>
|
|
125
|
|
- <Typography variant="body2" sx={{
|
|
126
|
|
- fontWeight: "100", fontSize: {
|
|
127
|
|
- xs: "0.875rem",
|
|
128
|
|
- sm: "0.875rem",
|
|
129
|
|
- md: "1.1rem",
|
|
130
|
|
- }
|
|
131
|
|
- }}>
|
|
132
|
|
- {`${product?.collections[0]?.title}`}
|
|
133
|
|
- </Typography>
|
|
134
|
|
- <Typography variant="body2" sx={{
|
|
135
|
|
- fontWeight: "400", fontSize: {
|
|
136
|
|
- xs: "0.875rem",
|
|
137
|
|
- sm: "0.875rem",
|
|
138
|
|
- md: "1.1rem",
|
|
139
|
|
- },
|
|
140
|
|
- }}>{product?.title}</Typography>
|
|
141
|
|
- <Typography variant="body2" sx={{
|
|
142
|
|
- fontWeight: "100", fontSize: {
|
|
143
|
|
- xs: "0.875rem",
|
|
144
|
|
- sm: "0.875rem",
|
|
145
|
|
- md: "1.1rem",
|
|
146
|
|
- }
|
|
147
|
|
- }}>
|
|
148
|
|
- {`${product?.minVariantPrice?.currencyCode} ${parseFloat(product?.minVariantPrice?.amount).toFixed(2)}`}
|
|
149
|
|
- </Typography>
|
|
150
|
|
- </CardContent>
|
|
151
|
|
- </Card>
|
|
152
|
|
- </Grid>
|
|
153
|
|
- ))
|
|
154
|
|
- ) : (
|
|
155
|
|
- <Typography variant="body1" color="text.secondary">
|
|
156
|
|
- No products found. Please search
|
|
|
179
|
+ <Typography
|
|
|
180
|
+ variant="body2"
|
|
|
181
|
+ sx={{
|
|
|
182
|
+ fontWeight: "100",
|
|
|
183
|
+ fontSize: {
|
|
|
184
|
+ xs: "0.875rem",
|
|
|
185
|
+ sm: "0.875rem",
|
|
|
186
|
+ md: "1.1rem",
|
|
|
187
|
+ },
|
|
|
188
|
+ }}
|
|
|
189
|
+ >
|
|
|
190
|
+ {`${product?.minVariantPrice?.currencyCode} ${parseFloat(
|
|
|
191
|
+ product?.minVariantPrice?.amount
|
|
|
192
|
+ ).toFixed(2)}`}
|
|
157
|
193
|
</Typography>
|
|
158
|
|
- )}
|
|
159
|
|
- </Grid>
|
|
160
|
|
- </Box>
|
|
161
|
|
- );
|
|
|
194
|
+ </CardContent>
|
|
|
195
|
+ </Card>
|
|
|
196
|
+ </Grid>
|
|
|
197
|
+ );
|
|
|
198
|
+ })
|
|
|
199
|
+ ) : (
|
|
|
200
|
+ <Typography variant="body1" color="text.secondary" sx={{px:2}}>
|
|
|
201
|
+ No products found. Please search
|
|
|
202
|
+ </Typography>
|
|
|
203
|
+ )}
|
|
|
204
|
+ </Grid>
|
|
|
205
|
+ </Box>
|
|
|
206
|
+ );
|
|
162
|
207
|
};
|
|
163
|
208
|
|
|
164
|
209
|
export default SearchProduct;
|
