The first step in doing this is basically aligning the cart where it belongs. We need the cart to be over here and we need to translate it off the screen okay.

So the way we're going to do this is by going to vs code and basically saying hey put this cart at the end of our grid. Okay, let's go to our shop.scss and let's put in not just search-bar and products but also the cart now. In here we will align this properly and then we will get rid of that colon of the semi variety and what we're going to do is we are going to say grid row extends from 1 to -1 and grid column extends from 1 to -1.

Now the way we're going to get it over to the right is by saying align-self is start and justify-self is end. That will put it in the top right of our grid which is going to be right below our nav bar. Let's check it out, see right where it needs to be.

Now what we need to do is we actually need it to be all the way over here. So let's think about this, we have our products and we don't really know the distance between there so what we're going to do is absolutely position it. So let's go to VS code, let's comment this out just in case we want to reuse it for whatever reason.

Let's say position absolute and then we'll say top 100 pixels to put it 100 pixels down because if you remember these are each 50 pixels, we want to put it 100 pixels down. Then what we're going to do is we're going to say right 0 pixels, and then we need to set the... let's save it and see what happens, it's not going to be pretty, it might not even work but we're going to make it work by setting relative position on something else. Okay it works great, that's what we wanted.

Now I don't think this is possible, but I want to see if it's possible to mix CSS grid with absolute positioning, because it needs to be over here but it also needs to be aligned with the search bar here because in the design it's aligned with the search bar. See that,

let's see if we can do that. Let's say grid row is search bar start to -1. Put it after top because that might overwrite it. Okay, see how it didn't work, so what we need to do is find out where that is and put it there. Okay so it's 38 pixels plus 15 pixels so it's going to be 15 pixels down which means we need to set this to be 115 pixels and then get rid of this grid row. The thing is it should be way closer because it's only 15 pixels down, I think it's the grid gap doing that.

See this should be down here, this should only be 15 pixels which means it's probably the grid-gap so let's go to vs code and comment out the grid-gap of the shop. Let's see what this looks like, right, yeah this looks great.

We just need to put the grid-gap below the bar, so what we'll do is go into vs code and instead of saying 57 pixels here we'll just put another column in between the search bar end and products and we'll say 57 pixels. Okay that will give us that gap without throwing us off up here and we can align this properly. Wow, that looks great.

Okay, so what we need to do is we need to basically when we click this somehow make it translate over the width of this right. So let's go ahead and make a css class that does that. Let's go in the shop-cart.scss and let's go to the bottom and let's just say .cart-hidden and what we'll do is say transform translate x minus the width of the cart and the width of the cart if we scroll up is about 520 pixels.

shop-cart.scss

.cart-hidden {
    transform: translateX(-520px);
}

Let's see what this looks like. Now we can't really use it until we add it, so let's go ahead and take this cart hidden and basically what we want to do is say okay when we click this button and this class, when we click it again throw it out. So let's go to shopCart.js and on the actual cart component at the bottom here on shop cart, let's just throw it in after this className after shop cart throw in cart-hidden.

Okay, let's see what's going to happen. All right, it puts that to the left. What we want to do is we want it to go to the right which means we need to go to shop-cart.scss and change this to 520px pixels to push it to the right not pull it to the left. And you'll see that it's gone, which is what we want but what we need is for it to come out when we hit add to cart.

So let's go to add to cart, let's go to our shop product and when we hit this basically what we want to do is remove that class okay. So let's go to vs code and let's go to shopCart.js and what I'm going to do is I'm going to give this div an ID, I'm going to say ID is equal to shop-cart because we're going to use it.

Okay now we're going to have cart hidden on it by default. And then we're going to go into shopProduct.js and in here we're going to make add to cart not a dev but an a tag okay. And then when we hit this a tag we want to hit a function that we're going to write right above our render function that's going to be called addToCart, we'll say handleAddToCart is equal to an arrow function which is then going to basically add cart-hidden and will remove cart-hidden.

