install react font awesome
https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react
npm i --save @fortawesome/fontawesome-svg-core
Install react-bootstrap
npm install --save react-bootstrap
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<App />,
document.getElementById('root')
)
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import React from 'react';
import Header from './components/Header';
import Shop from './components/Shop';
function App() {
return (
<div>
<Header></Header>
<Shop></Shop>
</div>
);
}
export default App;
src/components/Header.js
//src/components/Header.js
import React from 'react';
import './Header.css';
const Header = () => {
return (
<div className="header">
<div className="p-3">
<h1>ReactJS Shopping Cart</h1>
</div>
<nav>
<a href="/">Home</a>
<a href="/shop">Shop</a>
<a href="/order">Order</a>
<a href="/profile">profile</a>
</nav>
</div>
);
};
export default Header;
src/components/Header.css
//src/components/Header.css
.header .p-3 h1 {
text-align:center;
}
.header nav{
background-color: #1a6600;
padding: 5px;
line-height: 40px;
font-size: 18px;
}
nav a{
text-decoration: none;
color: white;
margin-right: 20px;
padding: 5px;
}
nav a:hover{
background-color: gray;
}
.search-box{
background-color: #1a6600;
padding: 10px;
}
#search-input{
width: 700px;
padding: 6px;
}
.shipping-card{
font-size: 18px;
color: white;
margin-left: 10px;
cursor: pointer;
}
src/components/Shop.js
//src/components/Shop.js
import React, { useEffect, useState } from 'react';
import JsonData from './Data/data.json';
import Product from './Product/Product';
import Card from './Card/Card';
const Shop = () => {
const [product, setProduct] = useState([]);
const [card, setCard] = useState([]);
useEffect(() => {
setProduct(JsonData);
}, []);
const addProduct = (product) => {
const newCard = [...card, product]
setCard(newCard);
}
return (
<div className="container-fluid d-flex">
<div className="col-lg-9 product-area border-right">
{
product.map(pd => <Product product={pd} addProduct={addProduct}></Product>)
}
</div>
<div className="col-lg-3 card-area">
<Card card={card}></Card>
</div>
</div>
);
};
export default Shop;
src/components/Data/data.json
//src/components/data.json
[{
"id": 1,
"image": "https://images.pexels.com/photos/7606067/pexels-photo-7606067.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"name": "Official Executive Chair Styles and Exclusive For Smart Office",
"price": "50",
"categories": "furniture"
}, {
"id": 2,
"image": "https://images.pexels.com/photos/4440214/pexels-photo-4440214.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"name": "Official Executive Chair Styles and Exclusive For Smart Office",
"price": "200",
"categories": "Bed"
}, {
"id": 3,
"image": "https://images.pexels.com/photos/945688/pexels-photo-945688.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"name": "Official Executive Chair Styles and Exclusive For Smart Office",
"price": "300",
"categories": "Sofa"
}]
src/components/Product/Product.js
//src/components/Product/Product.js
import React from 'react';
import './Product.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
import { Button } from 'react-bootstrap';
const Product = (props) => {
const {name, image, price, categories} = props.product;
return (
<div className="container">
<div className="product-card shadow-sm">
<img className="product-img img-fluid" src={image} alt=""/>
<h5 className="categories">{categories}</h5>
<h5 className="product-title">{name}</h5>
<h5>Price: ${price}</h5>
<Button onClick={() => props.addProduct(props.product)}
className="btn btn-success">
<FontAwesomeIcon icon={faPlus} /> Add to Card</Button>
</div>
</div>
);
};
export default Product;
src/components/Product/Product.css
////src/components/Product/Product.css
.product-img{
height: 200px;
}
.product-card{
width: 260px;
padding: 10px;
border-radius: 4px;
margin: 20px;
float: left;border:1px #1a6600 solid;
}
.categories{
font-size: 14px;
font-weight: 400;
color: gray;
}
.product-title{
font-size: 16px;
color: grey;
}
src/Components/Card/Card.js
//src/Components/Card/Card.js
import React from 'react';
import './Card.css';
import { Button } from 'react-bootstrap';
const Card = (props) => {
const card = props.card;
let total = 0;
for (let i = 0; i < card.length; i++) {
const product = card[i];
total = total + Number(product.price);
}
let shipping = 0;
if(total > 10){
shipping = 0;
}
else if (total > 5) {
shipping = 4.99;
}
else if (total > 0) {
shipping = 12.99;
}
const tax = (total / 10).toFixed(2);
const grandTotal = (total + shipping + Number(tax)).toFixed(2);
return (
<div className="summary-box shadow-sm">
<h4 className="summary-title">Order Summary</h4> <hr/>
<h6>Items Ordered: {card.length}</h6>
<h6>Product Price: ${total}</h6>
<h5><small>Shipping Cost: ${shipping}</small></h5>
<h5><small>Tax + vat: ${tax}</small></h5>
<h5>Total Price: ${grandTotal}</h5>
<Button variant="success mt-2">Product to checkout</Button>
</div>
);
};
export default Card;
src/Components/Card/Card.css
//src/Components/Card/Card.css
.summary-box{
border-radius: 4px;
margin-top: 5px;
position: fixed;
width: 280px;
height: 300px;
padding: 15px;
}
.summary-title{
text-align: center;
color: green;
margin-bottom: 15px;
}
h5{
color: gray;
}
h6{
color: gray;
}
