Build an E-Commerce Platform

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

16. Adding media to product variations

Episodes

0%

Your progress

Total: 8h 42m
Played: 0m
Remaining: 8h 42m

Join or sign in to track your progress

01. Introduction and demo

02. Installing Laravel, Breeze and Livewire

03. Creating categories

04. Recursively displaying categories

05. Product model and migration

06. Showing a product

07. Product variation setup

08. Creating the product selector

09. Loading child variation dropdowns

10. Faking adding the final variation

11. Setting up product stock

12. Calculating variation stock levels

13. Adding product images with MediaLibrary

14. Creating the product gallery

15. Providing a fallback image

16. Adding media to product variations

17. Creating the cart model

18. Registering the cart service

19. Creating a cart session

20. Showing the cart in the navigation

21. Caching the cart instance

22. Adding items to the cart

23. Creating the notification component

24. Showing the user's cart

25. Outputting cart items

26. Showing variation specifics

27. Updating item quantity

28. Removing an item from the cart

29. Calculating the cart summary

30. Showing the category products page

31. Indexing products in Meilisearch

32. Hooking up products to categories

33. Building the product browser

34. Showing child categories

35. Indexing product variations for filtering

36. Outputting variations for filtering

37. Hooking up product filters with Livewire

38. Filtering products

39. Filtering by price

40. Adding global navigation search

41. Handling products that are not live

42. Price range category fix

43. Scaffolding the checkout page

44. Listing shipping options

45. Calculating the cart totals

46. Validating the account form

47. Validating the shipping form

48. Saving the shipping address

49. Selecting a saved shipping address

50. Fix shipping address error for non authenticated users

51. Redirecting if the cart is empty

52. Checking for quantity changes

53. Syncing if quantities have changed

54. Flashing a message when quantities have changed

55. Setting up for orders

56. Creating an order

57. Attaching variations to order

58. Reducing stock after ordering

59. Meilisearch filter query fix

60. Showing the order confirmation page

61. Attaching orders for registering guest users

62. Scaffolding the orders page

63. Filling in order variation details

64. Returning the order status

65. Detecting order status changes

66. Sending the order status change email

67. Sending an order confirmation email

68. Handling deleted cart records

69. Transferring the guest cart

70. Creating a presenter for the order status

71. Setting up Stripe

72. Creating and updating a PaymentIntent

73. The Stripe card form

74. Validating before payment

75. Submitting a payment

76. Checking for a successful payment

77. Handling Stripe client errors

78. Entangling Stripe customer data

Transcript

00:00

So we've already discussed that we want to add images to our variations because when we see these in the cart page or the orders page, we want to be able to show a small image next to each of these products. Now, we don't need to apply images to the black and white variations

00:15

here that we've got. We only need them with the variations that have SKUs. Obviously, these two being attached to the black shoe will have the same image, and these two being attached to the white shoe

00:28

will also have the same image. But because we have the flexibility in our variations, if you had, say, a large size of something, you might want to show a larger product image or pretty much anything.

00:40

So you can attach any images to any of your final variations and make this work for the products that you are selling. So let's go ahead and do that now. We've got three, four, five, and six.

00:51

We've got them images over in our base directory. So we've got these two images here. So we can just pretty much run exactly the same commands. The only problem at the moment is, inside of our code,

01:04

we don't have our hasMedia interface and interactsWithMedia trait attached to our variation model. So let's go ahead and do that now. So the first thing we want to do is implement hasMedia.

01:17

Let's pull that in. And then down here, use interactsWithMedia. There we go. Perfect.

01:25

Done. Now, we can pretty much just copy what we have done here. Because when we define an image for a variation, we'll want the original size.

01:35

But we'll definitely want the thumbnail that we can show in the cart. And we also do want a fallback image for each of these as well, just in case we haven't added them. So we're going to go ahead and copy pretty much

01:45

and paste these into this variation class. Now, the reason this isn't working is we've not pulled in our media class here and our manipulations class. But let's do that now.

01:56

And we're pretty much ready to go. So let's head over to phpArtist and Tynker. And let's go ahead and add them in. So let's remind ourselves of the ID 3, 4, 5, and 6.

02:06

So let's do 3 and 4 first. So we can go and say variation and variation find 3. And then we can say, let's just pull up the command from before, variation add media.

02:24

And we're going to add the black one to that. And that's pretty much it. And we'll do the same thing for 4. So again, just pull up the same command and run that.

02:36

And let's go over and just double check this in our media table. So we've got 3 and 4 here with a black shoe, which is great. We've got the media conversions in there, which is good because we pretty much always want to display them.

02:47

Let's quickly do the same for 5 and 6. And we're done. So 5 is now going to be the white shoe. So let's add that in there.

02:58

And we'll do the same thing for 6. There we go. So that is pretty much it. Now, if you want to apply these without having

03:06

to run these commands, which is likely, you can go ahead and do this through something like Laravel Nova with Media Library. Just go ahead and read the docs, and you'll

03:14

be able to integrate that really easily. But just while we're developing, running these commands isn't too bad. And if you only have a few products,

03:21

it's not too bad either. OK, so we have media now attached to each of our variations. Great.

03:27

And when we come to display them in our cart, we will be able to see them small images. And we're going to get started on our cart in the next episode.

Episode summary

In this episode, we're focusing on adding images to our product variations so that each variation can have its own picture. This is super helpful since we want to show a small image next to products in our cart and orders pages, making things much clearer for users.

We start by discussing which variations actually need images (those with distinct SKUs) and why it might be useful to support different images for different sizes or other attributes. Then, we modify our variation model to support media attachments using the HasMedia interface and InteractsWithMedia trait. With that set up, we make sure we can handle image uploads, generate thumbnails, and set a fallback image just in case.

After setting up the backend, we use some simple artisan commands to attach images to several variations in our database. We walk through doing this with both the black and white shoe variations, confirming everything works as expected in the media table. As a quick note, if you prefer a more user-friendly approach, you can use something like Laravel Nova and Media Library to do this via an interface instead of commands.

By the end, we've successfully attached images to all our variations, so next time we see them in the cart, those little images will show up nicely! In the next episode, we'll actually dig into building the cart and displaying these images there.

Episode discussion

No comments, yet. Be the first!