Showing variation specifics: Build an E-Commerce Platform

00:04

just because as we start to introduce this, our query count for this page is going to creep up. And we're actually going to end up with an n plus 1 problem. And we already actually have that

00:14

because we are already accessing a relationship on this variation. So let's fill this in. We'll check out our PHP debug bar

00:22

just to see how many queries we're running. And we'll go ahead and add in some eager loading to our cart to make sure that all of the information we need for all of our variations is included by default.

00:33

Okay, so for our variation ancestors, what we want to do is iterate over each of the ancestors of our variation. Now for that, if we just head over to our variation model,

00:46

we don't have a relationship for this, but we do have our has recursive relationships trait from the adjacency list package. And from this, we can grab all of the ancestors.

00:56

So what came before this for each of the variations? So let's say for each variation, ancestors and self, because remember what we want to do is show the variation we've added by its title,

01:09

which we know is A. But then before that, we want to show that it's white. And then you might have say 10 different variations leading up to that.

01:17

So we want to show each of these out. So we're just going to call that ancestor. And let's just output the ancestor. Okay, that's really annoying.

01:28

Title, just to see what happens here. Okay, so yeah, we've done an end for, so let's say end for each. And there we go.

01:38

So we've got eight and white, great. So this is working really, really nicely. Now for this, we want to style this up a little bit. So we're going to say ancestor title,

01:49

and then we're going to add an if statement in here. Now within a for each loop, within blade, we have access to this special loop object, which will tell us if something is the first item,

01:59

the last item, and there's loads of other different properties on this. So if this is not the last item, then we want to show some sort of slash in here

02:07

to separate each of the variations out. Let's go ahead and end that if statement just there. Let's just check this out first of all. There we go, so we've got a slash in between here.

02:16

This could be done with CSS, it doesn't really matter. But essentially, we don't want to show a slash at the end of the last variation. If we didn't include that,

02:24

we would end up with the following. So we'd have to sort of get rid of that somehow. But this is a nice, convenient way to display things only when it's not the last item.

02:34

So in this case, let's just go ahead and style this up. So let's wrap this with a span, and we'll just say text gray 400, and we'll set a margin on the X axis to one,

02:46

just to space that out a little bit. So now we've got all of the information about this particular variation. Now, you might want to go ahead

02:54

and change this up a little bit. So you might want to say reverse, for example, and that will reverse the order of these. It's entirely up to you.

03:01

I'm just going to leave this as it is at the moment, but feel free to change that around. It's just a Laravel collection this, so you can just do anything you want with it

03:10

to display this out. Okay, so we've got our variations being shown, we've got the product title being shown, we've got all of the information that we need.

03:17

Let's check out our query count. So we've got 12 queries on this page, which to me seems a little bit too high. So if we just come down,

03:24

we've got a couple of duplications or a few duplications in here. Most of all, this common table expression, which comes from the ancestors that we're accessing.

03:33

So we need to eager load in all of this data from our cart in some place. That is going to be over on our overall cart object. So let's just think about what we're doing here

03:44

in the contents method, which we're using to output all of these variations. We're grabbing the instance, which is cached, so that's fine.

03:52

We're not creating in too many queries here, but we're accessing the variations on that instance. So down in our instance here, we are just looking this up by the UUID

04:01

and grabbing the first cart. So it's at this point that we want to start to eager load stuff in. So this is going to get quite long.

04:08

So what I'm going to do is I'm actually going to use the query method on our cart model, just so I can neatly pull that down

04:17

and neatly pull this down. Now what we can do is use with to eager load in the data for the variations that we need to do. So bear in mind,

04:25

we've only got two items in our cart at the moment. So the N plus one problem that we've got isn't too bad, but for this, we want to load in the product for each of the variations,

04:34

because remember over in cart item, we're first of all accessing the product for that variation. So that's the first thing that we want to eager load in. Let's go over and give that a refresh.

04:44

Sure enough, you can see the queries that have bumped down to 11. Now that doesn't seem a lot, but the more items we add to the cart,

04:50

the more these queries are going to bump up. So this will keep that now a fixed query for all of the products that we want to access. Now we also want to load in our ancestors and self.

05:02

So let's go ahead and say variations, ancestors and self. And let's go over and have a look at this. That's bumped that down again.

05:13

So once again, we're not going to be accessing too many relationships on that. Now we're also accessing media for each of these, which is performing a lookup in the media table.

05:24

So the next sensible thing would be to eager load in the media for each of them variations. Let's give that a refresh and we are down to nine queries. For these common table expressions,

05:33

I don't know if we're going to be able to get around this just yet. Let's leave this as it is. I'm going to go ahead and remove one of these items

05:39

just to see where our query count is. The most important thing is that we don't have an N plus one problem. Because if we have 10 items in the cart,

05:47

we're just going to be executing way too many queries. So let's get rid of the cart variation here and come over and give that a refresh. And yeah, we're down to seven.

05:55

So it looks like the, if we just come down here, yeah, it looks like these are being duplicated a little bit more. The stocks are also being duplicated as well.

06:04

So yeah, we really need to sort this out. Let's go over and just re-add that item back into the cart. So same cart, different variation. And let's figure out what we can do here.

06:16

So for the stock specifically, we've got two items back in our cart. If we just head over to the variation model and under stock count, we're using descendants and self.

06:26

So that is where that issue is coming into. So let's go ahead and say variations, descendants and self. And I'm just going to start to pull these down a little bit. Can always pass an array in here,

06:37

but I think it makes sense to go ahead and pull these down. There are cleaner ways of doing this, but we can always refactor it later. So we've got descendants and self in here.

06:45

Let's just see how that's improved. And again, we're down to eight queries. So if I go ahead and get rid of this one and we're down to one item in our cart,

06:54

we're down to seven queries. We should be good. So let's just add in another item into our cart variation. And let's add eight in there.

07:08

And we're bumped back up to eight. So let's have a look. So yeah, the stocks in there still look like we have an additional query.

07:17

So let's head back over to variation. And yeah, so we're going to need descendants and self stocks. So let's say stocks on there. Let's come over and there we go.

07:28

So I think we should be good now. We're eager loading in the stocks. We have a couple of these common table expression queries being run, but I don't think that's going to be

07:36

an N plus one problem. If we just get rid of one of these, come over. Yeah, we're still at seven queries. So I think that will be enough optimization for now.

07:44

We can always come back to this as we add more if things get a little bit out of control, but really important to do this at this stage or the more items you're going to add to the cart,

07:52

the slower things are going to get. Okay, great. So we have now got variations in here being output in whichever way you want.

07:59

And we have fixed up some of the N plus one problems that we have. And we can now move on to updating the quantity of the items we have in our cart.

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

Episodes

Transcript

Episode summary

Episode discussion