Ecommerce development v1 #1
Conversation
feat: show products add to cart and wishlist sort and filter by price and categories responsive design
| <button className="btn btn-primary" onClick={() => navigate("/products")}> | ||
| Shop Now | ||
| </button> |
There was a problem hiding this comment.
Hey Ritika,
Its better if u wrap the btn inside Link and navigate using that.
<Link to="/products"> <button className="btn btn-primary" >
Shop Now
</button></Link>
You can make similar changes in the Login/signup form
| <button | ||
| class="btn btn-link" | ||
| onClick={() => navigate("/password/forgot")} | ||
| > | ||
| Forgot Password? | ||
| </button> |
There was a problem hiding this comment.
Same as below comment for Link on Shop now btn.
| import { EmptyCart } from "./emptyCart"; | ||
|
|
||
| export function Cart() { | ||
| const { data } = useData(); |
There was a problem hiding this comment.
| const { data } = useData(); | |
| const { data: { cartList } } = useData(); |
we can destructure data object here for our ease.
| <div className="container-inside margin-top container-flex-column"> | ||
| <img className="img-md" src={emptyCartImage} alt="Empty cart"/> | ||
| <h1 className="text-colored">Cart is empty!</h1> | ||
| <button className="btn btn-primary" onClick={() => navigate("/products")}>Shop Now</button> |
There was a problem hiding this comment.
Here too, its better to use the Link tag .
| import "./nav-menu.css"; | ||
|
|
||
| export function NavMenu() { | ||
| const { data, dispatch } = useData(); |
There was a problem hiding this comment.
| const { data, dispatch } = useData(); | |
| const { data:{ navToggle }, dispatch } = useData(); |
| <form className="form-box"> | ||
| <h2 class="text-centre">Forgot Password</h2> | ||
| <div className="input-field"> | ||
| <input type="email" className="input-text" id="email" required /> |
There was a problem hiding this comment.
input can be nested inside label and written like
<label>Email:<input/></label>
So that the id can be avoided
|
|
||
| .nav .nav-menu { | ||
| position: absolute; | ||
| height: cal(100vh - 100%); |
src/components/router/router.js
Outdated
| <Routes> | ||
| <Route path="/" element={<Home />} /> | ||
| <Route path="products" element={<Products />} /> | ||
| <Route path="login" element={<Login />} /> |
There was a problem hiding this comment.
A check can be added here so that a logged in user is not able to access /login
| import logo from "../../assets/satik-logo.png"; | ||
|
|
||
| export function Navigation() { | ||
| const { data, dispatch } = useData(); |
There was a problem hiding this comment.
| const { data, dispatch } = useData(); | |
| const { data:{ navToggle,wishList,cartList }, dispatch } = useData(); |
| return productList.sort((a, b) => a.price - b.price); | ||
| else if (sortby === "SORT_PRICE_DESC") | ||
| return productList.sort((a, b) => b.price - a.price); |
There was a problem hiding this comment.
This will mutate the original productList array. To check its effect, u can try doing a Clear Filter btn. Hence we should apply sort on a new array. Here's a way we can do it:
[...productList].sort((a, b) => a.price - b.price);
Plz correct me if I am missing anything !
Development 2 - Integration with backend
No description provided.