Introduction and demo: Build an E-Commerce Platform

Build an E-Commerce Platform

Sign in Get started

Playing

01. Introduction and demo

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

In this course, we're building out an e-commerce platform completely from scratch with Laravel and Livewire. I'm going to take this part just to have a look around at some of the things that we're going to be building,

00:09

then we'll head over and from the next episode onwards, build this out from scratch. So you can see that we've got a product browser here. We're not going to start here. We're going to go over to the homepage and although this looks pretty plain,

00:20

these are just the categories that you can add in. So, of course, when it comes to using this, you can add more categories. A lot of these categories don't actually have products in. We pretty much just have products in this Nike category here.

00:34

So for this, we are going to allow an unlimited nest of categories. It doesn't matter how many you create, how many children categories you create. This is going to work really nicely. So for example, we click on brands here.

00:48

You can see that we have no products in this overall brand category, but under Nike, we do have them. Now, that's just the way I've set things up. What you could do is add them to this overall brand category as well. So it's completely flexible as to which products you associate.

01:05

So you have one product and that can be in a number of different categories. So over to the product browser page here, you can see that we've got three products. This is the product we're going to be focusing on because this is the product that I've already attached different variations to and added images to

01:21

and you can see these variations here. So whichever variations we have associated with a product, e.g. size, color, any kind of customizations for them products, they will appear over here on this sidebar.

01:35

And what we can actually do with this is just filter down the products by color, size, or whatever you're selling. And there's also a slider here so we can adjust this down and that will reduce these under the max price range.

01:47

And by default, this will jump straight up to the most expensive price. So you have it set there already. Now all of this is very fast. We're going to be using MeliSearch for this.

01:56

So we're going to index all of our products, grab out all of the variations here and then do some cool stuff to get this to work really nicely. Okay, let's head over to the product just here. So that's gone ahead and given us a large image of that product.

02:13

We actually have two images associated with this product which represent the two colors that we can do. Well, there's three here, but I've only added the black and white. This 24 karat gold probably doesn't exist.

02:25

So at the moment, you can see that these are all out of stock. So they're unselectable. We pretty much can't go any further than this. Let's go over and actually add some stocks to this.

02:35

So let's go to the database. We're going to choose a variation here and this is going to give us a clue as to how the variations within this course work. Now what's going to happen is you're going to have an unlimited amount of variations.

02:48

So you could choose a overall color, a size, some sort of customization, some sort of pattern, it really doesn't matter. But the last variation in the list is the one with the SKU, which is your kind of final variation.

03:02

So these are the actual items that are in stock. Now if we look at the size 8 here, this has a parent ID of 1, which is black. So this SKU represents a black trainer in size 8. This represents a black trainer in size 9 and so on.

03:20

So we have a unique end product for every single variation that ends up in this list. Now if that doesn't make any sense, don't worry. Of course, we're going to be going through all of this as we go through. So I'm just going to add some stock to black 8

03:33

and let's go ahead and just choose the stock amount. We'll see what happens to this stock table as we check out. It's actually going to go ahead and add a negative stock level in here. So we're not just reducing a single number.

03:44

We're kind of keeping a table of each iteration of this. So we add 5, someone checks out with 2, that's going to take 2 off the overall stock level. So let's give this a refresh and there we go.

03:57

This is in stock, but it is low stock. So we'll be adding this low stock modifier as well. Now we've also only added stock for size 8. So that's the only one that shows and these kind of trickle up.

04:09

So if you had just a low stock for size 8 and that was the only variation black would show low stock as well. But again at this point that might not make sense but as we go through the course that will.

04:22

Okay, so we're down to the final variation which presents us with a price. We can change the price for different variations and we're going to go ahead and hit add to cart and you can see here we get a little notification

04:32

that that's been added to our cart. So let's head to our cart and check it out. Okay, so we've got one item in our cart. We can add more but we'll just leave it at one for now.

04:41

We can change the quantity from here. You could of course also add the quantity over here as well, but we'll kind of leave that off for now. We can remove this product if we want to very easily

04:51

and of course we can change the quantity and this is based on the max stock level as well. So we'll only be able to add five here because we only have five in stock.

05:00

So this is all pretty simple unless you have more items and once we're ready to check out once we're happy with this we can go ahead and click check out. Now you notice that we're not signed in at the moment.

05:10

We are implementing guest checkout, which means that we can just enter our email address, our shipping address, choose our delivery and then confirm and pay and that will work.

05:21

What we can then do is after we have created an order, we can register an account and have all of the orders associated with our email address hooked up to our account.

05:32

Let's look at a demo of that now. So I'm going to go ahead and just create an account out here. With my email and we'll just go ahead and put in any kind of shipping address here.

05:42

