Okay, let's move on to adding our product page. So whenever we click one of these products on our storefront, we get redirected to the single product page. But first, we need to make sure that we can click one of these products. So let's switch back to our editor. And what we're going to do is we're going to make our box relative. Next, we're going to add an <a> tag. We're going to make this absolute. We will set the inset to zero. And we'll set a full height and full width.

We will set the inset to zero. And we'll set a full height and full width. So now when we switch back, you should see that the entire product box is now an <a> tag. Now we need to make sure that we can actually reference our product. So let's add the route here, say route('product'), and we'll pass the product model. Now this will, of course, fail given we haven't created this route yet. So let's open up our routes/web.php file, and at the same time, let's create a new component.

So let's open up our route file, and at the same time, let's create a new component. So again, we'll do php artisan livewire:make, and we'll say Product. Next, we'll register this component in our route. We'll say product. Like so. We'll reference our Product class here, and we'll make sure that we name our route as well and call it product. And now switch back.

and we'll make sure that we name our route as well and call it product. And now switch back. And as you can see in the left bottom corner, when we hover over products, that URL is updated, and whenever we click a product, we get our new page. So that's working. And now we can move on to showing the actual product data on our product page. If we take a look at our example store, you can see that we have a title, we have the price again, we have our description, we have our variants,

you can see that we have a title, we have the price again, we have our description, we have our variants, we have an add to product card, and we have an image of our product. So let's get going and start to implement this inside our project as well. So let's open up our product.blade.php view. And let's kick off by creating a grid, and we'll do a two-column grid with quite a gap, maybe 10. Now on the left side of our grid, I want to have our product image and all the other product images as well. So let's start off by creating our image,

and all the other product images as well. So let's start off by creating our image, and let's reference our product image and our path. Now below the image, I want to have all the other images. So we can do foreach and reference our images relationship. And let's make this a grid as well. Let's do four images, and let's add a little gap. So we have our images, and we can reference the same examples above. In this case, we have our image model straight away, so we'll do imagePath. Let's make sure that we add a little bit of a rounded border, which should be fine.

In this case, we have our Image model straight away, so we'll do image path. Let's make sure that we add a little bit of a rounded border, which should be fine. Now if we would head back to our browser, we'll get an error because product is not defined yet. So let's open up our Product component. Next, we'll call the mount method, and the mount method is called whenever the component is initialized. So we'll only do it on an initial request. On any subsequential request, this method is not called. So we are using a Livewire component,

On any subsequential request, this method is not called. So we are using a Livewire component, and this means that when we set it up with our routing, the mount method is automatically passed any arguments that we have defined inside our route. So if you go back to your web.php, you can see that we named this product. And you know what? Let's call this productId. Now we can reference this here. And if we take an example, if we would dd this and switch to a browser, you can see that this is one,

And if we take an example, if we would die and dump this and switch to a browser, you can see that this is one, and whenever we change this up here, it changes as well. Now we don't even have to use the mount method because I can show you it would also work like this. It's a public productId. And now, if we would die and dump this, you can see that it still works. So whenever you define a public property on your component that matches up with your route file,

So whenever you define a public property on your component that matches up with your route file, it will automatically inject those values, so you don't have to do this manually. Okay, next, we can set up another public property that will return our Product model. So we're going to say public function, I'm going to say getProduct property, and we're going to simply return our Product model. So we're going to say product,

and we're going to simply return our Product model. So we're going to say product, I'm going to say findOrFail, and pass the productID. And finally, when we open up our blade file, we need to make sure that we reference this instead of the public variable, given we're using a computed property. And now, if we refresh the page, we don't get any error.

And now, if we refresh the page, we don't get any error. But we don't see anything either, and that's because we've got a slash at the start of our image source path. And there you go, we can now see our images, but it's not aligned correctly, so let's fix that as well. I need to make sure that we wrap this in another div. Let's echo out our productName.

I need to make sure that we wrap this in another div. Let's echo out our product name. Sorry. And there you go, we now have the image on the left-hand side, which contains our main image. And we have the other images, including our main image, listed below the main image. So let's clean this up a bit.

listed below the main image. So let's clean this up a bit. Let's add a white background. Let's add some padding, and round up borders, and also a little shadow. So that looks a bit better. I think on our storefront, we gave a top margin of 12, so let's apply this here as well.

we gave a top margin of 12, so let's apply this here as well. Now we only have to clean up this little bit. I think we'll simply wrap this in a div, and let's move up this class up to the div above. Let's also make this a white background, give it some padding, some rounded corners, and a bit of shadow.

some rounded corners, and a bit of shadow. That looks better. Let's make sure that there's some spacing between the main image and our other images. Let's also get some bottom margins. Let's change this into MY12, so we get some space at the bottom as well.

Let's change this into MY12, so we get some space at the bottom as well. Let's change the UI. There we go. Now we have some room on the bottom as well. Now let's improve our product information a little bit. So let's add a heading, and let's increase the font size, maybe three times Excel. Yeah, that looks okay.

maybe three times Excel. Yeah, that looks okay. Let's increase the font weight. It's also fine. Next, we can add the product price. Again, this is automatically rendered because of our BladeStreamable method that we defined earlier. There we go, we have the price. Let's increase the font size here as well a little bit.

There we go, we have the price. Let's increase the font size here as well a little bit. And let's turn down the intensity a little bit by making it text-gray-700. Yeah, that looks great. Next, we have our product description. Let's make sure that we have a little bit of room between the product name, price, and our description. Okay, so now we still have our variants remaining.

between the product name, price, and our description. Okay, so now we still have our variants remaining and the add to cart. Let's continue by adding a drop-down that contains all our variants. We're going to say, for each of these product variants, so this will reference our variants. And then we're going to add a drop-down for each of our product variants. So this will reference our variants relationship.

for each of our product variants. So this will reference our variants relationship that is defined on our Product model. Make sure that this is inside a select field. So we're going to create an option for each of our variants, and we're going to pass the variantId as the value. And we're going to display variantSize followed by the color. Next, we'll probably want to add a little bit of styling.

followed by the color. Next, we'll probably want to add a little bit of styling to our drop-down. So let's make sure that it's full width. Give it a little bit of rounded corners. Let's disable the default border and give it a little bit of padding. I think that should do the trick. So if we now switch back, you can see that we have a nice drop-down

So if we now switch back, you can see that we have a nice drop-down where we have our size followed by our colors that we can select. Next, we can move on and make sure that we have the Add to Cart button. So let's add some vertical padding. Next, we can add our button here. Now, Jetstream ships with a bunch of off-the-shelf components that we can reference, which includes a button.

Now, Jetstream ships with a bunch of off-the-shelf components that we can reference, which includes a button. So as you can see, here we have a button. So what we do is reference this button. So we can do X button and say Add to Cart. That should do the trick. Okay, I think that's it for our product page.