@fortawesome/free-solid-svg-icons#faCartPlus JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#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: Product.js From clayma-store with MIT License | 4 votes |
|
export default function Product(props) {
const { addToast } = useToasts();
const {addItemTocart}= useContext(GlobalCartContext)
function handleAddToCart(data) {
const newCartItem={
productname: data.productname,
cartItemId: uuidv4(),
id: data.id,
price: data.price,
discount: data.discount,
color: data.color,
size: data.size,
selectedSize:data.size[0],
product_status: data.product_status,
product_stock: data.product_stock,
product_selected_qty:1,
product_image: data.product_image,
brand: data.brand,
product_details: data.product_details
}
addItemTocart(newCartItem);
addToast(data.productname+" successfully added to your cart", { appearance: 'success', autoDismiss: true, })
}
const productLevel = props.data.product_stock;
let bannerStockLevel = "";
let stockLevelMessage = "";
let product_name = props.data.productname.replace(/ /g, "_");
if (productLevel > 0 && productLevel < 100) {
bannerStockLevel = "product-banner-stock-level-low";
stockLevelMessage = `Low stock, only ${productLevel} left.`;
} else if (productLevel === 0) {
bannerStockLevel = "product-banner-stock-level-out-of-stock";
stockLevelMessage = `Out of stock`;
}
return (
<div className="col-lg-3 col-md-4 col-sm-6 col-product-container">
<div className="card-product">
<img
className="card-img-top"
src={require("../assets/products/allproducts/" +
props.data.product_image)}
alt={props.data.product_image}
/>
<div
className={`${
props.data.product_status === "New"
? "product-banner-new"
: "product-banner-trending"
}`}
>
{props.data.product_status}
</div>
<div className={bannerStockLevel}>{stockLevelMessage}</div>
<div className="card-body">
<h2 className="card-title">
{props.data.productname}</h2>
<div className="row">
<div className="col-lg-7 col-md-6 col-sm-6">
{props.data.discount > 0 ? (
<h3>
{" "}
<span className="product-price-after-discount">
{
new Intl.NumberFormat('en-US', {style: 'currency', currency:'ZAR'}).format( props.data.price - (props.data.price * props.data.discount / 100)
)
}
</span>{" "}
<span className="product-price-before-discount">
{" "}
{
new Intl.NumberFormat('en-US', {style: 'currency', currency:'ZAR'}).format( props.data.price)
}
</span>{" "}
<span className="product-discount-rate">
-{props.data.discount}%{" "}
</span>
</h3>
) : (
<h3>
{" "}
<span className="product-price-whit-no-discount">
{
new Intl.NumberFormat('en-US', {style: 'currency', currency:'ZAR'}).format( props.data.price)
}
</span>
</h3>
)}
</div>
<div className="col-lg-5 col-md-6 col-sm-6 ">
<div className="card-product-action-icons">
{props.data.product_stock >=1 ?
<span
name="id"
value={props.data.id}
className="card-product-action-cart-icon add-to-cart-icon"
onClick={ () => handleAddToCart(props.data)}
>
<FontAwesomeIcon
icon={faCartPlus}
/>
</span>
:""}
<span>
<a
href={`/catalog/item/${props.data.id}/${product_name}/view`}
className="card-product-action-cart-icon"
>
<FontAwesomeIcon icon={faSearchPlus} />
</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
Example #2
| Source File: ProductDetails.js From clayma-store with MIT License | 4 votes |
|
export default function ProductDetails(props) {
// const {action} =props;
// let product_display_mode="action_view";
//TODO
// switch(action){
// case "edit":
// product_display_mode="action_edit";
// break;
// default:
// product_display_mode="action_view";
// }
const { addToast } = useToasts();
const [prod_quantity,setProd_quantity]=useState(1)
const [prod_selected_size,setProd_prod_selected_size]=useState("")
let ProductDetails;
let productDescription = [];
let productSize = [];
props.product.map((product) => (ProductDetails = product));
productDescription = ProductDetails.product_details;
productSize = ProductDetails.size;
const productStockLevel = ProductDetails.product_stock;
let bannerStockLevel = "";
let stockLevelMessage = "";
if (productStockLevel > 0 && productStockLevel < 100) {
bannerStockLevel = "product-details-banner-stock-level-low";
stockLevelMessage = `Low stock, only ${productStockLevel} left.`;
} else if (productStockLevel === 0) {
bannerStockLevel = "product-details-banner-stock-level-out-of-stock";
stockLevelMessage = `Out of stock`;
}
const {addItemTocart}= useContext(GlobalCartContext)
function handleAddToCart(data) {
//alert(data.productname+" Added to cart");
const newCartItem={
productname: data.productname,
id: data.id,
price: data.price,
discount: data.discount,
color: data.color,
size: data.size,
selectedSize: prod_selected_size,
product_status: data.product_status,
product_stock: data.product_stock,
product_selected_qty:prod_quantity,
product_image: data.product_image,
brand: data.brand,
product_details: data.product_details,
}
addItemTocart(newCartItem);
addToast(data.productname+" has been saved for later shopping", { appearance: 'success', autoDismiss: true, })
}
function handleChange(event) {
setProd_quantity(event.target.value)
//console.log(event.target.value)
}
function handleChangeSize(event) {
setProd_prod_selected_size(event.target.value)
//console.log(event.target.value)
}
const description = productDescription.map((desc) => (
<h5 key={desc}>
<FontAwesomeIcon
icon={faCheckCircle}
className="product-description-icons"
></FontAwesomeIcon>
{desc}
</h5>
));
const product_size = productSize.map((size) => (
<option value={size} key={size}> {size}</option>
));
return (
<div className="container-product-details">
<div className="row">
<div className="col-lg-7">
<img
className="card-img-top"
src={require("../assets/products/allproducts/" +
ProductDetails.product_image)}
alt={ProductDetails.product_image}
/>
<div
className={`${
ProductDetails.product_status === "New"
? "product-details-banner-new"
: "product-banner-trending"
}`}
>
{ProductDetails.product_status}
</div>
<div className={bannerStockLevel}>{stockLevelMessage}</div>
</div>
<div className="col-lg-5">
<h1>{ProductDetails.productname}</h1>
{ProductDetails.discount > 0 ? (
<h2>
<span className="product-price-after-discount">
{
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "ZAR",
}).format(
ProductDetails.price -
(ProductDetails.price * ProductDetails.discount / 100)
)
// Math.round(ProductDetails.price - (ProductDetails.price*ProductDetails.discount/100))
}
</span>{" "}
<span className="product-price-before-discount">
{new Intl.NumberFormat("en-US", {
style: "currency",
currency: "ZAR",
}).format(ProductDetails.price)}
</span>{" "}
<span className="product-discount-rate">
-{ProductDetails.discount}%{" "}
</span>
</h2>
) : (
<h2>
{" "}
<span className="product-price-whit-no-discount">
{new Intl.NumberFormat("en-US", {
style: "currency",
currency: "ZAR",
}).format(ProductDetails.price)}
</span>
</h2>
)}
{/* <h2> R{ProductDetails.price} <span> R{ProductDetails.price}</span> <span> 50</span></h2> */}
<h3>Brand: {ProductDetails.brand}</h3>
<h3>Color: {ProductDetails.color}</h3>
<h3>Size:</h3>
<select
className="form-control product-size-option"
name="size-product"
id="size-product"
value={prod_selected_size} onChange={handleChangeSize}
>
{product_size}
</select>
{/* <div className="mb-4 mt-4">{product_size}</div> */}
<h3>QTY:</h3>
<select
className="form-control product-size-option"
value={prod_quantity} onChange={handleChange}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<h3>Product Details:</h3>
<div className="mb-4 mt-4">{description}</div>
<div className="row product-details-services">
<div className="col-lg-4">
<FontAwesomeIcon
icon={faPlaneDeparture}
className="product-details-services-icons"
/>
<h4>SHIPS WITHIN HOURS</h4>
</div>
<div className="col-lg-4">
<FontAwesomeIcon
icon={faRedoAlt}
className="product-details-services-icons"
/>
<h4>EASY RETRUNS</h4>
</div>
<div className="col-lg-4">
<FontAwesomeIcon
icon={faCommentDots}
className="product-details-services-icons"
/>
<h4>24/7 CUSTOMER SERVICE</h4>
</div>
</div>
{/* {
product_display_mode ==="action_edit"
?
<h2> Editing product </h2>
:
<h2> Viewing product </h2>
}
*/}
{productStockLevel === 0 ? (
<h2 className="out-of-stock-notice">
<FontAwesomeIcon icon={faChartBar} /> Out of Stock
</h2>
) : (
<button className="product-btn-add-to-cart shadow-none "
onClick={ () => handleAddToCart(ProductDetails)}
>
<FontAwesomeIcon
icon={faCartPlus}
className="product-btn-add-to-cart-icon"
/>
Add to Cart
</button>
)}
</div>
</div>
</div>
);
}
Example #3
| Source File: UpdateCartItem.js From clayma-store with MIT License | 4 votes |
|
export default function UpdateCartItem(props) {
const { addToast } = useToasts();
const [prod_quantity,setProd_quantity]=useState(1)
const [prod_selected_size,setProd_prod_selected_size]=useState("")
let ProductDetails;
let productDescription = [];
let productSize = [];
props.product.map((product) => (ProductDetails = product));
productDescription = ProductDetails.product_details;
productSize = ProductDetails.size;
const productStockLevel = ProductDetails.product_stock;
let bannerStockLevel = "";
let stockLevelMessage = "";
if (productStockLevel > 0 && productStockLevel < 100) {
bannerStockLevel = "product-details-banner-stock-level-low";
stockLevelMessage = `Low stock, only ${productStockLevel} left.`;
} else if (productStockLevel === 0) {
bannerStockLevel = "product-details-banner-stock-level-out-of-stock";
stockLevelMessage = `Out of stock`;
}
const {addItemTocart}= useContext(GlobalCartContext)
function handleAddToCart(data) {
//alert(data.productname+" Added to cart");
const newCartItem={
productname: data.productname,
id: data.id,
price: data.price,
discount: data.discount,
color: data.color,
size: data.size,
selectedSize: prod_selected_size,
product_status: data.product_status,
product_stock: data.product_stock,
product_selected_qty:prod_quantity,
product_image: data.product_image,
brand: data.brand,
product_details: data.product_details,
}
addItemTocart(newCartItem);
addToast(data.productname+" has been saved for later shopping", { appearance: 'success', autoDismiss: true, })
}
function handleChange(event) {
setProd_quantity(event.target.value)
//console.log(event.target.value)
}
function handleChangeSize(event) {
setProd_prod_selected_size(event.target.value)
//console.log(event.target.value)
}
const description = productDescription.map((desc) => (
<h5 key={desc}>
<FontAwesomeIcon
icon={faCheckCircle}
className="product-description-icons"
></FontAwesomeIcon>
{desc}
</h5>
));
const product_size = productSize.map((size) => (
<option value={size} key={size}> {size}</option>
));
return (
<div className="container-product-details">
<div className="row">
<div className="col-lg-7">
<img
className="card-img-top"
src={require("../assets/products/allproducts/" +
ProductDetails.product_image)}
alt={ProductDetails.product_image}
/>
<div
className={`${
ProductDetails.product_status === "New"
? "product-details-banner-new"
: "product-banner-trending"
}`}
>
{ProductDetails.product_status}
</div>
<div className={bannerStockLevel}>{stockLevelMessage}</div>
</div>
<div className="col-lg-5">
<h1>{ProductDetails.productname}</h1>
{ProductDetails.discount > 0 ? (
<h2>
<span className="product-price-after-discount">
{
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "ZAR",
}).format(
ProductDetails.price -
(ProductDetails.price * ProductDetails.discount / 100)
)
// Math.round(ProductDetails.price - (ProductDetails.price*ProductDetails.discount/100))
}
</span>{" "}
<span className="product-price-before-discount">
{new Intl.NumberFormat("en-US", {
style: "currency",
currency: "ZAR",
}).format(ProductDetails.price)}
</span>{" "}
<span className="product-discount-rate">
-{ProductDetails.discount}%{" "}
</span>
</h2>
) : (
<h2>
{" "}
<span className="product-price-whit-no-discount">
{new Intl.NumberFormat("en-US", {
style: "currency",
currency: "ZAR",
}).format(ProductDetails.price)}
</span>
</h2>
)}
{/* <h2> R{ProductDetails.price} <span> R{ProductDetails.price}</span> <span> 50</span></h2> */}
<h3>Brand: {ProductDetails.brand}</h3>
<h3>Color: {ProductDetails.color}</h3>
<h3>Size:</h3>
<select
className="form-control product-size-option"
name="size-product"
id="size-product"
value={prod_selected_size} onChange={handleChangeSize}
>
{product_size}
</select>
{/* <div className="mb-4 mt-4">{product_size}</div> */}
<h3>QTY:</h3>
<select
className="form-control product-size-option"
value={prod_quantity} onChange={handleChange}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<h3>Product Details:</h3>
<div className="mb-4 mt-4">{description}</div>
<div className="row product-details-services">
<div className="col-lg-4">
<FontAwesomeIcon
icon={faPlaneDeparture}
className="product-details-services-icons"
/>
<h4>SHIPS WITHIN HOURS</h4>
</div>
<div className="col-lg-4">
<FontAwesomeIcon
icon={faRedoAlt}
className="product-details-services-icons"
/>
<h4>EASY RETRUNS</h4>
</div>
<div className="col-lg-4">
<FontAwesomeIcon
icon={faCommentDots}
className="product-details-services-icons"
/>
<h4>24/7 CUSTOMER SERVICE</h4>
</div>
</div>
{productStockLevel === 0 ? (
<h2 className="out-of-stock-notice">
<FontAwesomeIcon icon={faChartBar} /> Out of Stock
</h2>
) : (
<button className="product-btn-add-to-cart shadow-none "
onClick={ () => handleAddToCart(ProductDetails)}
>
<FontAwesomeIcon
icon={faCartPlus}
className="product-btn-add-to-cart-icon"
/>
Update Cart
</button>
)}
</div>
</div>
</div>
);
}
