This video is available to students only

Adding "Add to Cart" Button in the Description Page

In this lesson, we're going to include "Add to cart" button in the description page

Adding Add to Cart button in the description page#

Our basket feature is working pretty well now. We can also add the add to cart functionality in our description page. There's nothing new we will do for this. Actually, you can actually take this as a challenge; try implementing the add to cart feature in our description page and see if you can do it. Pause here and try to do it.

Alright. I hope you have tried to implement Add to Cart functionality in our description page. If not, let's do it right now. Let's go to our description page first of all, and import basket and setBasket from useContextStore. We can copy the addToCart function from ShowCourses function and paste it inside the Description page.

Let's style the page now. Inside sidebar box button, we can have two buttons; one for "book now" and another one which will say "add to cart". So I can create a new div with classname button cart which will say "Add to cart". We also want to check if the course is in the cart already, so we will use the find method again which we did inside showCourses component. We can go there and copy that; this time too, the logic will be same. If it's undefined, we will use Link which will take the user to cart and will say "Go to cart"; otherwise, it will say "Add to cart". It will take an onClick event handler which will call the addToCart function.

Start a new discussion. All notification go to the author.