This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
13. Adding product images with MediaLibrary

Episodes

0%
Your progress
  • Total: 8h 42m
  • Played: 0m
  • Remaining: 8h 42m
Join or sign in to track your progress
01. Introduction and demo
9m 42s
0%
02. Installing Laravel, Breeze and Livewire
4m 47s
0%
03. Creating categories
9m 4s
0%
04. Recursively displaying categories
8m 21s
0%
05. Product model and migration
2m 50s
0%
06. Showing a product
7m 50s
0%
07. Product variation setup
10m 26s
0%
08. Creating the product selector
10m 34s
0%
09. Loading child variation dropdowns
4m 28s
0%
10. Faking adding the final variation
9m 33s
0%
11. Setting up product stock
4m 34s
0%
12. Calculating variation stock levels
9m 1s
0%
13. Adding product images with MediaLibrary
8m 50s
0%
14. Creating the product gallery
7m 28s
0%
15. Providing a fallback image
2m 56s
0%
16. Adding media to product variations
3m 37s
0%
17. Creating the cart model
3m 37s
0%
18. Registering the cart service
6m 34s
0%
19. Creating a cart session
11m 4s
0%
20. Showing the cart in the navigation
9m 19s
0%
21. Caching the cart instance
3m 2s
0%
22. Adding items to the cart
14m 1s
0%
23. Creating the notification component
8m 5s
0%
24. Showing the user's cart
6m 50s
0%
25. Outputting cart items
4m 50s
0%
26. Showing variation specifics
8m 8s
0%
27. Updating item quantity
8m 2s
0%
28. Removing an item from the cart
6m 1s
0%
29. Calculating the cart summary
8m 7s
0%
30. Showing the category products page
5m 1s
0%
31. Indexing products in Meilisearch
8m 32s
0%
32. Hooking up products to categories
4m 15s
0%
33. Building the product browser
13m 32s
0%
34. Showing child categories
1m 51s
0%
35. Indexing product variations for filtering
8m
0%
36. Outputting variations for filtering
12m 52s
0%
37. Hooking up product filters with Livewire
7m 48s
0%
38. Filtering products
12m 24s
0%
39. Filtering by price
9m 50s
0%
40. Adding global navigation search
7m 50s
0%
41. Handling products that are not live
3m 22s
0%
42. Price range category fix
1m 18s
0%
43. Scaffolding the checkout page
8m 6s
0%
44. Listing shipping options
9m 3s
0%
45. Calculating the cart totals
2m 52s
0%
46. Validating the account form
9m 10s
0%
47. Validating the shipping form
5m 47s
0%
48. Saving the shipping address
8m 4s
0%
49. Selecting a saved shipping address
6m 39s
0%
50. Fix shipping address error for non authenticated users
1m 7s
0%
51. Redirecting if the cart is empty
2m 42s
0%
52. Checking for quantity changes
7m 11s
0%
53. Syncing if quantities have changed
11m 59s
0%
54. Flashing a message when quantities have changed
5m 48s
0%
55. Setting up for orders
5m 17s
0%
56. Creating an order
13m 24s
0%
57. Attaching variations to order
6m 13s
0%
58. Reducing stock after ordering
2m 56s
0%
59. Meilisearch filter query fix
1m 33s
0%
60. Showing the order confirmation page
7m 39s
0%
61. Attaching orders for registering guest users
5m 17s
0%
62. Scaffolding the orders page
5m 30s
0%
63. Filling in order variation details
5m 24s
0%
64. Returning the order status
4m 39s
0%
65. Detecting order status changes
10m 49s
0%
66. Sending the order status change email
5m 12s
0%
67. Sending an order confirmation email
2m 47s
0%
68. Handling deleted cart records
4m 44s
0%
69. Transferring the guest cart
2m 44s
0%
70. Creating a presenter for the order status
4m 31s
0%
71. Setting up Stripe
3m 43s
0%
72. Creating and updating a PaymentIntent
16m 21s
0%
73. The Stripe card form
3m 35s
0%
74. Validating before payment
5m 34s
0%
75. Submitting a payment
6m 40s
0%
76. Checking for a successful payment
5m 47s
0%
77. Handling Stripe client errors
3m 11s
0%
78. Entangling Stripe customer data
2m 18s
0%

Transcript

