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

02. Installing Laravel, Breeze and Livewire

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

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•2 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!

Comments

No comments, yet. Be the first to leave a comment.