collections menu

src/App.js

@@ -14,6 +14,7 @@ import theme from './theme/theme';
 import { ThemeProvider } from '@mui/material';
 import { fetchCart, createCart } from './redux/slices/cartSlice';
 import { useSelector, useDispatch } from 'react-redux';
+import Collection from './pages/Collection';
 
 const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;
 
@@ -61,6 +62,14 @@ function App() {
           <Route path='/newsletter' element={<Newsletter />} />
           <Route path='/cart' element={<Cart />} />
           <Route path='/checkout' element={<Checkout />} />
+
+          <Route path='collection'>
+            {/* All Products */}
+            <Route index element={<Products />} />
+            {/* Single Product */}
+            <Route path=':pid' element={<Collection />} />
+          </Route>
+
         </Routes>
       </BrowserRouter>
       <Footer />

src/components/CollectionList/CollectionList.jsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { Box, Typography, Button } from "@mui/material";
+import ProductService from "../../services/ProductService";
+import Grid from '@mui/material/Grid2';
+
+const CollectionList = ({ collectionName }) => {
+
+  const [collections, setCollections] = useState([])
+
+  useEffect(() => {
+
+    ProductService.getCollections(collectionName).then((data) => {
+      setCollections(data)
+    })
+
+  }, [])
+
+
+
+  return (
+    <Box sx={{ flexGrow: 1, mt: 10 }}>
+      <Grid container spacing={2}>
+
+        {collections.map(({id, name, src}) => {
+
+          return (<Grid size={12}>
+            <Box
+              sx={{
+                position: 'relative',
+                width: '100%',
+                height: 0,
+                backgroundImage: `url("${src}")`,
+                backgroundSize: "cover",
+                backgroundPosition: "top center",
+                paddingTop: '600px', // This sets the height based on top padding
+                overflow: 'hidden',
+              }}
+            >
+              <Box
+                sx={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  height: '100%',
+                  backgroundColor: 'rgba(0, 0, 0, 0.5)', // Filter overlay
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  color: '#fff', // Text and button color for visibility
+                }}
+              >
+                <Typography variant="h4" gutterBottom>
+                  {name}
+                </Typography>
+                <Button onClick={()=>{ window.location.href = "/products" }} variant="contained" color="primary">
+                  SHOP NOW
+                </Button>
+              </Box>
+            </Box>
+          </Grid>)
+        })}
+
+
+      </Grid>
+    </Box>
+  );
+};
+
+export default CollectionList;

src/components/CollectionList/index.js

@@ -0,0 +1 @@
+export { default } from "./CollectionList"

src/components/CollectionViewer/ProductType.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Box, Button, Typography } from '@mui/material';
+
+const ProductType = () => {
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        width: '100%',
+        height: 0,
+        paddingTop: '600px', // This sets the height based on top padding
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          backgroundColor: 'rgba(0, 0, 0, 0.5)', // Filter overlay
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          color: '#fff', // Text and button color for visibility
+        }}
+      >
+        <Typography variant="h4" gutterBottom>
+          Some Type
+        </Typography>
+        <Button variant="contained" color="primary">
+          SHOP NOW
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default ProductType;

src/components/CollectionViewer/index.js

@@ -0,0 +1 @@
+export { default } from './ProductType'

src/components/Navbar/Navbar.jsx

@@ -19,6 +19,7 @@ import BrushIcon from '@mui/icons-material/Brush';
 import LoyaltyIcon from '@mui/icons-material/Loyalty';
 import Grid from '@mui/material/Grid2';
 import { useSelector } from 'react-redux';
+import ProductService from "../../services/ProductService";
 
 function calculateTotalQuantity(cartItems) {
   return cartItems.reduce((total, item) => total + item.quantity, 0);
@@ -55,25 +56,6 @@ const LanguageSelectItem = styled(MenuItem)(() => ({
   },
 }));
 
