added the related products feature

waterloop · Dec 22, 2023 · ccda899 · ccda899
1 parent 9746f3a
commit ccda899
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 4 deletions.
diff --git a/src/@types/products.d.ts b/src/@types/products.d.ts
@@ -16,6 +16,7 @@ declare module "products" {
         price: number;
         picture: string;
         related_product_ids: string;
+        related_products: Product[];
         order_link: string;
         thumbnails: string[];
     }

diff --git a/src/components/ProductCard/ProductDetails.tsx b/src/components/ProductCard/ProductDetails.tsx
@@ -7,6 +7,7 @@ import useProductDetails from 'hooks/product-details';
 import Tippy from '@tippyjs/react';
 // import 'tippy.js/dist/tippy.css';
 import sizeChart from '../../../src/static/img/merchStore/size-chart.svg';
+import { useHistory } from "react-router";
 
 interface ProductDetailsProps {
     data?: ProductDetailsProperty;
@@ -16,15 +17,18 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({
     data
 }) => {
     const { id } = useParams();
-    console.log("id: ", id);
+    const history = useHistory();
     const {productDetails} = useProductDetails(id);
     console.log("product details: ", productDetails);
+    const productOnClick = (id: number) => {
+        history.replace(`/shop/${id}`);
+        window.location.reload();
+    }
 
     return (
         <div className='productDetailsContainer'>
             <div className='productDetailsTop'>
                 <div className='leftSection'>
-                    {/* Make sure to change the data to productDetails once we update the cms database to hold thumbnails */}
                     {productDetails?.thumbnails?.map((item) => {
                         return (
                             <img src={item}></img>
@@ -52,7 +56,24 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({
                     </div>
                 </div>
             </div>
-            <div className='relatedProductsContainer'></div>
+            {/* <div className='related-products-border'>
+                <div className='related-product-text'>Related Products</div>
+                <div className='border-line'></div>
+            </div> */}
+            <div className='relatedProductsContainer'>
+            <div className='related-product-text'>Related Products</div>
+                {productDetails?.related_products?.map((item) => {
+                    return (
+                        <div className='related-product'>
+                            <img onClick={() => productOnClick(item.id)} src={item.picture} alt='cannot find product image' className='related-product-img'></img>
+                            <div className='related-product-labels'>
+                                <div className='related-product-title'>{item.name}</div>
+                                <div className='related-product-price'>{'$' + item.price}</div>
+                            </div>
+                        </div>
+                    )
+                })}
+            </div>
         </div>
     )
 }

diff --git a/src/theme/styles.scss b/src/theme/styles.scss
@@ -1455,8 +1455,61 @@ p {
       }
     }
   }
+
   .relatedProductsContainer {
-    background-color: green;
+    background-color: white;
+    display: flex; 
+    // justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #010101;
+    width: fit-content;
+    padding-top: 30px;
+    position: relative;
+
+    .related-product-text {
+      position: absolute;
+      top: -25px;
+      left: 0;
+      padding-left: 30px;
+      padding-right: 20px;
+      font-size: 32px;
+      font-weight: 400;
+      font-family: 'IBM Plex Sans';
+      line-height: 41.6px;
+      background-color: white;
+    }
+
+    .related-product {
+      padding-right: 15px; 
+      padding-left: 30px;
+      padding-bottom: 20px;
+      .related-product-img {
+        width: 273px;
+        height: 317px;
+        border-radius: 15px;
+        cursor: pointer;
+      }
+      .related-product-labels {
+        background-color: white;
+        display: flex; 
+        align-items: center;
+        width: 273px;
+        justify-content: space-between;
+        .related-product-title {
+          font-size: 18px;
+          font-weight: 400;
+          font-family: 'IBM Plex Sans';
+          line-height: 23.4px;
+        }
+        .related-product-price {
+          font-size: 18px;
+          font-weight: 400;
+          font-family: 'IBM Plex Sans';
+          line-height: 23.4px;
+        }
+      }
+    }
+
   }
 }