00:00
Over the next few parts we're going to focus on attaching images to our products and product variations and we'll talk about why that is in a moment. We're also going to get this image gallery working as well which is going to be a live wire component as we saw from the introduction
00:16
where we have small thumbnails and we can just click through on any amount of images that have been added to this product just to view them in that kind of large image area. Now before we get started let's talk about what we're going to use to attach images and we're going to go and lean on the Laravel Media Library package and there's a good reason for this. When we upload images
00:39
or associate images with our products or variations what we also want to do is create thumbnails and this package is very good at doing that automatically we just need to define the conversion within our models. So this does have a ton of advanced features which we're not going to use but if you do need to use them they are there. So let's get started and installing this
01:02
so let's go over to the base installation section just here and let's grab the command for this we're using version 9 if version 10 is around by the time you're watching this course of course go ahead and make sure you follow the docs. Okay so we've gone ahead and done that we don't have a license for Media Library Pro which is absolutely fine let's go ahead and publish the migrations
01:22
here if I can copy this there we go and let's go ahead and run the migrations and we'll just really quickly check the database out and see what we've got. So it's pretty much just created a media table you can see here that we're using polymorphic relationships to relate media to any model in our app so model type is going to be product or variation model id will be the id and it will
01:44
generate a huge amount of other information as well which we'll talk about as we go. Okay so let's just come over here and publish the config file just in case we need to tweak anything I don't think we will do in this case and that is pretty much the config file that you can look through. Okay so adding a media disk let's talk about this so by default the media library package
02:06
will publish the files on the public disk that is what we want for now but if later on you needed to change this it would be a really good idea to head over to config and file systems to define your own disk in here as you needed so the docs here will just go ahead and get you set up with that you can set up queues anything like that. Okay so we're pretty much done with this let's go
02:29
over to the preparing your model section and this is really simple we just need to include the interacts with media tray and make sure we implement the has media contract. So we're going to start with products we are going to attach images to variations as well and let's talk about that really really quickly so let's say we're in our app we've got an overall product
02:51
image gallery and we want to show off sort of any kind of image to do with this particular product what we then want to do is when we add say black air forces in size eight to our cart in our cart view we want to see that small thumbnail of a black air force one the sizing obviously is not going to differ in terms of the image although it might do so every variation is
03:12
going to have an image really really important so we can see that on our product page our orders page everything like that but we're going to also attach overall images to this image gallery over in the product so that's pretty much what we're doing okay so let's go ahead and set this up then we need to go ahead and implement that has media trait and just go ahead and re-index
03:34
everything here so has media and then we want to go ahead and use interacts with media just here great so that is pretty much everything set up now we're going to go ahead and attach an image to this i've already got a couple of images which unfortunately i can't include in the downloads for legal reasons but go ahead and grab two product images or just one product image that you want
03:58
to use and we're going to attach this to that product and we'll check the database out and then we'll look at how we can grab these out in the next part okay so we're going to go over to our terminal to do this and we're going to open up a tinker session or you can use tinker well if you use that and we're going to go ahead and fetch out a product that we want to attach an image to so
04:19
let's go ahead and just find this by its id and if we come over to our products here we've just got product with an id of one so we've got our product here now we want to go ahead and attach this media to it so to do this we're going to go ahead and reference our product we're going to say add media and we're going to choose the path to the file so in this case i'm in the root directory
04:39
so i can pretty much just come over grab the full file name to this file and paste it in here now really importantly we want to use the preserving if we spell that properly preserving original method because that won't delete the original file that's not what we want to do and then we're going to say to media collection and that's the simplest way that we can use this package let's go
05:06
ahead and hit enter on that and sure enough that media is now attached to this product so if we check the media table out here we go we've got a model type of product a model id of one the collection name is default which is fine you can have different collections that you add media to in this case we just want to add it to a default collection and it will give us information about
05:25
the disk as well that is stored in the mime type the size of the file and any kind of manipulations that we've defined which we haven't defined just yet so that is our image uploaded now let's just check out where that's actually been placed so if we go over to our storage directory and we come over to app and public that folder now contains that image and when we reference it as long as
05:48
we have this public directory here sim linked to our main url for our app which we'll talk about in just a second then this should work nicely and we'll get to that when we start to output our images so as long as you've got an image being placed in here you're good to go now i'm going to go ahead and delete this so let's just get rid of this folder here and let's come over to the
06:08
database and get rid of this what we want to talk about is registering conversions so over in our product model let's come down to the bottom here we're going to go ahead and create our method called register media conversions and that will go ahead and fill that in for you if your editor does we've got a media piece of media being passed through this returns nothing and essentially what
06:30
we want to do here is say well we want a 200 by 200 thumbnail of any image we upload we want that to be automatically processed we want that to be placed in that directory that we just saw and then we want that to be available in our media table so we can extract that out so we can do this by saying add media conversion and then we can give it a name so in this case i'm just going to call
06:54
it thumb 200 by 200 although you could call it anything and then here is where we manipulate that image so we want this to fit inside of a 200 by 200 size so for this we're going to go ahead and use manipulations and the fit crop type you can find these all over on the image package from the same company that released this package and there we go we want about 200 by 200 so now that
07:24
we've created this register media conversions method and we've gone ahead and added this thumbnail in let's run the same command over in our terminal to generate this out so i'm just going to exit out of here and rerun php artisan tinker and let's go ahead and find that product again and let's pass in the same image with exactly the same methods and see what happens so if we come
07:45
over to the database now you'll see that we've got this generated conversion in here thumb 200 by 200 and we can reference that when we try and grab the images out if we come over to the files here you can see that we've got the original image plus the 200 by 200 conversion so when we reference that with the methods that are available with this library we can go ahead and grab out the small
08:07
images down here because there's no point using the full size image in our thumbnails down here and then the large one will just be the original version so that's pretty much it we have our media uploaded finally let's just go ahead and add the white version of this just so we have it in there so we're going to go ahead and switch black to white and there we go so if we come over to our
08:29
media table this is the white version this is the black version we can iterate through these we can grab the thumbs out for each one and of course if we come over to our files the white version with the conversion has also been uploaded so now that we've done that we'll move on and we'll build out our image gallery we have all of the images we need to do that
78 episodes8 hrs 42 mins

Overview

Build a robust e-commerce platform with a Laravel and Livewire. Features products with unlimited and flexible variations, a product browser with filters and price range slider, global product search, guest checkout, shipping and payment implementation, order status tracking and more.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!