So what will say is if... well first we need to get it, so yeah we'll say if document.getElementById and we'll say cart-hidden.classList.includes and we'll say cart-hidden and we don't want to get it by cart-hidden we want to get it by shop-card, that's what the id we just added is. Then what we'll do is we will remove it, so we'll say document.getElementById shop-cart.remove cart-hidden else we will add it, so copy this put it there and change this to add. Okay so get this in, write this function on lines 8 to 14.

shopProduct.js

handleAddToCArt = () => {
    if(document.getElementById('shop-cart').classList.includes('cart-hidden')) {
        document.getElementById('shop-cart').classList.remove('cart-hidden');
    } else {
        document.getElementById('shop-cart').classList.add('cart-hidden');
    }
}

Okay, so get these lines of code in here, we need this and I don't even know if this works but it might work, so we'll see. Okay, now let's go down to a and let's say onClick is equal to an arrow function. So let's say, well we're just going to say this.handleAddToCart.

<a onClick={this.handleAddToCart} className='shop-product__back__add-to-cart'>
    Add to Cart
</a>

So when we click it, it's going to run this arrow function which is going to run this code. Okay, let's try it, let's go to Chrome, let's hit all, let's hit add to cart and you'll see it doesn't work. Let's hit inspect and let's see if it's doing anything. Okay we've got some errors, let's see what those are. It says includes is not a function.

So basically it's not an array, so that's why that's happening, classList is not an array. It is a dom token list, so let's go google search and see if we can do anything with a dom token list, let's check if dom token list contains class.

Oh look, it looks like there's one that is called contains, tokenList.contains token, representing the token. Okay say class contains C the class contains C, so yeah that's exactly what we want to try. Let's say instead of includes let's say contains, let's see if that's effective.

