sorting

src/App.js

           <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>
+          <Route path='/collection/:pid' element={<Collection />}/>
 
         </Routes>
       </BrowserRouter>

src/components/CategoryList/CategoryList.jsx

+import { useEffect, useState } from "react";
+import { Box, Typography, Button } from "@mui/material";
+import ProductService from "../../services/ProductService";
+import Grid from '@mui/material/Grid2';
+
+const CategoryList = ({ productType }) => {
+
+  const [categorys, setCategorys] = useState(['all'])
+
+  useEffect(() => {
+
+    ProductService.getTags(productType).then((data) => {
+      
+      setCategorys([...categorys, ...data])
+    })
+
+
+
+  }, [])
+
+
+  return (
+    <Box sx={{ flexGrow: 1, mt: 10 }}>
+
+      {categorys.length > 0 && <Typography variant="h4" sx={{ textAlign: "center", mb: 5, fontWeight: "bolder" }}>SHOP BY CATEGORY</Typography>}
+
+      <Box
+        display="flex"
+        flexWrap="wrap"
+        gap={2} // Spacing between buttons
+        justifyContent="center" // Center align buttons
+        p={2} // Padding inside the container
+      >
+        {categorys.map((label, index) => (
+          <Button 
+            onClick={()=>{
+              sessionStorage.removeItem('amber-select-collection')
+              sessionStorage.setItem('amber-select-category', label)
+              window.location.href = "/products" 
+            }}
+            key={index} variant="contained" color="primary">
+            {label}
+          </Button>
+        ))}
+        
+      </Box>
+    </Box>
+  );
+};
+
+export default CategoryList;

src/components/CategoryList/index.js

+export { default } from "./CategoryList"

src/components/CollectionList/CollectionList.jsx

 import ProductService from "../../services/ProductService";
 import Grid from '@mui/material/Grid2';
 
-const CollectionList = ({ collectionName }) => {
+const CollectionList = ({ productType }) => {
 
   const [collections, setCollections] = useState([])
 
   useEffect(() => {
 
-    ProductService.getCollections(collectionName).then((data) => {
+    ProductService.getCollections(productType).then((data) => {
       setCollections(data)
     })
 
 
   return (
     <Box sx={{ flexGrow: 1, mt: 10 }}>
+
+      { collections.length > 0 && <Typography variant="h4" sx={{textAlign:"center", mb:5, fontWeight:"bolder"}}>COLLECTIONS</Typography>}
+
       <Grid container spacing={2}>
 
         {collections.map(({id, name, src}) => {

src/components/Header/Header.jsx

 const Header = () => {
 
     return (
-        <Container>
+        <Container sx={{display:"none"}}>
             <Box sx={{color:"white", px:23}}>
                 <Box sx={{display:"flex", gap:1}}>
                     <InstagramIcon style={headerStyle.icon} />

src/components/PageTitle/PageTitle.jsx

 
 import Typography from "@mui/material/Typography";
 
-const PageTitle = ({title = "", image = ""}) => {
+const PageTitle = ({title = "", image = null}) => {
 
   return (
     <Box
         color: "white",
         textAlign: "center",
         overflow: "hidden", // Ensures the dim layer stays inside the box
-        display:"flex"
+        display:"flex",
+        mt:5
       }}
     >
       {/* Overlay */}
           left: 0,
           right: 0,
           bottom: 0,
-          backgroundColor: "rgba(0, 0, 0, 0.5)", // Adjust opacity to control dimness
+          backgroundColor: image ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0)", // Adjust opacity to control dimness
           zIndex: 1,
         }}
       />
         sx={{
           position: "relative",
           zIndex: 2,
-          margin:"auto auto"
+          margin:"auto auto",
+          color: image ? "white" : "black"
         }}
       >
         {title.toUpperCase() || " "}

src/pages/Cart.jsx

                 let { amount, currencyCode } = cost.totalAmount
                 let { image, product, title } = merchandise
 
+                // ID
+                const parts = product?.id?.split('/');
+                let prodID = parts[parts.length - 1];
+
                 return (
                   <TableRow
                     key={id}
                       <img
                         src={image.src}
                         alt={image.src}
+                        onClick={()=>{ window.location.href = `/products/${prodID}`}}
                         style={{
                           width: 100,
                           height: 100,
                           aspectRatio: '4 / 4',
                           objectFit: 'cover',
-                          objectPosition: "top center"
+                          objectPosition: "top center",
+                          cursor:"pointer"
                         }}
                       />
                     </TableCell>

src/pages/Collection.jsx

 import { useSelector, useDispatch } from 'react-redux'
 import { fetchProducts } from '../redux/slices/productSlice'
 import image from "../assets/images/titleBg.jpg"
+import CategoryList from '../components/CategoryList'
 import CollectionList from '../components/CollectionList/CollectionList'
 
 const Collection = () => {
 
   return (
     <>
-      <PageTitle title={`${pid} COLLECTIONS`} image={image} />
-      <CollectionList collectionName={pid}/>
+      <PageTitle title={`AMBER ${pid}`} image={image} />
+      <CategoryList productType={pid}/>
+      <CollectionList productType={pid}/>
       <Box sx={{
         px: {
           xs: 2,

src/pages/Products/index.jsx

 
     }else if(sessionStorage.getItem('amber-select-category')){
 
-      let categoryData = JSON.parse(sessionStorage.getItem('amber-select-category'))
+      let category = sessionStorage.getItem('amber-select-category')
+      setTitle(category)
 
     }else{
       window.location.href = '/'

src/services/CartService.js

                 ... on ProductVariant {
                   id
                   title
+                  product {
+                    id
+                  }
                   selectedOptions {
                     name
                     value
               ... on ProductVariant {
                 id
                 title
+                product {
+                  id
+                }
                 selectedOptions {
                   name
                   value
                 ... on ProductVariant {
                   id
                   title
+                  product {
+                    id
+                  }
                   selectedOptions {
                     name
                     value

src/services/ProductService.js

 
 }
 
+const getTags = async (productType) => {
+
+  const query = `{
+  products(first: 250, query: "product_type:${productType}") {
+      nodes {
+        createdAt
+        tags
+      }
+    }
+  }`
+
+  const { data, errors, extensions } = await client.request(query, {
+    variables: {},
+  });
+
+  const tagSet = new Set();
+
+  // Iterate through each item in the data
+  data.products.nodes.forEach(item => {
+    if (item.tags && Array.isArray(item.tags)) {
+      item.tags.forEach(tag => tagSet.add(tag));
+    }
+  });
+
+  // Convert the Set back into an array and return
+  return Array.from(tagSet);
+
+}
 
 
 const ProductService = {
   getProduct,
   getProductsByCollection,
   getProductTypes,
-  getCollections
+  getCollections,
+  getTags
 }
 
 export default ProductService