Creating the product gallery: Build an E-Commerce Platform

00:04

So let's go ahead and say php artisan make or Livewire make. And we're going to call this product gallery. And let's create that out. Great.

00:15

So if we head over to the product gallery blade template, once again, I'm just going to paste some pre-created markup in here. You can either copy this or grab it from the course resources. Essentially, this just is a outer wrapper with the main product image at the top here.

00:32

And then we've got a grid here with six columns. So six individual thumbnails will be output below with a gap of two. And they'll be clickable. And when we click them, that will swap the thumbnail for the main image.

00:46

Sounds a bit more complicated than it actually is. So if we go over to our product show page, let's pop the product gallery in here. And let's kind of think about the kind of information that we'd want to pass through to the product gallery.

01:02

We need to extract the images out. So I'm actually going to pass the entire product into here. That kind of makes sense. And then that's pretty much it.

01:10

We just want to grab the first piece of media from this product, display it inside of the big one here. And then we want to iterate through and show all of the small ones. So if we come over to our product gallery live wire component,

01:26

when we mount this component, we want to grab that first image. Now, let's just go ahead. And before we grab that first image, grab the product just up here. And just dump on all of the media that this contains, just so we can see what we get back.

01:43

So if we just go ahead and say this product. And if we just dive into the source for that has media or interacts with media, let's take a look here at the media relationship here. So we've got this morph many, like we said, it's a polymorphic relationship.

02:01

So let's go ahead and just dump that out. So let's go back over to our product gallery and just say media just to see what we get. So let's give that a refresh. And inside of here, we have two media classes with all of the information that we need.

02:15

Now, each of these media classes, which are technically models, will contain the methods that we need to extract that information out. So we can grab, for example, the URL for this particular piece of media, whatever we need. So it's a simple relationship with their methods on their models.

02:33

But we also have overall methods, the way we can grab the URL for the first media, just to make things a little bit more convenient. Otherwise, we would have to do media first and then use some sort of method to get the URL, which we don't really want to do.

02:46

So we're going to go ahead and store the selected media URL up here. And this is key because we need to swap this. So let's say selected image URL. And by default, that's just null.

02:57

And let's go ahead and set this in here when we boot this up. So we're just going to say this and product. And we're going to say get first media URL. I think it is.

03:09

Let's just test this out by going over to our product gallery template and just dumping this on the page. So let's just reference that selected media URL in here and see what we get. So let's come over, give this a refresh.

03:21

And there we go. So we've got the full URL to the project, which we might need to change. And then storage slash two slash Air Force One black. So let's go ahead and just make sure that this URL works.

03:32

Just make sure we don't need to add any sim links or test anything. And there we go. Beautiful. There is our shoe.

03:38

So we can output that in that image tag by just binding it in. So let's go ahead and just grab the entire thing. Pop that in there. Come over.

03:46

And there we go. There is our product image. And of course, you can add styles to this if you need to resize it or anything like that. OK.

03:52

So let's focus on our thumbnails here. So we want to iterate over these anchors and output the thumbnails for each of our items. How are we going to do that? Well, if we go back to our template, we don't actually need to do anything for this inside

04:07

of the Livewire component. Let's bring this in a little bit. All we need to do is iterate over all of the media. So we're just going to go ahead and say for each product, get media as media.

04:22

And let's just test this out before we do anything. So before we start to pop this into an image tag, let's see what we can do. So let's say media get URL. And I think that should be it.

04:34

Let's just see what we get. OK. There we go. We've got the two items in here.

04:38

So we've got the white and the black version, which we can now technically put into that image tag. However, notice that this is a link to the large version. Now, that would work, but it would be a waste putting a really large image into such a small

04:56

thumbnail. So what we can actually pass into this is the name of the conversion that we previously defined over in our model, which is thumb 200 by 200. So let's go and just put that into this as a parameter and see what we get back.

05:12

And you can see here now that it's referencing that conversions folder. And this will be a much smaller version of the image. Now, this is a bit hard to select at the moment because we've got this anchor in the way. Let's just get rid of that for now.

05:25

And let's pull this into a new tab. And there we go. There is our 200 by 200 version. We can even make that a little bit smaller.

05:35

Or you could define another conversion if you wanted to. So there's nothing to stop you going ahead and doing this and doing a 100 by 100 version if you needed it. We're just going to keep one for now, but feel free to play around.

05:49

OK. Now that we've done that, we can go ahead and paste this inside of here. And we can grab the URL and put that in the image tag. Let's go over.

06:00

And there we go. There are two small thumbs in here that we can now click on. Now, technically, these should be buttons. So let's just switch that over to a button type because we don't really go anywhere with

06:11

these when we click on them. We just want them to perform some sort of action. And the action that we want them to perform is to swap this with this large image. So how are we going to do that?

06:20

Well, in this case, we can attach a wire click. And we don't need a prevent because we've switched that to a button. And we'll just call some sort of select image method over on our live wire component. And into this, we'll go ahead and pass in the media URL.

06:36

Now, what we don't want to do is pass the thumbnail in because if we were to do that, then the thumbnail would then become the large image, which would look a bit small. So we're going to get rid of the thumbnail reference in there. So we're showing the thumbnail.

06:49

But when we select the main large image that we want to show, we just use get URL. So let's implement this select image method inside of here. So let's go ahead and create this out. And of course, that's going to take in the URL that we want to show.

07:05

And we can just basically replace that with selected image URL. So we're just going to say this selected image URL and URL. Let's try it out. Let's go over, click on white.

07:16

And there we go. We can now toggle between them two images. Very, very simple. But with live wire, very quick to do and very effective for a very simple product page.

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

Episodes

Transcript

Episode summary

Episode discussion