fix product selected link

src/components/ProductSelected/ProductSelected.jsx

@@ -38,50 +38,55 @@ const ProductSelected = () => {
   };
 
 
-  const renderProduct = (id, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc) => {
+  const renderProduct = (handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc) => {
 
     return (
       <Grid item size={{ xs: 6, sm: 6, md: 3 }}>
-
-        <Box
-          onClick={() => { window.location.href = `/products/${id}` }}
-          sx={{
-            overflow: 'hidden',
-            position: 'relative',
-            cursor: 'pointer'
-          }}
-
-        >
-          <img
-            src={img_url}
-            alt={title}
-            style={{
-              width: '100%',
-              aspectRatio: '3 / 4',
-              objectFit: 'cover',
-              objectPosition: 'top center'
+        <a
+          href={`/products/${handle}`}
+          style={{
+            color: 'black',
+            textDecoration: 'none'
+          }}>
+          <Box
+            sx={{
+              overflow: 'hidden',
+              position: 'relative',
+              cursor: 'pointer',
             }}
-          />
 
-          {/* <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
+          >
+            <img
+              src={img_url}
+              alt={title}
+              style={{
+                width: '100%',
+                aspectRatio: '3 / 4',
+                objectFit: 'cover',
+                objectPosition: 'top center'
+              }}
+            />
+
+            {/* <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
             NEW
           </Button> */}
 
-          <Box sx={{ pb: 5, pt: 3 }}>
-            <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
-              {collection_name}
-            </Typography>
-            <Typography variant="h5" sx={{ fontWeight: "bolder", mb: 1 }}>
-              {title}
-            </Typography>
-            <Typography variant="body1" sx={{ fontWeight: "400" }}>
-              {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
-            </Typography>
-            <Typography variant="body1" sx={{ mt: 2 }}>
-              {extra_desc}
-            </Typography>
+            <Box sx={{ pb: 5, pt: 3 }}>
+              <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
+                {collection_name}
+              </Typography>
+              <Typography variant="h5" sx={{ fontWeight: "bolder", mb: 1 }}>
+                {title}
+              </Typography>
+              <Typography variant="body1" sx={{ fontWeight: "400" }}>
+                {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
+              </Typography>
+              <Typography variant="body1" sx={{ mt: 2 }}>
+                {extra_desc}
+              </Typography>
+            </Box>
           </Box>
-        </Box>
+        </a>
       </Grid>
     )
 
@@ -97,19 +102,19 @@ const ProductSelected = () => {
       <Grid size={{ xs: 12, md: 4 }} sx={{ mx: "auto", display: "flex", alignItems: "center", justifyContent: "center", my: 4 }}>
         <ChevronLeftIcon
           style={{
-            cursor:"pointer",
-            color:"#B7B7B7"
+            cursor: "pointer",
+            color: "#B7B7B7"
           }}
           onClick={swipeToLeft}
         />
-        <Typography variant="h4" sx={{mx:2}}>
+        <Typography variant="h4" sx={{ mx: 2 }}>
           NEW IN
         </Typography>
 
         <KeyboardArrowRightIcon
           style={{
-            cursor:"pointer",
-            color:"#B7B7B7"
+            cursor: "pointer",
+            color: "#B7B7B7"
           }}
           onClick={swipeToRight}
         />
@@ -129,7 +134,7 @@ const ProductSelected = () => {
       >
         {filterProducts.map((product, index) => {
 
-          let { id, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants } = product
+          let { handle, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants } = product
 
           let minPrice = minVariantPrice.amount
           let minPriceCurrency = minVariantPrice.currencyCode
@@ -139,13 +144,9 @@ const ProductSelected = () => {
           let img_url = images[0]?.url
           let collection_name = collections[0]?.title
 
-          // ID
-          const parts = id.split('/');
-          let prodID = parts[parts.length - 1];
-
           return (
             <SwiperSlide>
-              {renderProduct(prodID, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "")}
+              {renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "")}
             </SwiperSlide>
           )