Creating a Shopping Cart

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.