1. Overview
Challenge & starter files: Advent of JS
Full codes: nilstarbb/advent-of-js/2-eCommerce-component
Live Demo: 02 - E-Commerce Component || Advent of JavaScript
Preview:
2. Details
Users should be able to:
- View the plates on the left side of the screen and add them to your cart on the right side.
- When there are no plates within your cart, you should see a message that says, “Your cart is empty.”
- When a plate is added to your cart, the Subtotal and Totals will automatically update.
- When products are in your cart, you should be able to increase and decrease the quantity.
- A user should not be able to mark the quantity as a negative number.
- If the quantity goes down to 0, the user will have the option to delete or remove the product from their cart entirely.
- Tax is based on the state of Tennessee sales tax: 0.0975
3. Start Coding
Setup templates
练习用的小项目，就不大动干戈搞全套了，还是直接套 CDN 模板。
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="./styles.css" />
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div class="wrapper menu" id="wrapper"></div>
<script type="text/babel" src="./script.js"></script>
</body>
</html>
script 里的 type="text/babel" 比较容易被忽略，如果缺了会导致 Babel 失效报错。
script.js:
const { useState, useEffect } = React;
const App = () => {
return (
<>
...
</>
);
};
ReactDOM.render(<App />, document.getElementById("wrapper"));
Breakdown components
App 的 structure 比较复杂，遂拆分成几个 components。
其中的 MenuItemButton 可以不用特别拆出来，原样放在 MenuItem 里也可以。
const formatPrice = (price) => "$" + (price / 100).toFixed(2);
const MenuItemButton = ({ item }) => {
if (item.count > 0) {
return (
<button className="in-cart">
<img src="images/check.svg" alt="Check" />
In Cart
</button>
);
} else {
return (
<button className="add">
Add to Cart
</button>
);
}
};
const MenuItem = ({ item }) => {
return (
<li>
<div className="plate">
<img src={"images/" + item.image} alt={item.alt} className="plate" />
</div>
<div className="content">
<p className="menu-item">{item.name}</p>
<p className="price">{formatPrice(item.price)}</p>
<MenuItemButton item={item} />
</div>
</li>
);
};
const CartItem = ({ itemInCart }) => {
return (
<li>
<div className="plate">
<img
src={"images/" + itemInCart.image}
alt={itemInCart.alt}
className="plate"
/>
<div className="quantity">{itemInCart.count}</div>
</div>
<div className="content">
<p className="menu-item">{itemInCart.name}</p>
<p className="price">{formatPrice(itemInCart.price)}</p>
</div>
<div className="quantity__wrapper">
<button className="decrease">
<img src="images/chevron.svg" />
</button>
<div className="quantity">{itemInCart.count}</div>
<button className="increase">
<img src="images/chevron.svg" />
</button>
</div>
<div className="subtotal">
{formatPrice(itemInCart.price * itemInCart.count)}
</div>
</li>
);
};
const CartSummary = ({ itemsInCart }) => {
if (itemsInCart.length == 0) {
return <p className="empty">Your cart is empty.</p>;
} else {
return (
<ul className="cart-summary">
{itemsInCart.map((item) => (
<CartItem
itemInCart={item}
key={item.name}
/>
))}
</ul>
);
}
};
const Cart = ({ itemsInCart }) => {
const subtotal = itemsInCart.reduce(
(total, item) => total + item.price * item.count,
0
);
return (
<div className="panel cart">
<h1>Your Cart</h1>
<CartSummary itemsInCart={itemsInCart} />
<div className="totals">
<div className="line-item">
<div className="label">Subtotal:</div>
<div className="amount price subtotal">{formatPrice(subtotal)}</div>
</div>
<div className="line-item">
<div className="label">Tax:</div>
<div className="amount price tax">
{formatPrice(subtotal * 0.0975)}
</div>
</div>
<div className="line-item total">
<div className="label">Total:</div>
<div className="amount price total">
{formatPrice(subtotal * 1.0975)}
</div>
</div>
</div>
</div>
);
};
const App = () => {
const [items, setItems] = useState(menuItems);
const itemsInCart = items.filter((item) => item.count > 0);
return (
<>
<div className="panel">
<h1>To Go Menu</h1>
<ul className="menu">
{items.map((item) => (
<MenuItem
key={item.name}
item={item}
/>
))}
</ul>
</div>
<Cart itemsInCart={itemsInCart} />
</>
);
};
Update the state of an array of objects
这个项目的功能很简单，需要实时更新的数据全部放在 items 里，用一个 useState 处理就可以了。购物车里的 itemsInCart 可以直接用 items 筛选获得。
const App = () => {
const [items, setItems] = useState(menuItems);
const itemsInCart = items.filter((item) => item.count > 0);
...
};
itemsInCart 会根据 item 的 count 实时更新，当 count == 0 时会自动从右侧购物车里消失，因此不用特地为 remove item 编写逻辑，只需要为左侧菜单添加 addItemToCart、右侧购物车添加 increaseItem/decreaseItem，再把它们传递给 child components，绑定 onClick 即可。
const App = () => {
const [items, setItems] = useState(menuItems);
const itemsInCart = items.filter((item) => item.count > 0);
const addItemToCart = (item) => {
const updatedItem = { ...item, count: 1 };
setItems(items.map((i) => (i.name !== item.name ? i : updatedItem)));
};
const increaseItem = (item) => {
const updatedItem = { ...item, count: item.count + 1 };
setItems(items.map((i) => (i.name !== item.name ? i : updatedItem)));
};
const decreaseItem = (item) => {
const updatedItem = { ...item, count: item.count - 1 };
setItems(items.map((i) => (i.name !== item.name ? i : updatedItem)));
};
return (
<>
<div className="panel">
<h1>To Go Menu</h1>
<ul className="menu">
{items.map((item) => (
<MenuItem
key={item.name}
item={item}
addItemToCart={addItemToCart}
/>
))}
</ul>
</div>
<Cart
itemsInCart={itemsInCart}
increaseItem={increaseItem}
decreaseItem={decreaseItem}
/>
</>
);
};
这里使用 map 函数更新 items 的 state。更新 array of objects 的办法不止这一种，不过根据 Redux 官方手册里 Immutable Update Patterns 一章所写，用 map 函数似乎已经是最优解了。