From the course: Next.js: Creating and Hosting a Full-Stack Site

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Shopping cart improvements

Shopping cart improvements - React.js Tutorial

From the course: Next.js: Creating and Hosting a Full-Stack Site

Start my 1-month free trial Buy for my team

Shopping cart improvements

“

- [Instructor] Alright, so now that we've added a button to our products list to add items to the cart, the next thing that we're going to do is make a few improvements to this experience. The first thing we're going to need to do, of course, is make it so that when we click on this button, it doesn't take us to the product detail page, right? Because the button is inside a link component, Next.js just kind of treats the button as a link as well. So even though it also triggers that add to cart functionality, it takes us to the product detail page, which isn't going to be what we want. And we'll also add some styling to that button and make it so that the button displays the correct text, right? Add to cart or remove from cart, depending on whether that item is actually already in the user's cart or not. So here's what that's going to look like. Let's go back over to our editor here. And first things first, let's go into the products list page. That's where the button is at. And this…

Contents