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
02. Installing Laravel, Breeze and Livewire
Episodes
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
Let's get started with a fresh Laravel project using the Laravel Installer,
00:04
doesn't matter how you do this, and we're going to call this Laravel eCommerce. Let's go ahead and run that and just wait for that to finish. Okay, so now that's done, let's go and head into that directory, and we're going to go ahead and open this up in our editor, and there we go.
00:18
Great. So the first thing I'm going to do is just run the default migration. So we want to go ahead and configure the database connection here. For me, I'm using Postgres, but feel free to use MySQL.
00:28
And I've already created a database here called Laravel eCommerce. I just need to fill in my username and we should be good. Okay, so there's that database I was talking about, empty at the moment. But if we go ahead and just run our default migrations,
00:42
that will go ahead and create our users table, password resets, pretty much everything we need to get started. Now, we're going to be running this just with a local server. So we're going to go ahead and start phpArtisanServe.
00:55
And if we come over to the browser, sure enough, we have a fresh Laravel app ready to go. Great. So the next thing we want to do is install Laravel Breeze, which is just going to provide us with basic authentication features.
01:07
That's pretty much all we need. Of course, what you can do is switch this over a little bit later as well. So let's go down and follow the instructions here. We just want to do a composer require on Laravel Breeze.
01:18
So let's open up a new tab here, pull that in, and just wait for that to finish. And once that's done, we can go ahead and run the phpArtisanBreeze install command. Let's do that now. Now, what that will have done within your project if you've not used Breeze before
01:32
is it would have published some controllers under this auth folder. And if we go ahead and take a look at the roots file, that will have also added the auth roots in here. So we can go ahead and use them.
01:42
Great. OK, so we want to go ahead and do an npm install, run dev, and finally a migration just in case there's anything in here. So let's do npm install and let's do npm run dev.
01:54
And then once that's finished, we'll do a final migration and we'll test Breeze out. OK, so now that's done, let's run phpArtisanMigrate again. And yeah, there's nothing to migrate. There's nothing that Breeze adds to our app.
02:07
OK, so if we just come over here, we can now register an account. So let's just try that out just to make sure everything is hooked up properly. So we'll do just the standard details here. And there we go.
02:18
Sure enough, we're in. And this will look familiar from the introduction. We're pretty much going to be using the same layout here. So the next thing to do is install Livewire.
02:27
So let's come down to grab the composer command for this. And let's pull this in. And just while that's finishing, let's grab the styles tag, which we can pull into our main app file.
02:39
That's located over in resources and views and layouts. So this is app.blade.php. We can just put that at the top here. And then at the bottom, we want to include the script version of this.
02:51
So let's change this to script. So that's pretty much Livewire installed. Very, very simple. We're going to go ahead and just create a very simple example component with Livewire
03:02
just to test this out. So let's say Livewire make hello world. There we go. And we'll just say no for now.
03:09
And let's open up the hello world components blade file. And let's just write hello world. And we'll come over to the dashboard page. So dashboard.blade.php.
03:21
And we'll just include this Livewire component here just to make sure everything is working. So we'll just say Livewire hello world. Let's go over to our app. And there we go.
03:31
So that we now know that our Livewire component is working nicely. So we can go ahead and get rid of that. We'll just revert that back to how it was. And we can go ahead and delete that component.
03:40
I believe you can do that from the command line or remove it might be. It's probably delete. Yeah. So let's go ahead and change that to delete.
03:49
Okay. That's done. So now the last step is just to pull in Laravel debug bar. We want to make sure we're monitoring our queries and all of that kind of stuff while
03:59
we are working on this just to make sure that we're eager loading properly, not running too many queries. And this is really going to help us out. So let's go ahead and grab the composer command for debug bar.
04:10
Paste this in. And that's pretty much all we need to do. So if we just come over to our app, you'll see that at the bottom. Now we have a count of queries and we can just monitor everything from here.
04:20
If you need to disable this at any point, just come over to EMV and you'll just want to use debug bar enabled and you can switch that explicitly to false like so. So if you do need to get rid of that at any point while you're developing, go ahead and switch that over.
04:36
Okay. So we're pretty much done. We've got a fresh Laravel app set up with authentication, live wire pulled in and debug bar so we can monitor what's going on.
78 episodes•8 hrs 42 mins•3 years ago
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
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!