Creating a Shopping Cart
Learn how to create a shopping cart for the bookshop application.
A shopping cart is used to display the list of items selected by a user and the price associated with each item. The cart will be placed in a global state so that it can be accessed anywhere in the component tree. One way to make the state global in React is by using React context.
Shopping context
Open the imports/context/ShoppingContext.jsx
file. We’ll create a global state using React context. On line 3, we define a ShoppingContext
. To use the ShoppingContext
, we define a function that we’ll call ShoppingProvider
.
The ShoppingProvider
function uses a React state called cart and a function called setCart
that changes the state. On line 7, we save an object with the {cart, setCart}
keys to a variable named value
.
The function returns a ShoppingContext.Provider
component with the value
prop passed to it on line 9. The ShoppngContext.Provider
component wraps and returns the children prop that’s passed to the ShoppingProvider
function.
Use shopping context
On line 15, we define a useCart
function that returns the value stored in the context. Inside this function, we retrieve the ShoppingContext
on line 16 by using React.useContext
. If we don’t have context on line 17, it means that we forgot to wrap our application with a Provider
. The useCart
function returns the context on line 20. On line 23, we export the ShoppingProvider
and useCart
functions from the file.
Wrapping the application with a Provider
Open the imports/ui/App.jsx
file. On line 18, we import and extract our ShoppingProvider
from the context file, and on line 57, we wrap the components.
<ShoppingProvider>
//any component place here is refer to
//as the children
</ShoppingProvider>
Creating a cart
Open the imports/ui/BookShop.jsx
file. This is the component that displays the list of books and their details. On line 5, we import and extract the useCart
from the ShoppingContext
. On line 8, we destructure cart and setCart
from the useCart
function. The cart
is an array, while setCart
is the function that manipulates the cart
array.
Clicking the “Add to Cart” button runs a function called addItemToCart
defined on lines 18–34. The function accepts the item we want to add to the cart as an input.
On line 20, we use the Array.find
method to check if the item is already saved in the cart
. If the item is already saved, we run the map
function over the cart
, and we increment the value of that item that’s already inside the cart
.
If the item isn’t already present in the cart
, we put the item inside the cart
by returning a new array, appending the item, and increasing its quantity by 1
.
Note: item here means book
Displaying items on a cart
Open the imports/ui/ShoppingCart.jsx
file. This file displays the items in the cart. The cart
is an array of objects.
const = {
authors,
coverImage,
price,
quantity,
title,
bookUrl,
_id
}
On line 66, we map
through the cart
array and display each object present inside. The displayed book has a coverImage
, which is a base64
string displayed on lines 81–85. The quantity
is displayed in a text input with “-” and “+” buttons that increase and decrease the quantity of the book.
We also have a button to remove the book from the cart. The cart
can be accessed by clicking the navigation bar. The number of items in the cart is displayed in the navigation bar.
The removeItemFromCart
function removes the book from the cart. The cart
is an array, and we use the filter
methods of arrays to remove a book from the cart.
This function is defined on lines 12–15.
On lines 18–25, we define an increaseItemQuantity
function. This function maps over the cart
items and increments the quantity of a book by one.
A cart should have a way to add all items inside it. We define a general function called sumItems
on line 5. This function accepts a cart
array and uses its reduce
method to add up the quantity
and price
of the product and return a single value.
We have a display summary of the cart that lists the length of books in the cart and uses the sumItems
function to total the amount that the user owes for the books inside the cart. On line 191, a shipping fee of two dollars is added to the total amount of books.
Task
Click the “Run” button to start the application. Log in as an admin, and save books into the system. Click on the “Add to Cart” button to add a book to the cart.
Get hands-on with 1200+ tech skills courses.