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
06. Showing a product

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
So let's build out the product show page which is going to show information about the example product that we've added to our database.
00:08
So that's just going to be something like slash product slash and then the slug of the product. What we're also going to do is look at money formatting as well. We've got this laravel money package open just up here. I'm going to look at how we can use that within our model.
00:24
Okay so the first thing to do is probably just create our controller. So let's go and make a controller in here and let's call this product show controller and let's head straight over to that product show controller and we know that in this case we're going to receive in the product that we actually want to view.
00:43
So again let's make this invocable and let's accept as the first argument in the product and let's just make sure we pull that in there. Great okay so to start with let's just die dump on this just so we know that we are getting the right product in
00:58
and we can go over and hook this up to our roots. So let's say root get slash products and of course the product. So we're going to use root model binding here rather than just accept some sort of slug value in.
01:12
So for that we just pass the name of the model in and Laravel will take care of that for us. We'll have to adjust this very slightly. Okay so we're going to go ahead and pull in the product show controller here and we're pretty much done like so.
01:25
So if we head over to the browser let's go over to slash products slash example product and we should see that die dumped. Now at the moment it doesn't work because we're passing in a slug and by default root model binding is accepting or expecting an integer.
01:42
So we can fix this by just using a colon and then specifying the column that we want to look this up by. Let's give that a refresh and there we go there's our example product. So let's create out a view for this.
01:54
So if we just come down to our resources views let's create out a product directory. We'll just keep this roughly organized and let's say show dot blade dot php and into here I'm just going to go ahead and paste some pre-created markup for this product page just so we don't have to write all of this out
02:17
and you'll find this in the resources for the course. You can just go ahead and download and use if you're following along. So let's just check this out on the page once we actually return that view. So if we come over to product show controller let's return a view in here
02:31
and that's going to be products show and of course we're going to need to pass the product down to view the information about that. So let's head over give that a refresh and there we go. So at the moment doesn't look great what we're going to need to do
02:44
is just make sure we run npm run dev or npm run hot just to rebuild all of our tailwind styles and there we go. So the image gallery where we saw the large image is going to go on the left hand side then we're going to have the product title the formatted price which we're going to look at
03:00
the description and then down here is going to be the variation selector and we're going to get onto variations very soon. So let's just output some basic information about this product first of all. So if we just come over to show dot blade dot php all of this is pretty straightforward
03:16
we just want to go ahead and grab the model and grab the properties for each of these. We're just outputting the description as plain text so let's pop that in there and to be honest that's pretty much all of the information we have just now. What we need to focus on is this formatted price.
03:34
So we spoke about this earlier when we added this to the database we added this as an integer in pence which is really important for sort of the integrity of your prices and we always would then go ahead and put in a package to deal with formatting of this.
03:49
You can do this within php directly but using a package always much easier. Now this laravel money package uses money php but just integrates this really nicely into laravel so definitely check out money php just to kind of get some behind the scenes info on this
04:07
but let's go ahead and pull this package in and just see what we can do with it. So the basic usage here is using the facade and then the currency and then passing in the pence that we want to format and as you can see here 500 pence is going to go ahead and output $5 with the dollar symbol.
04:24
Now we can customize this because I'm aware that not everyone is going to be using dollars by going ahead and publishing the config file and using this very slightly differently. So let's go ahead and publish that config file and let's go over to config money and just check this out.
04:40
So we've got a default currency here which uses the app currency config and otherwise falls back to USD and we also have the app locale in there as well. We can go ahead and predefine certain currencies here but pretty much all we need to do is define this app currency variable.
04:59
So if we come over to config an app if we actually look for currency we shouldn't see that in there so it's not actually in here by default. So let's find the locale and we'll go ahead and pop it near here. So let's just say currency and let's set that to USD.
05:17
I'll explicitly set that in there even though there's a fallback just so you've got that in there if you need to change that to any other currency. Okay so now that we've done this we want to go ahead and create a kind of helper method on our model which is going to return the formatted amount.
05:32
Now let's use this example first of all using the facade and then we'll see how this default currency comes into it. So for the formatted price we probably want a method on our product called formatted price just so we have a little bit more control over the display of this.
05:48
Of course at the moment that's not going to work because we don't have a method called formatted price but if we hover over to the product model here we can go ahead and create this out. Now bear in mind that each variation will also have a different price so the final variation will always be the price that's added to the cart
06:05
but this will give you a sort of general base price that you can display to your customers. It would be too difficult to kind of extract this information from the variations and work out which one to show so it's always good to have a sort of base price for this.
06:19
So let's go ahead and create out that formatted price method and from this we're going to go ahead and use that money package. So let's return money and again I just might need to re-index here. So let's say money and that's this package just here
06:35
and then we'll say USD and then we're going to pass in our price in pence. So now what we should see over on here is a formatted price. Very very easy. So we can just go ahead and control this in pence but then see this formatted with the
06:52
dollar symbol so we don't have to do any of that within our templates. Like I said we're using explicitly using USD here which isn't great because if we needed to change this globally to a different currency we would have to go and find all of the instances
07:06
where we'd access this USD method and change it over. So instead this package comes with some helpers and one of them helpers is just the money function and we're going to go ahead and pass the price in
07:18
and by default that's going to look up in our config the default currency. So nothing will change here we still get exactly the same value but now what I can do is head over to config an app if I need to change the currency over switch this over to a different currency and see the output slightly differently.
07:36
So I'm going to go ahead and switch this back to USD but that is our overall product page ready to implement our image gallery ready to implement our product variation selector and we've pretty much nailed our pricing.
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!