Product variation setup: Build an E-Commerce Platform

00:18

so we can filter down to the last item in the tree which contains the SKU or stock keeping unit. And that will be the final thing and we spoke about that a little bit in the introduction but we'll go through it here as we're setting up the variations for a product. So we're going to start to make the example product that we've created a little bit more

00:39

useful so we can actually think about this in real terms. So I'm going to go ahead and create out some Nike Air Force Ones here and I'm going to change the slug over so Air Force One and let's just give the same name for the description and just put description in there just to keep things simple.

00:58

And let's go ahead and bump the price up of these a little bit. Okay, so let's save this out and now what we want to do is create out our variations. But let's first of all just grab this and pop this over here and there we go. Great.

01:12

Okay, so the first thing to do is create our variation model. So let's say PHP artisan make model variation and of course create a migration alongside of that. So let's fill out this variations table. Okay, the first thing is it's going to be attached to a product.

01:31

So we're going to need a foreign ID and that's the product ID and we'll constrain this so we have that integrity in the database. The next thing is just going to be the title. So let's go and say string title.

01:47

Now we saw from earlier that the title can be, for example, black, white or 8, 9, 10. If it's a shoe and you're talking about sizes, it's going to be a number. If you're talking about a color of something, it's going to be a string of a color. So that's what the title is going to be.

02:04

And when we start to add this to our cart later, we can piece these together taking the overall product name and then each of the titles from the variation to build up to show the user exactly what they're buying. So let's go down and implement a price.

02:20

We've already looked at pricing and we're going to be using that same money package to implement this. So let's go ahead and make that unsigned and let's add a default in here of zero just so we've got something in there.

02:33

If the price for a variation is zero or we could even make that nullable. We'll go ahead and leave that default zero for now. We could make that nullable. But if it's a null value, we're just assuming that we've not got down to the final variation.

02:47

Now the next one is a little bit trickier and a little bit messier in terms of the database. That's the type. So that's going to be something like color, size, weight, anything like that. Now we're going to add these in and they're going to be a little bit repetitive.

03:03

We could technically create a separate table to hold these kind of types of things. But really what these are for are to group them, particularly when we have our drop down. So that's going to contain things like that just so we know what kind of thing they apply to. So the next thing is just going to be a stock keeping unit.

03:21

So let's just implement an SKU. And again, that's going to be nullable. So that's just the unique product identifier for the variations that we get down to at the end. So the next thing is going to be an parent ID.

03:36

So let's go ahead and create an unsigned big integer and say parent ID because we want these nested down. For example, the first thing that you might want to be able to choose is the color and you might choose black.

03:48

And then underneath that, you're going to have variations of black. So size 10, 11, 12, 13, whatever. So that's just how that's going to work. OK, so that's going to be nullable, of course, because you might have a sort of parent of that.

04:02

And the last thing that we're going to implement is a very simple order. So we know how to order these in the drop down list and overall what we want to show first. So we'll talk about that later.

04:14

And that is pretty much it. Hopefully that makes sense. If it doesn't, as we go through, it should start to. So let's migrate those changes and we can come over to the database and start to play

04:24

around with some variations for our Nike Air Force 1s. So let's go and create our first item here. And that's going to be a color. So we're going to say black.

04:34

We'll just keep this really simple and just implement a couple of colors and a couple of sizes. The price for this is going to be the same. So we could either leave it null or we could just go ahead and fill it in just to be explicit.

04:46

Now, the type of this is going to be color. So we'll leave that in there. The SKU at this point doesn't exist because a black Nike Air Force 1 doesn't really make sense.

04:56

You need to have a final size for this. So the SKU we're going to leave empty. Parent ID is going to be left empty as well. And we're going to set an order of one on this because we want that to be the first

05:07

in the list to show. So the next one is going to be the second color variation, which will be white, same price, same type. And the order can just bump down a little bit.

05:18

And then underneath each of these, we want the sizes. So for black, I want maybe a size eight or nine. So the product ID is going to be the same. We can go ahead and fill that in.