And of course you can add more items here if you want to and let's choose the delivery option. So these have just put in I've not really researched them, but you can go ahead and just pull them in if you want to

05:55

and then we can go ahead and enter a card number and all of our details. Okay, so that's it. You can see as well here.

06:01

We've got the quantity and the variation types as well, which really helps so we can sort of see exactly what we're checking out with. And of course we have these smaller thumbnails as well,

06:11

which we're actually going to be using the media library package for. Okay, let's go ahead and click confirm order and pay. Now in the background what this is going to do is it's

06:19

going to try and process the payment first and then once it has processed the payment with Livewire, then we're going to trigger a submission of all of the other details.

06:28

Let's go ahead and click confirm order and pay and just wait for that to finish and that's successful. Okay, so because we're not signed in at the moment, we can see here your order and the order number just

06:39

in case the customer needs to reference it has been placed and it says here create an account to manage your orders. Of course at the moment,

06:46

we can't do any of that. Now just before we do do that, let's just take a look at this stocks table and you can see that we get a new record inserted which subtracts

06:54

from that stock level. So what happens is the next time someone wants to go over to that product and add some items, they're limited now to four.

07:03

Now I haven't demoed the global search, but this just basically gives us a list of all of our products so we can go ahead and click straight on that and you can see here that when we add this to our

07:12

cart just to test it out, we only have four. So that's going to calculate all of that for you. Okay, so that didn't update but we'll fix that before

07:20

the course. All right. So now we're going to go ahead and register an account. So let's enter our details here and I'm going to choose

07:28

the same email address that I used for that order. Enter a password and hit register. Okay, so I'm now logged in. I've registered an account.

07:38

You can set up like email verification or anything like that on here. And if we head over to our order section, you can see sure enough that order is now in there.

07:46

Now if I was already signed in that order would be associated with my user and it would be good. Now what we also didn't see is over on our email that's going to head and send an order created email,

07:58

which I haven't filled out here just yet, but we're going to go ahead and fill that out in the course to give a summary of the items that have been ordered, the order number and of course a link to our

08:09

orders page if we are authenticated. We'll also be sending out emails when the order status changes. So what's going to happen over in the database here

08:19

if we just open up our orders table is we have a placed at column, a packaged at column and a shipped at column. Now you can choose as many of them as you want to as many as you want to include.

08:30

You might have lots of different steps of an order status. But once these are filled in, so if I fill in packaged at that's now going to detect

08:39

that this has been packaged and then once we fill in shipped at that's going to go ahead and detect that that's the case as well. Now this wouldn't have sent an email because we're not

08:50

triggering this from any particular location. But if you were to hook this up to an admin panel and you were to change them, what that will do is an event within your code will fire

09:00

off the correct email whether it's been shipped or packaged or whatever. So those are the main features here. But what we're going to do is really focus on these

09:10

product variations because we want to make this as flexible as possible. As you can see you pretty much got everything you need here for the kind of checkout experience that you want.

09:22

Another thing is now that you can see I'm signed in we can actually choose a pre-saved address. So if I were to fill this in now that will be ready for next time and we can use that.

09:31

Okay, so that was a huge introduction. Let's head over to the next part get Laravel, Breeze, Livewire and DebugBar set up so we can start building this out from scratch.

Episode summary

Welcome to the course! In this kickoff episode, we get an overview of what we're about to build—a full e-commerce platform with Laravel and Livewire, all from scratch. Rather than diving straight into code, we take some time to walk through the demo app, checking out the key features and the sort of flexibility we want to achieve in the project.

Here's what we explore:

Product Browsing & Categories: We start by browsing products, looking at how categories are set up with unlimited nesting, and see how flexible the association between products and categories is.
Product Variations & Filtering: We look at products with various options like sizes and colors, see how the sidebar lets customers filter by these, and play around with the price filter as well. This all feels really fast, thanks to MeliSearch.
Stock System: A peek into the stock management reveals a smart structure where each product variation (like a black shoe, size 8) gets its own record. Stock changes (like adding stock or making a purchase) are all recorded with detailed entries.
Cart & Checkout: Adding items to the cart, changing quantities, and moving through to checkout is all demoed. We also check out guest checkout, meaning a customer doesn't need an account to place an order but can create one afterwards to claim past orders.
Order Management: We see how orders can be associated with accounts, and how managing order status (like packaged or shipped) can trigger notification emails to customers. There's a robust email system planned, even if not fully fleshed out yet in the demo.

By the end of this intro, you'll feel comfortable with the features we're aiming for, like flexible product variations, user-friendly checkout experiences, and handy order management. In the next episode, we'll roll up our sleeves and start setting up Laravel, Breeze, Livewire, and DebugBar to get the project off the ground.

Ready to build something awesome? Let's get started!

Episode discussion

No comments, yet. Be the first!