Adding "Add to Cart" Button in the Description Page

[00:00 - 00:06] Our basket feature is working pretty well now. We can also add the Add to Cart functionality in our description page.

[00:07 - 00:12] There's nothing new we will do for this. You can actually take this as a challenge.

[00:13 - 00:21] Try implementing the Add to Cart feature in our description page and see if you can do it. Pause the video and try to do it.

[00:22 - 00:29] Alright, I hope you have tried to implement Add to Cart functionality in our description page. But let's do it right now.

[00:30 - 00:47] First of all, let me close everything and go to the description page. First of all, we will import basket from our use store context.

[00:48 - 01:05] Also, let's import set basket as well because we are going to make a request to add the item to the basket. We have made an Add to Cart function in our showCostes function.

[01:06 - 01:12] So what we can do is go there and just copy it. So here Add to Cart function.

[01:13 - 01:22] This one we need exactly the same. So we will go there, copy it and paste it here.

[01:23 - 01:30] Let's style the page now. Inside the sidebar box button, we can have two buttons actually.

[01:31 - 01:45] One for Book now and another one which will say Add to Cart. So I can create a new div, paste it on top and it will be called button_on_disc o.

[01:46 - 02:01] Add to Cart and this will say Add to Cart with a single T of course. We also want to check if the course is in the cart already.

[02:02 - 02:11] So we will use the find method again which we did inside showCostes component. So we can simply go there again and see where we did use it and here.

[02:12 - 02:25] So let me copy it and paste it above Add to Cart function. This time too the logic is same if it is undefined.

[02:26 - 02:47] We will use link which will take the user to the cart and we will say go to cart otherwise it will say Add to Cart. So what I will do is use a colon and copy this part and paste it with a curly bracket.

[02:48 - 03:16] Now let me give a question mark to this ID and if this is not undefined, we would rather say go to cart and we can also wrap this with a link tag so that the user can click on it and go to the cart. So let me write link, cut it from here and paste it.

[03:17 - 03:30] Also we will give it a two property which will take you which will take user to the checkout page. Let me import link from react out of DOM.

[03:31 - 03:52] And inside this div we want the user to click on it and they can add this item to the basket. So what I will do is use an on click event which we will call Add to Cart function and it will pass cause.id and honestly we don't actually need this div.

[03:53 - 04:13] So what we can do is take this class and give it to the link and get rid of the div part. Now I have provided you another file which is description.sas that is about the designing of the Add to Cart button in our description page.

[04:14 - 04:28] Simply copy the description code from the code below and let's go to the description.sas file. And where you see the existing button code simply get rid of this and paste the new code that I have provided.

[04:29 - 04:34] Now let's check if it's working as expected. Open the browser.

[04:35 - 04:48] Let's go to any description page and here we see the Add to Cart and book now. Now what I will do is click on Add to Cart and we see the count is updating and also we see go to Cart.

[04:49 - 04:58] If we click on here or it's going to the checkout page and it should rather be the basket. So let's go back to the code and an inside description page.

[04:59 - 05:07] This should go to the basket. Let's check it now.

[05:08 - 05:15] Let's go back and click on go to Cart and now we see the basket page. So far so good.

[05:16 - 05:16] Well this is it for this section.