react-icons/fa#FaCartPlus JavaScript Examples
The following examples show how to use
react-icons/fa#FaCartPlus.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: productItem.js From next-ecommerce with MIT License | 4 votes |
|
export default function ProductSection({ id, name, rating, img_url, price }) {
const cart = useQuery(CART);
const wishlist = useQuery(WISHLIST);
return (
<article>
<div className="top-buttons">
<button className="add-wishlist" onClick={() => toggleWishlist(id)}>
{wishlist.data.wishlist.products.includes(id) && (
<FaHeart size={20} color="#D8D8D8" />
)}
{!wishlist.data.wishlist.products.includes(id) && (
<FaRegHeart size={20} color="#D8D8D8" />
)}
</button>
</div>
<div className="product-img-box">
<Link href={`/product/${id}`}>
<img className="product-img" src={img_url} />
</Link>
</div>
<Link href={`/product/${id}`}>
<a className="product-name">{name}</a>
</Link>
<div className="rating">
<StarRatings
rating={parseFloat(rating)}
starRatedColor="#F9AD3D"
numberOfStars={5}
name="rating"
starDimension="20px"
starSpacing="1px"
/>
</div>
<div className="price">
<p className="price-value">${price}</p>
<button className="add-cart" onClick={() => toggleCart(id)}>
{cart.data.cart.products.includes(id) && (
<FaCartArrowDown size={18} color="#D8D8D8" />
)}
{!cart.data.cart.products.includes(id) && (
<FaCartPlus size={18} color="#D8D8D8" />
)}
</button>
</div>
<style jsx>{`
article {
display: flex;
align-items: center;
flex-direction: column;
box-sizing: border-box;
height: 100%;
padding: 24px;
background: white;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
border-radius: 6px;
}
.top-buttons {
margin-bottom: 24px;
align-self: flex-end;
}
.top-buttons .add-wishlist {
background: none;
border: none;
}
.top-buttons .add-wishlist:focus {
outline: none;
}
.product-img-box {
margin-bottom: 28px;
}
.product-img {
width: 225px;
height: 160px;
object-fit: contain;
}
.product-name {
width: 80%;
line-height: 20px;
text-decoration: none;
font-weight: 500;
font-size: 14px;
text-align: center;
color: #666666;
margin-bottom: 18px;
}
.product-name:hover {
text-decoration: underline;
font-weight: 600;
}
.rating {
margin-bottom: 24px;
}
.price {
display: flex;
align-items: center;
font-weight: 900;
font-size: 16px;
color: #666666;
}
.price .add-cart {
background: none;
border: none;
margin-left: 5px;
}
.price .add-cart:focus {
outline: none;
}
`}</style>
</article>
);
}
Example #2
| Source File: [id].js From next-ecommerce with MIT License | 4 votes |
|
export default function Home() {
const router = useRouter();
const { id } = router.query;
const cart = useQuery(CART);
const wishlist = useQuery(WISHLIST);
const { data, loading, error } = useQuery(PRODUCTS_BY_IDS, {
variables: {
id,
},
});
if ((error || !data?.productsById.length) && !loading) {
return (
<Page title="Quantum E-commerce - Products">
<ErrorAlert message="This product is not found!"></ErrorAlert>
</Page>
);
} else if (loading) {
return (
<Page title="Quantum E-commerce - Products">
<p>Loading...</p>
</Page>
);
}
return (
<Page title="Quantum E-commerce - Products">
<article>
<div className="top-buttons">
<button
className="add-wishlist"
onClick={() => toggleWishlist(data.productsById[0].id)}
>
{wishlist.data.wishlist.products.includes(
data.productsById[0].id
) && <FaHeart size={20} color="#D8D8D8" />}
{!wishlist.data.wishlist.products.includes(
data.productsById[0].id
) && <FaRegHeart size={20} color="#D8D8D8" />}
</button>
</div>
<div className="product-img-box">
<img className="product-img" src={data.productsById[0].img_url} />
</div>
<h1 className="product-name">{data.productsById[0].name}</h1>
<h3 className="product-description">
{data.productsById[0].description}
</h3>
<div className="rating">
<StarRatings
rating={parseFloat(data.productsById[0].rating)}
starRatedColor="#F9AD3D"
numberOfStars={5}
name="rating"
starDimension="20px"
starSpacing="1px"
/>
</div>
<div className="price">
<p className="price-value">${data.productsById[0].price}</p>
<button
className="add-cart"
onClick={() => toggleCart(data.productsById[0].id)}
>
{cart.data.cart.products.includes(data.productsById[0].id) && (
<FaCartArrowDown size={24} color="#D8D8D8" />
)}
{!cart.data.cart.products.includes(data.productsById[0].id) && (
<FaCartPlus size={24} color="#D8D8D8" />
)}
</button>
</div>
<style jsx>{`
article {
display: flex;
align-items: center;
flex-direction: column;
box-sizing: border-box;
height: 100%;
width: 100%;
padding: 24px;
background: white;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
border-radius: 6px;
}
.top-buttons {
margin-bottom: 24px;
align-self: flex-end;
}
.top-buttons .add-wishlist {
background: none;
border: none;
}
.top-buttons .add-wishlist:focus {
outline: none;
}
.product-img-box {
margin-bottom: 28px;
}
.product-img {
width: 320px;
height: 230px;
object-fit: contain;
}
.product-name {
width: 80%;
line-height: 20px;
text-decoration: none;
font-weight: 500;
font-size: 22px;
text-align: center;
color: #666666;
margin-bottom: 28px;
}
.product-description {
width: 40%;
line-height: 22px;
text-decoration: none;
font-weight: 400;
font-size: 14px;
text-align: center;
color: #666666;
margin-bottom: 24px;
}
.rating {
margin-bottom: 18px;
}
.price {
display: flex;
align-items: center;
font-weight: 900;
font-size: 20px;
color: #666666;
margin-bottom: 20px;
}
.price .add-cart {
background: none;
border: none;
margin-left: 5px;
}
.price .add-cart:focus {
outline: none;
}
@media (max-width: 1000px) {
.product-img {
width: 225px;
height: 180px;
margin-bottom: 28px;
}
.product-name {
width: 80%;
line-height: 20px;
text-decoration: none;
font-weight: 500;
font-size: 18px;
text-align: center;
color: #666666;
margin-bottom: 18px;
}
.product-description {
width: 80%;
line-height: 22px;
text-decoration: none;
font-weight: 400;
font-size: 14px;
text-align: center;
color: #666666;
margin-bottom: 18px;
}
}
`}</style>
</article>
</Page>
);
}
