Browse Source

new tag

master
azri 1 week ago
parent
commit
9029ac2b96

+ 14
- 15
src/components/ProductList/ProductList.jsx View File

77
         (product) => product.productType === productType
77
         (product) => product.productType === productType
78
       );
78
       );
79
 
79
 
80
-      setTimeout(()=>{
80
+      setTimeout(() => {
81
         setFilteredProducts(newFilteredProducts)
81
         setFilteredProducts(newFilteredProducts)
82
-      },100)
82
+      }, 100)
83
 
83
 
84
       const tagList = getAllTags(newFilteredProducts);
84
       const tagList = getAllTags(newFilteredProducts);
85
       setTagFilterOption(tagList);
85
       setTagFilterOption(tagList);
144
         newFilteredProducts = newFilteredProducts.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
144
         newFilteredProducts = newFilteredProducts.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
145
       }
145
       }
146
 
146
 
147
-      
147
+
148
       setFilteredProducts([]) //cause I want those fadeIn animation
148
       setFilteredProducts([]) //cause I want those fadeIn animation
149
-      setTimeout(()=>{
149
+      setTimeout(() => {
150
         setFilteredProducts(newFilteredProducts)
150
         setFilteredProducts(newFilteredProducts)
151
-      },100)
151
+      }, 100)
152
 
152
 
153
     }
153
     }
154
 
154
 
158
     //setInput({ ...input, [event.target.name]: event.target.value });
158
     //setInput({ ...input, [event.target.name]: event.target.value });
159
   };
159
   };
160
 
160
 
161
-  const renderProduct = (handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc) => {
161
+  const renderProduct = (handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc, selected = false) => {
162
 
162
 
163
     return (
163
     return (
164
       <Grid className="animate__animated animate__fadeIn" item size={{ xs: 6, sm: 6, md: 3 }}>
164
       <Grid className="animate__animated animate__fadeIn" item size={{ xs: 6, sm: 6, md: 3 }}>
165
 
165
 
166
-        <a href={`/products/${handle}`} style={{textDecoration:"none",color:"#000"}}>
166
+        <a href={`/products/${handle}`} style={{ textDecoration: "none", color: "#000" }}>
167
           <Box
167
           <Box
168
             sx={{
168
             sx={{
169
               overflow: 'hidden',
169
               overflow: 'hidden',
183
               }}
183
               }}
184
             />
184
             />
185
 
185
 
186
-            {/* <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
187
-            NEW
188
-          </Button> */}
186
+            {(selected) && <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
187
+              NEW
188
+            </Button>}
189
 
189
 
190
             <Box sx={{ pb: 5, pt: 3, width: "80%" }}>
190
             <Box sx={{ pb: 5, pt: 3, width: "80%" }}>
191
               <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
191
               <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
192
                 {collection_name}
192
                 {collection_name}
193
               </Typography>
193
               </Typography>
194
-              <Typography variant="h5" sx={{ fontWeight: "bolder", mb: 1 }}>
194
+              <Typography variant="h6" sx={{ fontWeight: "bolder", mb: 1 }}>
195
                 {title}
195
                 {title}
196
               </Typography>
196
               </Typography>
197
               <Typography variant="body1" sx={{ fontWeight: "400" }}>
197
               <Typography variant="body1" sx={{ fontWeight: "400" }}>
313
         <Grid container spacing={0.5} columns={12}>
313
         <Grid container spacing={0.5} columns={12}>
314
           {filteredProducts.map((product, index) => {
314
           {filteredProducts.map((product, index) => {
315
 
315
 
316
-            let { handle, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants } = product
316
+            let { handle, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants, selected } = product
317
 
317
 
318
             let minPrice = minVariantPrice.amount
318
             let minPrice = minVariantPrice.amount
319
             let minPriceCurrency = minVariantPrice.currencyCode
319
             let minPriceCurrency = minVariantPrice.currencyCode
320
             let maxPrice = maxVariantPrice.amount
320
             let maxPrice = maxVariantPrice.amount
321
             let maxPriceCurrency = maxVariantPrice.currencyCode
321
             let maxPriceCurrency = maxVariantPrice.currencyCode
322
-
323
-            let img_url = images[0].url
322
+            let img_url = images[0]?.url
324
             let collection_name = collections[0]?.title
323
             let collection_name = collections[0]?.title
325
 
324
 
326
             if (index < size) {
325
             if (index < size) {
327
-              return renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "")
326
+              return renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "", selected)
328
             }
327
             }
329
 
328
 
330
           })}
329
           })}

+ 3
- 3
src/components/ProductSelected/ProductSelected.jsx View File

67
               }}
67
               }}
68
             />
68
             />
69
 
69
 
70
-            {/* <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
70
+            <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
71
             NEW
71
             NEW
72
-          </Button> */}
72
+          </Button>
73
 
73
 
74
             <Box sx={{ pb: 5, pt: 3 }}>
74
             <Box sx={{ pb: 5, pt: 3 }}>
75
               <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
75
               <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
76
                 {collection_name}
76
                 {collection_name}
77
               </Typography>
77
               </Typography>
78
-              <Typography variant="h5" sx={{ fontWeight: "bolder", mb: 1 }}>
78
+              <Typography variant="h6" sx={{ fontWeight: "bolder", mb: 1 }}>
79
                 {title}
79
                 {title}
80
               </Typography>
80
               </Typography>
81
               <Typography variant="body1" sx={{ fontWeight: "400" }}>
81
               <Typography variant="body1" sx={{ fontWeight: "400" }}>

Loading…
Cancel
Save