handleAddToCart = () => {
    if(document.getElementById('shop-cart').classList.contains('cart-hidden')) {
        document.getElementById('shop-cart').classList.remove('cart-hidden');
    } else {

I'm going to go to Chrome and I'm going to go back here, and I'm going to go to localhost:3000/shop. Now what we're going to do is hit all, and we're going to hit add to cart, and you'll see it appears and it disappears. That's really awesome that we were able to find this, this is exactly how you should approach coding, you just mess around with things, if it doesn't work you search for a way to do it and usually you can find it.

The reason I thought to search contains is because of swift, because I'm pretty sure there's a method in the swift programming language called contains and I'm pretty sure I've used it for something similar. Anyway, that's kind of how you should approach programming that's a perfect example of how to approach it.

Okay so what we need to do now is we need to go to the X button and basically do the same thing except for remove it, and it's always going to be removing it we never ever want to add it on the X we just want to remove it. So let's go to vs code, and let's copy this entire function and basically I want to see what happens if we put it outside of here, because it shouldn't matter.

Then I'm just going to say handleAddToCart because we're not referencing anything in state we're literally just running pure Javascript. Let's see if this works, looks like we got an error. Let's go back and let's say arrow function and then handleAddToCart, okay let's say function outside of react class, let's see what we can get. Let's see if we got anything in here, okay they're just going off about static whatever.

We'll just go ahead and we will just do what we're doing. We'll include this in here, within our components and then I'll just say this.handleAddToCart and then we'll make it not an arrow function. Okay so let's copy this method and let's go into our shopCart.js. Now in the CartButton, what we want to happen is we want it to hit this function okay. Let's see, I'm trying to think because we still need to add it to the actual cart one.

So let's go ahead and let's go to the CartButton and let's just throw this... what we'll do is we'll pass in a function, so we'll say onClick, then we'll make this an a tag, then we'll say onClick is equal to onClick.

shopCart.js

function CartButton({className, icon, onClick}) {
    return (
        <a onClick={onClick}className={'${className} cart-button'}>
            <i className={icon}/>
        </a>
    )
}

All right, now let's go down here and let's say onClick is equal to this.handleAddToCart then we'll paste it below our componentDidMount and we will try this out.

Okay, hit all, add to cart, hit the x, it goes away. Okay so that's exactly what we want. What we need to do now is we need to throw in the cart button that exists here, remember how in here if you hit the X it's right there.

So we want to do is we want to add that in really quick and then we'll move on. Okay, so I'm going to switch over to fontawesome.com, just to see... we want to get that icon right. We want to get the cart icon so I'm going to go to icons and let's search in cart right. And that looks like a good one, plus, because we're adding to the cart right, so let's go in here and just remember this is fas fa-cart-plus we can remember that or I'll remember it and then we'll type it.

Now what we need to do is go back to our app and we need to go into... and we don't even need to have add in here, but let's just leave it there anyway. Okay let's go into shop.js in our components directory and what we'll do is we'll import something, we'll need to import. The thing is we don't even have access to it right, we don't even have the component in this file. So what we're going to do is we are going to switch back to shopCart.js, we're going to go up here. We're going to take CartButton and make it its own file. So I'm going to cut it out, I'm going to import it so import CartButton from ./cartButton. I'm going to create a new component in our shop directory and call it cartButton.js.

In here we're going to want to import React from react and we'll paste it back in and export it.

cartbutton.js

import React from 'react';

function CartButton({className, icon, onClick}) {
    return (
        <a onClick={onClick} className={`${className} cart-button`}>
            <i className={icon}/>
        </a>
    )
}

export default CartButton;

Okay, we are set there. Let's go ahead and verify that this is still working, and it looks like we have an error, so good thing we checked okay. Wait we don't, it's just that the page hadn't reloaded. Okay now what we need to do is import that into our shop so we can put it up here. So let's go into our application code and let's go to shop.js and we'll import it. So let's import CartButton from './cartButton';.

And in here we will use it, so let's go down here and let's say shop cart button, it looks like we have a comment for it, that's good. And we'll say CartButton className is equal to shop__cart-button and we'll say icon is equal to fas fa-cart-plus. Let's go see if that's the correct icon in font awesome so get that in there, get the import in there. Get cart button, className, and icon in there.

<CartButton classname='shop__cart-button' icon='fas fa-cart-plus'/>

Okay, it looks like it's correct, you don't even have to look because we know it's there.

Now if you remember correctly when we add one of these and we have this the X is centered but for some reason the carts not centered, and that's because we just put the grid directly in toggle, we want to put it directly into the cart styles. So let's go to vs code, let's go to the shop-cart.scss, let's scroll up to toggle it's at the very top around line 12ish.

What we want to do is cut this out and if you do that back in Chrome the X is not going to be centered anymore, just like the cart. So let's go add it to the component styles by going down to cart button and placing those 3 lines in here, display grid, justify-item center, align-item center.

shop-cart.scss

.cart-button {
    background-color: #333;
    color: white;
    font-size: 28px;
    border-radius: 25px 0 0 25px;
    height: 40px;
    width: 76px;

    display: grid;
    justify-items: center;
    align-items: center;
}

All right so that should do it, let's go see it, let's go to Chrome and you'll see they're all centered now which is great.

So one more thing we need to do before moving on is we need it to put this cart button over here on the right, which should be really easy we just have to place it in exactly the same place as our cart and then not transform it to go back okay, and then we need to make it actually do something. So what I'm going to do is close out of shop-cart.scss and I am going to go into shop.scss and I'm gonna say that the cart belongs in the same place as the cart. So what we can do is put a comma after cart and say &__cart-button, okay that should be good. Okay let's go to Chrome and see what happens. Okay, you'll see it's in the same place, it looks like it should be there like the design.

Now what we need to do is make it so when we click it, it will toggle the cart the same way adding does and closing it. We also need to hide it when we do that, I just noticed. So let's go in here and alright, let's go... let's close shop.scss and let's say onClick in the cart button is equal to an arrow function and the arrow function is going to say this.handleAddToCart. So the same exact thing that the shop product's going to do, we have to go get that function now though by going into shopProduct.js and we need to grab this function.

Let's go back to shop.js, let's not make this an arrow function real quick so we want it to just say this.handleAddToCart, this cart button here. And then what we'll do is we'll scroll up here and paste it right below onSubmit and it's going to do the same thing okay.

So let's try this out now, let's hit add that you'll see it comes back close you'll see is no longer there. Now one thing we could do is we could even make this the same button because clearly it's working the same. So like we could really get rid of the X entirely in the cart component and just change the icon but we're not going to do that because we already built it so it doesn't matter, we just need to hide it now.

So let's go into vs code, let's give this cart button an ID of cart-button and what we'll do is we'll go up here and when we remove cart hidden we also want to add cart hidden to the cart button. So document.getElementById cart-button.classList.add card-hidden then we'll remove it when we add the hidden to the cart hidden, so it'll show backup. Right, get that in and let's go to Chrome and let's try it out.

Looks like it doesn't work, let's reload our page it doesn't work. Let's go to vs code and the reason it's not working is because we're saying id but we're not doing anything with that id. So let's go into cartButton.js and let's pull out the id and lets say id is equal to id. Now it's important that we do it like this instead of just putting it in here because we don't want to hide the other one when we open the cart. Let's try this out, there's a chance of getting an error, and look it didn't come back, which clearly is not optimal.

So let's go back to shop.js, okay cart-button.classList.remove cart-button and for some reason it's not working. Oh, it's because we're not... we need to remove it when we close it okay. We also need to add it when... you know what, we don't need to be dealing with all this adding and removing let's just change the z index okay, let's get rid of the id, let's go into cartButton.js, let's get rid of this id, let's get rid of this id, okay, we're back to where we were no id.

What we're going to do now is we are going to go to shop-cart.scss and we are going to say on, where is it? button shop cart. We want to go into shop.scss and in cart, right, so &__cart-button we just want to say z index is -1 or something right, we want to hide it behind everything. So let's go to Chrome now, you should see it because it's the only thing right now. But when we hit this we can't click it because there's something over it right.

So let's change this to not -1 but like 5 and then if we have to we'll change the z index of the other button. See how it appears but it's still over it, we need to change the z index of the toggle button to be 5 or something above 5 so it will appear above it. So we can easily do that by going to vs code and going into shop-cart.scss and going to toggle here on line 21ish, and just saying z index is 6 okay, because it's above 5 so it will appear above that other button. See how it's there now? Click it and it appears and disappears.

Awesome, okay, one more thing I want to add in before this ends and it's really easy so don't worry. We just need to add in a transition, so this animates smoothly. Let's go to VS code and let's add in a transition on the shop cart. It might be in two places, transition all .3s ease so on the .shop-card, let's copy that just in case we need to put it elsewhere, and let's go try it out.

Alright, it transitions really nicely although I don't really like how this button just randomly moves right, we want to see if we can transition that. I don't think they will work with what we're doing with z indexes but we might as well give it a shot. So let's go to vs code, and let's go... let's paste it in toggle and then, well we don't need to paste it in toggle. What we'll do is we'll go to shop.scss and we'll paste it in cart-button, except for we want it to be both.

So what we really want to do is put it in .cart-button in shop-cart.scss. So let's put it in here and see what happens, I don't think it's going to do anything but it's worth a shot, like I really doubt it will do anything. Okay, it doesn't do anything.

All right, so I think that's good enough. We don't really need to worry about that animation, we're more concerned about the data flow, and all that in the front end operation and this looks great anyway. I honestly was planning on not even implementing the cart button, I was planning on just having it so when you hit add to cart it shows it. So good thing we got it and it actually looks better than the design because this animation's kind of weird but in here it just kind of a transitions so that's nice.

Okay, so this is a really long video but we got what we needed. In the next video we will learn how to actually add items to the cart when we hit add the cart instead of just opening it. We want to not only open the cart when we hit it, but we also want to add it to our list, whereas on this cart we only want it to open it.

After that learn how to increment it, and then we will move on to the next page the check out. So let's commit our code and then do that.

Terminal

git status
git add .
git commit -m "cart animations and cart button in shop component"

I'll see you in the next video.

Resources

Source code