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

let's take a slightly simpler approach to showing the children of a particular variant that's been selected. Now if we just kind of step back a little bit and look at what we're doing here, we're iterating over each of the variations, when we click on one, let's head over to our product drop-down,

we are going ahead and always grabbing the model for the currently selected variation, which is what we see die-dumped out here. Now this is going to have children potentially, so what we can actually do is over in our product drop-down,

perhaps just down here under our select, is dump out the children for the current variation that we've just selected. So let's just try this out. Now because we've created a property here, we can access that directly within our blade template.

So let's just go ahead and dump out selected variation model and just see what we get. So when I choose black, sure enough, if we just get rid of that die-dump, so let's come down here and get rid of that temporarily, and click on that, there we go.

So there's black and there's white. Now inside of this what we can do is grab the children. Now let's go over to our product controller. So let's go over to product, show controller,

and let's do a little bit of eager loading here before we tackle that. So we've already got the product in here, so let's go ahead and do a load on this product, and what we want to load in from the variations that we're iterating through are the children.

So now if we come over to our product drop-down, we'll potentially have an object here which we can grab children from. Remember this selected variation model is going to be null if we haven't selected a variation. So let's choose black and just see what we get, and there we go.

Sure enough, we've now got those two sizes in there, which we can use to show another drop-down. So I think that's going to be a good approach, and then when we do select an item from these,

we can detect whether that's the final version with the SKU, and then we can show the add to cart button. So let's turn this into an if statement, that would kind of make sense. So if we have any children and we can even do a count on that,

then we want to show another drop-down. So let's just see how this handles just with that text in there, and you can see there we go, we're expecting another drop-down. If black didn't have any children and it was the final variation,

we wouldn't want to show that. Okay, so another drop-down is just going to be the same product drop-down component. So we can go ahead and again recursively call this product drop-down component, and for the variations we just want to pass in the selected variation model,

and the children of that. So pretty much what we're checking for here, we're just going to pass directly into there. Now I don't always like doing this,

but I'm going to go ahead and do a sort by on this particular collection by the order again within here, just to keep things a little bit simpler. And really importantly with this, because we are sort of nesting down, we're going to go ahead and add a key to this,

and that's going to be the selected variation. And remember this is an ID, so that's just a single ID here, just so Livewire can properly update the DOM as we go through this. So let's just try this out.

So let's go ahead and choose black, and yeah, there we go. So we're using the same component to show the two options that we have here. Now notice when I select size 8, we don't see another drop-down, because of course we don't have any other children.

But what we can do is now when we select 8, we can have a quick check to see if this has an SKU, emit this up, and then we can show the add to cart button, which when we click on it will add this particular variation to our cart.

We've not got to our cart functionality yet, but effectively this is what we want to add to our cart. We don't want to add the overall product to our cart, because that contains no useful information.

We want to add this item here to our cart. So now that we've got our sort of drop-downs coming down here, we can go over and look at showing our add to cart button when we end up with our final variation.