05:29

And this is going to be eight. We are going to again implement the same price. We can always fiddle around with that later. But that's going to be a size now.

05:36

And the SKU is going to be filled because we now know we've got all of the information we need for these variations to give the SKU and purchase the correct product, a black size eight shoe. So the parent ID here is going to be one because that comes under black.

05:52

And the order for this, I'm going to set to let's just set that to one. So it's the top of the list for the sizing. And we can always fiddle around with that later. And just while we're here, let's implement a size nine as well.

06:08

And the SKU is going to be different for that because it's unique. And again, the parent ID is going to be the same under black. So let's do the same thing for white. So we could pretty much just duplicate that eight down and set the SKU slightly different.

06:24

And the parent ID this time is going to be the white shoe. So let's set that to two. And the order again, we'll set to one. And then we'll go ahead and duplicate this down and set a size nine for that white shoe

06:37

and then fill in the SKU. And let's go and set the parent ID to two and set the order here to two. So let's save this out. Hopefully, we've done everything right here.

06:48

And hopefully, that kind of makes sense. Now what we want to do is focus on the relationships. And then we'll just dump some stuff out just to see what everything looks like. So if we come over to the product, of course, we know now that our product has variations.

07:02

So we're going to go ahead and create a variations relationship in here. And this is just a simple has many relationship. We're not implementing any kind of complex relationships of our own here. So we'll go ahead and add that variation just inside of there.

07:16

And now we can pretty much start to dump them out. So let's go over to our template here. Let's just dump these out down here. So I'm going to go ahead and create a div out here.

07:26

Why don't we set a margin top on this just to make it a little bit clearer. And let's go ahead and grab the product variations and just dump them on the page. So again, we're kind of back to what we saw with our categories. We've just got a list of black, white, eight, nine.

07:44

Doesn't really make sense. There's no kind of structure to this. There's no nesting here. So we can't really display anything out here in form because the user just wouldn't know

07:54

what they were choosing. So over on the variation model, let's open this up and use the same trait that we used over on our categories. So that has recursive relationships.

08:07

And let's make sure we pull that in. Now what we can do is start to build up a proper tree of this and see all of that information. So we're going to really roughly do this within our template which is not what we're going to end up doing.

08:20

So let's go ahead and grab out the initial variation. And by variation, what I'm now talking about is the type. So effectively what we want to do is just kind of group by this color and then just display them.

08:34

And that's what we're going to end up adding into our form, having that first drop down. So for our variations, we're going to go ahead and first of all sort these by the order and then we're going to go ahead and group these by the type. Now we're doing this within our template.

08:50

That's not what we're going to end up doing. We're going to have a live wire component to deal with this. So we're just playing around. And then we're going to say first.

08:58

So let's give that a refresh. And you can see here now what we've got is black and white. So that's gone ahead and grouped them two things together by the type color. So that's the first one.

09:08

The ordering has taken effect. So we've got these ordered as one and two. So they're taking effect. And we can even fiddle around with the order because sometimes that's not quite going to

09:16

work. But that's effectively the kind of data we want. This is going to be the initial variation, the color. We can choose that from the drop down.

09:24

And then what we can do is from the product or the variation inside of here, find any children for that particular variation and show them. So as we know, the two children of the black color is eight and nine. And the two children for the white color is eight and nine.

09:43

So that is pretty much what we want to translate into our product drop down. Just before we go and do that, let's get rid of this. In fact, let's leave that in there as a reference. And over in variation, I just want to fill in one relationship here.

09:59

And that is the product because we're going to need to eventually access the base product that this came from. So we're just going to say this belongs to and just pass that product in here just so we don't forget to include that.

10:14

OK. So hopefully that makes sense. We've got the first kind of batch of variations that we want to include in that drop down. Let's get started in the next part on our Livewire component.

Sign up to access "Build an E-Commerce Platform" right now.

Episodes

Transcript

Episode summary

Episode discussion