-const navItem = [
-  {
-    title: "DISCOVER",
-    link: "/products",
-    icon: <CategoryIcon />
-  },
-  {
-    title: "HOME",
-    link: "/products",
-    icon: <HomeIcon />
-  },
-  {
-    title: "BEAUTY",
-    link: "/products",
-    icon: <BrushIcon />
-  }
-]
-
-
 const Navbar = () => {
 
   const [showHeader, setShowHeader] = useState(true);
@@ -84,6 +66,29 @@ const Navbar = () => {
   const [cartAmount, setCartAmount] = useState(0);
 
   const [open, setOpen] = React.useState(false);
+  const [navItem, setNavItem] = useState([])
+
+  useEffect(()=>{
+    fetchProductTypes()
+  },[])
+
+  const fetchProductTypes = async () => {
+    try {
+      const data = await ProductService.getProductTypes();
+  
+      if (Array.isArray(data)) {
+
+        let navItemData = data.map(({node})=>({title:`${node.toUpperCase()}`, link:`/collection/${node}` }))
+        setNavItem(navItemData);
+
+      } else {
+        setNavItem([]); 
+      }
+    } catch (error) {
+      console.error("Error fetching product types:", error);
+      setNavItem([]); // Handle error by setting fallback empty array
+    }
+  };
 
   useEffect(() => {
 
@@ -93,8 +98,6 @@ const Navbar = () => {
 
   }, [cart])
 
-
-
   const handleChange = (event) => {
     setLanguage(event.target.value);
   };

src/components/Navbar/components/MobileNav/MobileNav.jsx

@@ -40,7 +40,7 @@ const MobileNav = ({ open, onClose, menu = [] }) => {
       {/* Main Navigation */}
       <Box sx={{ width: 250 }} role="presentation">
         <List>
-          {menu.map(({ title, link, icon }) => (
+          {menu.map(({ title, link }) => (
             <ListItem key={title} disablePadding>
               <ListItemButton
                 onClick={() => { window.location.href = link }}
@@ -52,7 +52,6 @@ const MobileNav = ({ open, onClose, menu = [] }) => {
                   },
                 }}
               >
-                {icon}
                 <ListItemText sx={{ ml: 2 }} primary={title} />
               </ListItemButton>
             </ListItem>

src/components/PageTitle/PageTitle.jsx

@@ -1,16 +1,18 @@
 import React from "react";
 import Box from "@mui/material/Box";
+
 import Typography from "@mui/material/Typography";
 
-const PageTitle = () => {
+const PageTitle = ({title = "", image = ""}) => {
+
   return (
     <Box
       sx={{
         position: "relative",
         minHeight: "300px",
-        backgroundImage: `url("https://p16-va.lemon8cdn.com/tos-alisg-v-a3e477-sg/1bab0c0797934592bb5a705ad62ed4c4~tplv-tej9nj120t-origin.webp")`,
+        backgroundImage: `url("${image}")`,
         backgroundSize: "cover",
-        backgroundPosition: "center",
+        backgroundPosition: "top center",
         color: "white",
         textAlign: "center",
         overflow: "hidden", // Ensures the dim layer stays inside the box
@@ -39,7 +41,7 @@ const PageTitle = () => {
           margin:"auto auto"
         }}
       >
-        ATMA SARI COLLECTION
+        {title.toUpperCase() || " "}
       </Typography>
     </Box>
   );

src/components/ProductSelected/ProductSelected.jsx

@@ -11,7 +11,7 @@ const ProductSelected = () => {
 
   useEffect(() => {
 
-    dispatch(fetchProducts())
+    dispatch(fetchProducts({maxResults: 4, sortBy:'TITLE', customQuery:"tag:new"}))
 
   }, [])
 

src/pages/Cart.jsx

@@ -138,6 +138,10 @@ const Cart = () => {
 
                     </TableCell>
 
+                    <TableCell align='center'>
+                      <Typography variant='body2' sx={{ fontWeight: "bold" }} >{title}</Typography>
+                    </TableCell>
+
                     <TableCell align='center'>
                       <Box sx={{ display: "flex", justifyContent: "center" }}>
 
@@ -159,15 +163,11 @@ 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>
                 )
 

src/pages/Collection.jsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import PageTitle from '../components/PageTitle'
+import Filter from '../components/Filter'
+import ProductList from '../components/ProductList'
+import { Box } from '@mui/material'
+import SocialMedia from '../components/SocialMedia'
+import Feature from '../components/Feature'
+import { useSelector, useDispatch } from 'react-redux'
+import { fetchProducts } from '../redux/slices/productSlice'
+import image from "../assets/images/titleBg.jpg"
+import CollectionList from '../components/CollectionList/CollectionList'
+
+const Collection = () => {
+
+  let { pid } = useParams();
+  const dispatch = useDispatch();
+
+  useEffect(()=>{
+
+   //dispatch(fetchProducts(250, 'created_at',  `product_type:${pid}`))
+
+  }, [])
+
+  return (
+    <>
+      <PageTitle title={`${pid} COLLECTIONS`} image={image} />
+      <CollectionList collectionName={pid}/>
+      <Box sx={{
+        px: {
+          xs: 2,
+          md: 12,
+          lg: 20
+        },
+        mb: {
+          xs: 0,
+          md: 5,
+          lg: 10
+        }
+      }}>
+      </Box>
+    </>
+  )
+}
+
+export default Collection

src/pages/Home.jsx

@@ -58,7 +58,7 @@ const Home = () => {
           </Grid>
 
           <Grid size={{xs:12, md:2}} sx={{display:"flex", alignItems:"center", py:{xs:2, md:0} }}>
-            <Link href="#" sx={{ color:"#000", textDecoration: "underline", m:{xs:"auto auto auto auto", md:"0 0 0 auto"}}}>VIEW ALL</Link>
+            <Link href="/product" sx={{ color:"#000", textDecoration: "underline", m:{xs:"auto auto auto auto", md:"0 0 0 auto"}}}>VIEW ALL</Link>
           </Grid>
 
         </Grid>

src/pages/Products/Product.jsx

@@ -18,7 +18,6 @@ const Product = () => {
   const product = useSelector((state) => state.products.product.data)
   const dispatch = useDispatch();
   
-
   useEffect(() => {
 
     dispatch(fetchProduct(pid))

src/redux/slices/productSlice.js

@@ -33,8 +33,9 @@ export const fetchProduct = createAsyncThunk(
 
 export const fetchProducts = createAsyncThunk(
   'product/fetchProducts',
-  async () => {
-    const response = await ProductService.getProducts()
+  async ({maxResults, sortBy, customQuery}) => {
+
+    const response = await ProductService.getProducts(maxResults, sortBy, customQuery)
     return response
 
   }

src/services/ProductService.js

@@ -2,7 +2,7 @@ import { createStorefrontApiClient } from '@shopify/storefront-api-client';
 import { REACT_APP_ACCESS_TOKEN, REACT_APP_SHOP_NAME } from '../utils/httpCommon'
 
 const defaultQuery = 'status:active, product_type:clothing, product_categroy:dresses';
-const defaultResult = 10;
+const defaultResult = 250;
 const defaultSortBy = 'TITLE';
 
 const client = createStorefrontApiClient({
@@ -15,7 +15,7 @@ const client = createStorefrontApiClient({
 const getProducts = async (maxResults = defaultResult, sortBy = defaultSortBy, customQuery = defaultQuery) => {
 
   const query = `{
-    products(first: ${maxResults}, query: "${customQuery}", sortKey: ${sortBy}) {
+    products(first: ${maxResults}, query: "${customQuery}", sortKey:${sortBy}) {
       nodes {
         id
         title
@@ -65,6 +65,8 @@ const getProducts = async (maxResults = defaultResult, sortBy = defaultSortBy, c
     },
   });
 
+  debugger
+
   return data.products.nodes
 
 }
@@ -126,10 +128,74 @@ const getProduct = async (id = "") => {
 
 }
 
+const getProductTypes = async () => {
+  const query = `{
+    productTypes(first: 250) {
+      edges {
+        node
+      }
+    }  
+  }`
+
+  const { data, errors, extensions } = await client.request(query, {
+    variables: {},
+  });
+
+  return data.productTypes.edges
+}
+
+const getCollections = async (name) => {
+
+  const query = `{
+    products(first: 250, query: "product_type:${name}") {
+      nodes {
+        createdAt
+        productType
+        collections(first: 1) {
+          nodes {
+            title
+            id
+            image {
+              src
+            }
+          }
+        }
+      }
+    }
+  }`
+
+  const { data, errors, extensions } = await client.request(query, {
+    variables: {},
+  });
+
+  const uniqueCollections = new Map();
+
+  // Iterate through all products
+  data.products.nodes.forEach((product) => {
+    // Iterate through each collection within a product
+    product.collections.nodes.forEach((collection) => {
+      const { title, id, image } = collection;
+
+      // Use the collection ID as a unique key to avoid duplicates
+      if (!uniqueCollections.has(id)) {
+        uniqueCollections.set(id, {
+          name: title,
+          id,
+          src: image ? image.src : null, // Handle null image gracefully
+        });
+      }
+    });
+  });
+
+  return Array.from(uniqueCollections.values());
+
+}
 
 const ProductService = {
   getProducts,
-  getProduct
+  getProduct,
+  getProductTypes,
+  getCollections
 }
 
 export default ProductService