Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

product details Show on Users clicking time of product #30 #46

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

product details Show on Users clicking time of product #30 #46

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ad927dd
product deatiles on clicking time of product #30
Sureshwebdeveloper Oct 6, 2024
5746486
add to bag feature added
Sureshwebdeveloper Oct 17, 2024
e6fb4c3
Merge branch 'ChandelAnish:master' into master
Sureshwebdeveloper Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
238 changes: 238 additions & 0 deletions client/src/SinglePage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
/* styles.css */

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.flex-container {
display: flex;
flex-direction: column;
gap: 20px;
}

@media (min-width: 768px) {
.flex-container {
flex-direction: row;
}
}

.image-container {
flex: 1;
padding: 20px;
}

.image-container img {
width: 100%;
height: auto;
border: 1px solid #ddd;
border-radius: 8px;
}

.details-container {
flex: 1;
padding: 20px;
}

.details-container h2 {
font-size: 2rem;
font-weight: bold;
}

.details-container p {
font-size: 1.1rem;
}

.details-container .item-name {
color: #888;
}

/* Rating Star Container */
.rating-stars {
display: flex;
align-items: center;
border: 1px solid #848484;
max-width: fit-content;
padding: 2px 5px;
}
/* Rating Star */
.star {
color: #14958f;
font-size: smaller;
margin: 3px 5px;
}

/* Divide Rating and Reviews Count */
.divide {
font-weight: 500;
margin: 0px 5px;
color: #777;
}

.price-container {
max-width: 250px;
font-size: 18px;
}

.price-container .price {
margin: 0px;
display: flex;
width: 100%;
align-items: baseline;
gap: 2px;
}

.details-container .current-price {
font-size: 1.5rem;
margin-right: 5px;
}

.details-container .original-price {
text-decoration: line-through;
color: #888;
}

.details-container .discount {
margin-left: 5px;
color: #fca61c;
/* font-weight: bold; */
}

.details-container .price-container > p {
color: #2d9d97;
font-size: 1rem;
margin-bottom: 3px;
}

.details-container .size-options {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

/* Deatiles Size Text */
.details-container .size-text {
display: flex;
justify-content: space-between;
max-width: 240px;
}

.details-container .size-chart {
color: #ff3e6c;
}
.details-container .size-options button {
padding: 14px 18px;
border: 1px solid #ddd;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}

.details-container .size-options button:hover {
border-color: #ff3e6c;
}

.details-container .add-to-bag {
padding: 15px 30px;
background-color: #ff3e6c;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

.details-container .add-to-bag:hover {
background-color: #ff4772;
}

.btn-icon {
font-size: 1.2rem;
margin-bottom: 2px;
}

.wishlist .add-to-bag {
display: flex;
align-items: center;
justify-content: center;
}

.details-container .wishlist {
padding: 15px 30px;
border-radius: 4px;
cursor: pointer;
margin-left: 20px;
cursor: pointer;
border: 1px solid #999696;
}

.details-container .wishlist:hover{
border: 1px solid #000;
}

/* Delivery options */
.delivery-options {
width: 100%;
padding: 20px 0px;
border-radius: 4px;
margin-top: 20px;
}

.delivery-options h2 {
font-size: 18px;
color: #333;
margin-bottom: 10px;
}

.delivery-options .truck-icon {
margin-left: 5px;
}

.pincode-wrapper {
margin-bottom: 10px;
}

.pincode-input {
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
width: 290px;
outline: none;
display: inline-block;
position: absolute;
}

.check-btn {
position: relative;
/* margin-left: -30px; */
left: 225px;
padding: 10px 15px;
color: #ff3e6c;
background-color: unset;
font-weight: bolder;
border: none;
outline: none;
border-radius: 4px;
cursor: pointer;
display: inline-block;
text-align: center;
}

.delivery-info {
margin-top: 15px;
font-size: 12px;
max-width: 350px;
color: #666;
}

.benefits-list {
list-style-type: none;
padding: 0;
margin-top: 15px;
}

.benefits-list li {
margin-bottom: 10px;
font-size: 14px;
color: #666;
}
88 changes: 53 additions & 35 deletions client/src/components/Item.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,64 @@ import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { bagAndWishlistMarkerAction } from "../store/bagAndWishlistMarker";
import { bagItemsAction } from "../store/bagSlice";

import { useNavigate } from "react-router-dom";

const Item = ({ item }) => {
const dispatch = useDispatch();
const navigate = useNavigate();
const bagAndWishlistMarker = useSelector(
(store) => store.bagAndWishlistMarker
);

const bagAndWishlistMarker = useSelector(store => store.bagAndWishlistMarker)

const bagItems = useSelector(store => store.bagItems)

const dispatch = useDispatch();
const bagItems = useSelector((store) => store.bagItems);

const [mark, setmark] = useState("black")
const [mark, setmark] = useState("black");

const addToBag = async (item) => {
dispatch(bagItemsAction.addToBag(item))
dispatch(bagAndWishlistMarkerAction.markbag({ item: item, mark: true }))
setmark("red");
}
const addToBag = async (item) => {
dispatch(bagItemsAction.addToBag(item));
dispatch(bagAndWishlistMarkerAction.markbag({ item: item, mark: true }));
setmark("red");
};

const handleItemClick = (item) => {
navigate(`product/${item._id}`);
};

return (
<>
<div className="item">
<div className="img">
<img className="item-image img-fluid" src={item.image} alt="" />
<div className="rating">{item.rating.stars} ⭐ &nbsp;| &nbsp; {item.rating.count}</div>
</div>
<div className="product-brand">
<h3 className="brand">{item.company}</h3>
<h4 className="product">{item.item_name}</h4>
<div className="price">
<h4>Rs. {item.current_price}</h4>
<h3>Rs. {item.original_price}</h3>
<h2>( {item.discount_percentage}% OFF )</h2>
</div>
<IoIosHeartEmpty className="wishlist-bag-item" />
<BsHandbag className="wishlist-bag-item" style={{ color: (item.add_to_bag || mark === "red") ? "red" : "black" }} onClick={() => { addToBag(item) }} />
</div>
</div>
</>
)
}
return (
<>
<div className="item" onClick={() => handleItemClick(item)}>
<div className="img">
<img
className="item-image img-fluid"
src={item.image}
alt=""
/>
<div className="rating">
{item.rating.stars} ⭐ &nbsp;| &nbsp; {item.rating.count}
</div>
</div>
<div className="product-brand">
<h3 className="brand">{item.company}</h3>
<h4 className="product">{item.item_name}</h4>
<div className="price">
<h4>Rs. {item.current_price}</h4>
<h3>Rs. {item.original_price}</h3>
<h2>( {item.discount_percentage}% OFF )</h2>
</div>
<IoIosHeartEmpty className="wishlist-bag-item" />
<BsHandbag
className="wishlist-bag-item"
style={{
color: item.add_to_bag || mark === "red" ? "red" : "black",
}}
onClick={() => {
addToBag(item);
}}
/>
</div>
</div>
</>
);
};

export default Item;
export default Item;
Loading