Skip to content

Commit

Permalink
feat(*): added related products
Browse files Browse the repository at this point in the history
  • Loading branch information
@HoseaCodes
HoseaCodes committed Mar 21, 2022
1 parent 4a9ad83 commit 8384ce2
Show file tree
Hide file tree
Showing 4 changed files with 228 additions and 32 deletions.
73 changes: 41 additions & 32 deletions src/Components/Product/DetailProduct.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@ import React, { useContext, useState, useEffect } from 'react';

import { useParams, Link } from 'react-router-dom';

import ProductItem from './ProductItem';
import RelatedProducts from './RelatedProducts';
import { GlobalState } from '../../GlobalState';
import './DetailProduct.css';
import NavBar from '../../Components/NavBar/NavBar';
import Footer from '../../Components/Footer/Footer';

const DetailProduct = () => {
const params = useParams()
Expand All @@ -25,38 +27,45 @@ const DetailProduct = () => {
const { images, title, price, description, content, sold, category, product_id } = detailProduct;
return (
<>
<div className="shop-container">
<div>
<div className="detail">
<img src={images.url} alt="Product Detail" />
<div className="box-detail">
<div className="row">
<h2>{title}</h2>
<h6>#id: {product_id}</h6>
</div>
<span>$ {price}</span>
<p>{description}</p>
<p>{content}</p>
<p>Sold: {sold}</p>
<Link to="/cart" className="cart"
onClick={() => addCart(detailProduct)}>
Buy Now
</Link>
</div>
</div>
<div>
<h2>Related Products</h2>
<div className="products">
{
products.map(product => {
return product.category === category
? <ProductItem key={product._id} product={product} /> : null
})
}
</div>
</div>
</div>
<NavBar/>

<div className="container">
<div className="row my-5">
<div className="col-md-6 text-center">
<img src={images.url} width={'2000rem'} alt='product' />
</div>
<div className="col-md-6">
<h2>{title || "No Title"}</h2>
<h6>#id: {product_id}</h6>
<p className="text-wrap">
{description || "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}
</p>
<p>{content || "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}</p>
<h2>Categories</h2>
{/* {category.map(item => <span class="badge rounded-pill bg-info text-dark mb-3 me-2">{item}</span>)} */}
<span class="badge rounded-pill bg-info text-dark mb-3 me-2">{category || "software"}</span>
<h2>Price</h2>
<h4>${price || "25"} </h4>
<p>Sold: {sold}</p>
<Link to="/cart" className="cart"
onClick={() => addCart(detailProduct)}>
Buy Now
</Link>
</div>
</div>
</div>
<div>
<h2>Related Products</h2>
<div>
{
products.map(product => {
return product.category === category
? <RelatedProducts key={product._id} product={product} /> : null
})
}
</div>
</div>
<Footer/>
</>
)
}
Expand Down
8 changes: 8 additions & 0 deletions src/Components/Product/ProductItem.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
.related {
display: flex;
justify-content: center;
width: fit-content;
padding: 0px 20px 0px 20px;
}

.product_card {
max-width: 300px;
margin: 20px 0;
Expand All @@ -18,6 +25,7 @@
opacity: 0;
transition: 0.5s;
}

.product_box:hover {
opacity: 1;
}
Expand Down
74 changes: 74 additions & 0 deletions src/Components/Product/RelatedProducts.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
#team {
padding: 60px 0;
text-align: center;
background-color: #6f85ff;
color: #fff;
}
#team h2 {
position: relative;
padding: 0px 0px 15px;
}
#team p {
font-size: 15px;
font-style: italic;
padding: 0px;
margin: 25px 0px 40px;
}
#team h2::after {
content: "";
border-bottom: 2px solid #fff;
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
width: 90px;
margin: 0 auto;
display: block;
}
#team .member {
margin-bottom: 20px;
position: relative;
overflow: hidden;
background-color: #ffffff;
padding: 10px;
border-radius: 15px 0px 15px 0px;
box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.4);
}
#team .member .member-info {
display: block;
position: absolute;
bottom: 0px;
left: -200px;
transition: 0.4s;
padding: 15px 0;
background: rgba(0, 0, 0, 0.4);
}
#team .member:hover .member-info {
left: 0px;
right: 0px;
}
#team .member h4 {
font-weight: 700;
margin-bottom: 2px;
font-size: 18px;
color: #fff;
}
#team .member span {
font-style: italic;
display: block;
font-size: 13px;
}
#team .member .social-links {
margin-top: 15px;
}
#team .member .social-links a {
transition: none;
color: #fff;
}
#team .member .social-links a:hover {
color: #ffc107;
}
#team .member .social-links i {
font-size: 18px;
margin: 0 2px;
}
105 changes: 105 additions & 0 deletions src/Components/Product/RelatedProducts.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import React from 'react';

import './ProductItem.css';
import './RelatedProducts.css';

const RelatedProducts = ({ product}) => {

return (
<>
<div className='related' style={{backgroundSize:'cover', backgroundRepeat:'no-repeat',backgroundImage:`url(${product.images.url})`}}>
{/* this image is needed in order for the div's height to scale to the image */}
<img src={product.images.url} alt="product" style={{visibility: "hidden", maxWidth:"100%", maxHeight:'100%'}}/>
</div>
<section id="team">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<h2>Meet Our Team</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text</p>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="member">
<div class="member-img">
<img src="/images/img-500x500-1.jpg" class="img-fluid" alt=""/>
</div>
<div class="member-info">
<h4>Gaurav Kumar</h4>
<span>Web Designer</span>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-pinterest-p"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="member">
<div class="member-img">
<img src="/images/img-500x500-1.jpg" class="img-fluid" alt=""/>
</div>
<div class="member-info">
<h4>Parveen Singh</h4>
<span>Web Developer</span>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-pinterest-p"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="member">
<div class="member-img">
<img src="/images/img-500x500-1.jpg" class="img-fluid" alt=""/>
</div>
<div class="member-info">
<h4>Pardeep Kumar</h4>
<span>SEO Expert</span>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-pinterest-p"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="member">
<div class="member-img">
<img src="/images/img-500x500-1.jpg" class="img-fluid" alt=""/>
</div>
<div class="member-info">
<h4>Gurdeep Singh</h4>
<span>ISO Developer</span>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-pinterest-p"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
)
}

export default RelatedProducts;

0 comments on commit 8384ce2

Please sign in to comment.