Create a Checkout Page in Next.js that Displays Cart Contents
A cart isn't very useful if we don't have a check out page to actually purchase products at. While we aren't setting up payment process just yet, this lesson will set us up by looping over products in our cart and displaying them in a list.
Shadid Haque: [0:00] When we click on the cart, it should take us to a checkout page. Let's go ahead and build this checkout page. Let's go to our cart.tsx file. Here, we're going to import useContext from React and Context from the context file.
[0:20] Inside the Cart component itself, let's destructure state and dispatch from useContext. Next, we destructure cart from state. Next, we're going to calculate the total amount for the cart. We are going to loop over every element of the cart. For each item in the cart, it's going to be price*qty. Then, we add all of them up to get our total amount.
[0:54] Next, we are going to loop over every item in the cart and render them on the page. We're going to create a container div, give it flex and some padding. Next, we add a ul tag with some basic margin and a divider.
[1:14] We're going to loop over each entry of the cart object and return a list element. I already have some pre-written code for the list. I'm just going to paste this HTML here.
[1:38] Let's go back and add couple more items in the cart again. Now, when we go back to our cart, we can see all the items popping up. Finally, at the bottom, I'm just going to add a Checkout button. You can find all this pre-written HTML with the lesson notes.