Faking adding the final variation: Build an E-Commerce Platform

00:14

And really importantly, when we click that add to cart button, we want to make sure that we have the information that we need to use to add to our cart. So if we head back over to our product drop down, this is at the point where we want to check if we have an SKU.

00:31

So let's do a really quick check in here just to test this out. And we're going to say this selected variation model. So we don't need the full method name in there. So let's get rid of all of that.

00:42

And we're going to go and, of course, do a check on the SKU to see if that exists. Let's just die dump and say SKU found just so we know what we're doing. So if I go ahead and choose black, of course, that's not going to die dump. But when I choose 8, we found the SKU.

00:57

So we found the final variation in the list that we want to emit. So we're going to go ahead and emit this. But we're specifically going to emit this to a component. If we were to just emit it, that would fire off to all LiveWire components, which isn't ideal.

01:12

So we're going to go ahead and emit that specifically to the product selector. And we're going to emit this event name as SKU variant. If I can spell that as selected, I think that will do for now. And the value that we want to pass through is the selected variation, which is just the ID.

01:31

That's pretty much all we need because that's the only thing we need to add that to the cart. So now that we've got this, let's go ahead and pick up on this event over on our product selector. So let's come over to our product selector.

01:44

And for this, we're just going to go ahead and implement a really simple event handle. So we could do this with properties, or you could use a method for this. But let's just say listeners. And what are we listening for?

01:55

Let's just head back over here. SKU variant selected. And that's going to go ahead and invoke a method called SKU variant selected. So let's create this out here.

02:05

That's going to receive the variant ID into it. Because if we head over to our product dropdown, that is what we're passing along. And again, let's just die dump on that variant ID just to make sure that is being triggered. So again, let's choose black size 8.

02:23

And there we go. There is our variant ID ready to be sort of assigned to that add to cart button. So we can go ahead and look this up again in the database. But we need somewhere to sort of hold this.

02:34

So let's create a SKU variant variable just up here. And then what we can do is when we get this, we can assign SKU variant to variation. And find variation ID or variant ID in this case. Let's just make sure we pull variation in properly as well.

02:59

And we may as well just add a really quick check here as well, just to say if there is no variant ID, e.g. at this point, that's going to be if the user goes from, say, size 8, to choose an option within that dropdown.

03:15

And we'll handle that a little bit better in a minute. Well, in this case, we probably just want to clear out the SKU variant and set it back to null and then return. Because we don't want to look up something that doesn't exist.

03:26

OK, so let's just test this out. Let's go down here and die dump this SKU variant. And let's just see what we get. So again, black size 8.

03:36

And that should give us the final SKU variant. Which, of course, when we click our Add to Cart button, we can push that model to our cart. So let's get rid of that die dump.

03:49

And let's handle what happens when we sort of go back on ourselves. Now, if I click Choose an Option here, you can see that that all handles nicely for us. Because Choose an Option isn't a variant. So it doesn't have any children.

04:02

But if we were to click size 8 and then choose Choose an Option again, what we'll actually end up with is probably something completely wrong. Or it just won't reset itself. So let's go over to our Product Selector.

04:16

And let's just dump out here the SKU variant just to see what happens. So if we click black and size 8, that's what we want to add to our cart. But if I click Choose an Option, you can see that kind of hangs around. Which doesn't make sense.

04:32

Because effectively, that means our Add to Cart button is still going to be on the page. So how are we going to handle this? Well, we want to just kind of reset it. So if we come over to our Product Selector and we come to our Product Dropdown.

04:48

And we come up to where we are updating this. Effectively, we just want to emit every single time up to the Product Selector that this is set back to null. So that's just going to sort of reset it every single time.

05:03

So what this means now is when we choose black and 8, that shows it. But then when we click Choose an Option, that's going to reset it back. And of course, the next time around not look the model up. So effectively, that will get rid of our Add to Cart button.

05:17

Because at this point, we can't add anything to our cart. So there we go. We have now got a final variant that we can add to our cart. Let's go and add our button so we can click on it.

05:31

And of course, at the moment, we can't add it to our cart because we don't have any cart functionality. But we will get there. So over in our Product Selector, let's go over to the actual view.

05:40

Let's do a check for this SKU variant. So let's say if SKU variant and end that if statement. And then in here, we want to implement a button. So let's go ahead and use the button that comes with Laravel Breeze.

05:53

That's just the X button component. And we'll say Add to Cart. And let's just leave it at that for now and just see how this looks. There we go.

06:02

So we've got that Add to Cart button. And in here, let's just add a little bit of styling because at the moment, that's a little bit squashed. So let's wrap this in a div.

06:11

Because we also want to show the final price here as well. Really, really important. Remember, each variant can have their own price because some might be a little bit more expensive.

06:20

And let's just add a space Y6 to this. And down here, we'll go ahead and create out the price. And that should be everything that we need. And we could actually add an overall space Y6 to this

06:34

just to space things out a bit. Let's try this out. And there we go. That's going to be the price.

06:40

And then we can hit Add to Cart. And we'll play around in a minute with the different prices for different variants just to see how this works. Now for the price itself, if we just head over to the variant,

06:51

we don't actually have any pricing methods in here to format the price. But we could very easily just grab that from our product model. So let's grab this formatted price method. And let's go ahead and pop that over here.

07:03

We could even add this to some sort of trait. But we'll leave it for now. Okay, so over in our product selector, let's go ahead and say SKU variant formatted price.

07:15

And let's take a look at this. While we're here, we'll just make this semi-bold maybe. And let's set the text to large. Okay, so let's come over.

07:26

Black, size 8. There we go. We know the price. And we can hit Add to Cart.

07:31

Let's demonstrate quickly what happens if, for example, size 8 was a completely different price. So let's set this to $120,000. And let's go over and check this out.

07:42

So black and size 9, for example, is $90,000. And size 8 is now $1,200 for whatever reason. But when we add that to our cart, that will be the price that gets added,

07:56

not the overall price for the product. So we can change our variation prices around really nicely. Okay, I'm going to go ahead and set that back to a sensible default. And you will have noticed here we've got a slight weird ordering.

08:11

Now that we've changed that around, so we've got 9 and 8. And I think that's just because of the ordering that we have inside of here. So we've got 1 and 2.

08:19

Let's set that to 1, 2. And let's come back over. Choose black, 8 and 9. Let's switch the price around for 8 again to $1,200 or $120,000.

08:35

And we should see 8 and 9 in the correct order. Great. So let's switch that back to $90 again. And there we go.

08:44

So let's finally just click on add to cart and do something. It doesn't have to do anything at the moment, but at least we've got a kind of hook in there ready to go. So for this, we're going to use wire click.

08:57

And we're going to prevent the default behavior. And we're going to say add to cart. And that will exist over on our product selector. And let's create that method out here.

09:12

And let's go ahead and die dump on this SKU variant, which we are going to add to our cart eventually. So we've now got the entire flow through choosing each of these, hitting add to cart, and then eventually adding that to our cart.

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

Episodes

Transcript

Episode summary

Episode discussion