fit

src/components/ProductList/ProductList.jsx

@@ -41,6 +41,7 @@ const ProductList = ({ size = 99999 }) => {
               width: '100%',
               aspectRatio: '3 / 4',
               objectFit: 'cover',
+              objectPosition:'top center'
             }}
           />
 
@@ -56,7 +57,7 @@ const ProductList = ({ size = 99999 }) => {
               {title}
             </Typography>
             <Typography variant="body" >
-              {`${currency} ${price}`}
+              {`${currency} ${parseFloat(price).toFixed(2)}`}
             </Typography>
             <Typography variant="body2" sx={{ mt: 2 }}>
               {extra_desc}

src/components/ProductSelected/ProductSelected.jsx

@@ -1,84 +1,92 @@
-import React from 'react';
+import { useEffect } from 'react';
 import { Box, Typography, Button, useMediaQuery } from '@mui/material';
 import Grid from '@mui/material/Grid2';
+import { useSelector, useDispatch } from 'react-redux';
+import { fetchProducts } from '../../redux/slices/productSlice';
 
 const ProductSelected = () => {
 
-  const images = [
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    }
-  ];
+  const products = useSelector((state) => state.products.products.data)
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+
+    dispatch(fetchProducts())
+
+  }, [])
+
+  const renderProduct = (id, img_url, title, collection, price, currency, 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'
+            }}
+          />
+
+          {/* <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
+            NEW
+          </Button> */}
+
+          <Box sx={{ py: 5 }}>
+            <Typography variant="body2" >
+              {collection}
+            </Typography>
+            <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
+              {title}
+            </Typography>
+            <Typography variant="body" >
+              {`${currency} ${parseFloat(price).toFixed(2)}`}
+            </Typography>
+            <Typography variant="body2" sx={{ mt: 2 }}>
+              {extra_desc}
+            </Typography>
+          </Box>
+        </Box>
+      </Grid>
+    )
+
+  }
+
 
   const isMobileScreen = useMediaQuery((theme) => theme.breakpoints.down('sm'))
 
-  const displayedImages = isMobileScreen ? images.slice(0, 2) : images;
+  const displayedImages = isMobileScreen ? products.slice(0, 2) : products.slice(0, 4);
 
   return (
     <Box sx={{ mb: 5 }}>
       <Grid container spacing={1} columns={12}>
-        {displayedImages.map((image, index) => (<Grid item size={{ xs: 6, md: 3 }} key={index}>
-          <Box
-            sx={{
-              overflow: 'hidden',
-              position: 'relative'
-            }}
-          >
-            <img
-              src={image.url}
-              alt={image.title}
-              style={{
-                width: '100%',
-                aspectRatio: '3 / 4',
-                objectFit: 'cover',
-              }}
-            />
-
-            {/* <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
-              NEW
-            </Button> */}
-
-            <Box sx={{ py: 5 }}>
-              <Typography variant="body2" >
-                {image.description}
-              </Typography>
-              <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
-                {image.title}
-              </Typography>
-              <Typography variant="body" >
-                {`RM ${image.price}`}
-              </Typography>
-              <Typography variant="body2" sx={{ mt: 2 }}>
-                {image.extra_desc}
-              </Typography>
-            </Box>
-          </Box>
-        </Grid>))}
+        {displayedImages.map((product, index) => {
+
+          let { id, title, compareAtPriceRange, images, collections } = product
+          let price = compareAtPriceRange.maxVariantPrice.amount
+          let currency = compareAtPriceRange.maxVariantPrice.currencyCode
+          let img_url = images.nodes[0].url
+          let collection_name = collections.nodes[0]?.title
+
+          // ID
+          const parts = id.split('/');
+          let prodID = parts[parts.length - 1];
+
+
+          return renderProduct(prodID, img_url, title, collection_name, price, currency, "")
+
+        })}
       </Grid>
     </Box>
   );

src/pages/Cart.jsx

@@ -96,7 +96,6 @@ const Cart = () => {
                   <Typography variant='body1'>Variant</Typography>
                 </TableCell>
                 <TableCell align='center'>
-
                   <Typography variant='body1'>Quantity</Typography>
                 </TableCell>
                 <TableCell align='center'>
@@ -131,15 +130,14 @@ const Cart = () => {
                         }}
                       />
                     </TableCell>
+
                     <TableCell>
                       <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{product.title}</Typography>
 
                       {product?.collections?.nodes?.map(({ title }) => (<Typography variant='body2'>{title}</Typography>))}
 
                     </TableCell>
-                    <TableCell align='center'>
-                      <Typography variant='body2' sx={{ fontWeight: "bold" }} >{title}</Typography>
-                    </TableCell>
+
                     <TableCell align='center'>
                       <Box sx={{ display: "flex", justifyContent: "center" }}>
 
@@ -161,9 +159,15 @@ const Cart = () => {
 
                       </Box>
                     </TableCell>
+                    
+                    <TableCell align='center'>
+                      <Typography variant='body2' sx={{ fontWeight: "bold" }} >{title}</Typography>
+                    </TableCell>
+
                     <TableCell align='center'>
                       <Typography variant='h6' sx={{ fontWeight: "bold" }}>{`${currencyCode} ${parseFloat(amount).toFixed(2)}`}</Typography>
                     </TableCell>
+
                   </TableRow>
                 )