Building the Cart Product Component
All right, welcome back. Let's get started with the actual cart product component.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Now all this time we've been putting all these components in the same exact file. Since these ones a little bit more involved, I want to go into shop and create a new component and call it shopCartProduct or rather let's just call it cartProduct.js.

In here we want to import React and component from React. We want to say class cart product extends Component and we'll pass in a render function and return a div with a class name of cart-product and then let's modify this to actually have these braces and a dollar sign with className in it. And then let's say cart-product and then at the bottom will export it. Okay so pretty basic stuff, just what we've been doing this entire time we want the className and we're going to go.

cartProduct.js

import React, { Component } from 'react';

class CartProduct extends Component {
    render() {
        const { className } = this.props;
        return (
            <div className={'${className} cart-product'}>

            </div>
        )
    }
}

export default CartProduct;

All right so that's great. Now we have this but we don't really know what's inside of it right. We need to look at the design to do that. So get this in there, all right, import React, the class, the render function, and the return with our className, and the export. Get this all in here and then what we need to do is we need to throw in an image, so let's say div className is equal to cart-product__image and let's make it an image obviously not a div. Now we need to do is we need to say source is equal to http://via.placeholder.com/130x130.

<div className={'${className} cart-product'}>
    <img className='cart-product__image' src='http://via.placeholder.com/130x130'/>

</div>

Okay now, let's go look at our design and just make sure that's the correct size and then let's get the rest of our attributes. Okay, 130 by 130, and then we have the title, okay so let's throw the title in. Let's say div and then we'll pass in title and then we'll take that in as a prop and then we'll say className is equal to cart-product__title. Now what we need to do is we need to pass in the quantity component okay, remember the quantity component?

Let's go ahead and do that and let's import it, so import quantity from ../quantity. Now let's pass in className we know it has that, but we kind of forgot everything else that's in this component or at least I did. So let's command-click into quantity and verify what it is. Okay, quantity is the only one, so let's have it take in a quantity of let's say quantity, and then we'll take that in as a prop okay.

So that's what we've got there, now what we need is we need this remove button and then the price. So really that's about it, so let's go in here and let's say div and we'll say className is equal to cart-product__remove then we'll just say remove and let's make it an a-tag. So it has the underline or has the ability to have the underline, and it's a button okay. Then let's say that we have the green price tag, remember that component? So import green price tag from ../greenPriceTag.

And this just needs to take in a price I believe, and let's just say price and then let's take this in from props okay so price.

Now let's go reference greenPriceTag component just to see what's in there all right. And we also need a class so let's say className is equal to cart-product__price and then yeah just make sure you have all of this in here. Okay, so we got the image, we've got the title, we've got the quantity, we've got the removed button, we've got the price.

cartProduct.js

import React, { Componet } from 'react';
inport Quantity from '../quantity';
import GreenPriceTag from '../greenPriceTag';

class CartProduct extends Component {
    render() {
        const { className, title, quantity, price } = this.props;
        return (
            <div className={`${className} cart-product`}>
                <img className='cart-product__image' src='http://via.placeholder.com/130x130'/>
                <div className='cart-product__title'>{title}</div>
                <Quantity className='cart-product__quantity' quantity={quantity}/>
                <a className='cart-product__remove'>Remove</a>
                <GreenPriceTag className='cart-product__price' title={price}/>
            </div>
        )
    }
}

export default CartProduct;

Okay, pretty straight forward but obviously you need to write it in so I'm not saying that if you're going slow that's a bad thing, you're just learning it so that's expected. All right, let's go into greenPriceTag.js, okay it takes in the className in the title, okay we called it a title. So we don't want to say price we want it to say title, there we go. Okay, so that's all set, let's go ahead and let's look at the model of it, because if we try to use this it isn't really going to work because we need a title a quantity and a price at least those three properties.

So let's try using it and throw in some dummy data for these okay so title, quantity, and price in our shopCart.js content component okay so we're the content and the content is up here. So we need to basically return it in here instead of an h1 right, instead of an h1 we need to return the card product so let's import it. Let's say import CartProduct from ../cartProduct. Now it basically replaces H1 with CartProduct and then this part is important that you pay attention.

We need to basically pass the data in a different way, we don't want to wrap it like that. Notice how I deleted this right, notice how I deleted CartProduct and this product part? Delete that and what we need to do is we need to put a / right here to close it off. So this might be a little confusing but just get this line in here the way it is on my screen right now. Okay, so we've got let productsJSX is equal to products.map and then in there we just have product and then an arrow function that just has a CartProduct and it closes off kind of the same way we're kind of closing this off right, this cart footer.

let productsJSX = products.map(product => <CartProduct key={product}/>);

So what we need to do now is pass in a className while we don't need to now. Let's not even worry about passing in a className right now because we're in all likelihood not going to mention because we don't really need to place it anywhere specific on the grid, we just need to give it global styles right. Now if we try to do this it's either going to not work or it's going to display no data because we're not passing in the title, quantity, or price. So let's look in chrome and see how this is working. All right sweet, it works at least but we have 17 errors.

large

Okay, and that's because we have 17 items with the same key for some reason. Oh it's because we have so many items and we just copied and pasted it and set the key as the number right and the key is the same for a lot of these products right. So go down to here and you'll see how these are our products and we're basically, we have a bunch of duplicates in here and we're putting the key in as that number and it's saying hey these are the same across a lot of components, so that's all those errors are. Anyway, it's an error nonetheless.

Okay, so really nice how we already have the dollar sign in there that's green and we have the quantity component. So really awesome and we made how it's reusable and all that junk right. So what we need to do is we need to actually discuss the model that belongs in here.

Now if you remember back to the normal product component, it's the same exact model except for we need a quantity okay. So it's really a different model because the user is going to have products in their cart okay. They're going to have cart products they're not going to have products, they're going to have cart products because remember in the design, see how it's one product but it can have multiple amounts right.

large

So we want to be able to add a cart product into their cart that has a reference to the product but then it also has an amount of that product okay, so we can calculate how much they want of that product. So what we need to do is we need to commit our code and then handle that all in the next video because that can get really confusing and complicated quickly and it's going to be a bit of a long video. So I want to separate it and start that in the next guide.

So let's go to our application and let's commit our code.

Terminal

git status
git add .
git commit -m "built the cart product component"

Okay, I'll see you in the next video.

Resources

Source code