Build a Web Shop From A-Z
In this course, together, we will build a web-shop from scratch. We'll use Laravel and Livewire to construct the storefront, and Stripe to manage payments and the checkout process. We'll even implement an "add to cart" functionality to allow for purchasing multiple items at once.
It should be fun! I hope you're excited. Let's get going.
Progress
Series Info
- Episodes
- 33
- Run Time
- 3h 24m
- Difficulty
- Advanced
- Last Updated
- Apr 24, 2024
- Version
- Latest
Series Episodes
- Scaffolding (4)
Here's the Plan
Hi, there. I'm excited to start this course with you. In this introductory video, we'll quickly review our objective, as well as the tools and technologies we'll be using.Project Scaffolding
Of course, the first step for any new project is to get our tooling in order. Let's install Laravel, Livewire, Alpine, and Jetstream.Initial Model Scaffolding
In this episode, I demonstrate how to scaffold models for our online store. I cover setting up models for products, variants, carts, and images, along with the corresponding migrations and factories.Database Seeding
Of course, we need some sample data to work with. As always, Laravel has us covered. We will use database seeders to populate our database with dummy data.
- The Storefront (14)
Designing Our Storefront
Now that we sufficient sample data to work with, we can begin scaling out our storefront. We can begin with our first Livewire component.Money Formatting
We now move on to the topic of money. Let's useMoneyobjects to properly handle money and apply the necessary automatic formatting.Designing the Product Page
In this episode, we will take just a bit of time to work on the design for the product page.Dynamic Product Image Selector
Next up, we should all users the ability to enlarge product images. We can use Alpine.js to make this process a cinch!Add to Cart Validation
Validation is an essential step for every form request in your application. In this episode, we'll validate a user's request to add a product to their shopping cart.Persist Our Cart Model
The next step is to save, or store our cart in the database.Persist the Cart Items
Now that we have our cart persisted, we can move on and also store each of our items within the cart.Add to Cart Success Notification
When an item is added to our cart, we should display a success notification message. Let's do that now.Cart Navigation Menu and Counter
Lets next add our "Cart" to the navigation area, and display the number of items inside the cart.Create the Cart Page
In this episode, we'll add a 'cart' page where users can review the contents of their respective carts.Delete Cart Items and Merge Variants
Let's next add an option to delete items from our cart and merge variant quantities.Incrementing and Decrementing Cart Quantities
We should allow for the option to increase and decrease the item quantity within our cart.Finalizing Our Cart
We can improve our shopping cart by displaying prices and the cart total. Let's work on that in this episode.Session Cart to User Cart Migration
Our next job is to merge the session-based cart into our user cart. Let's get going!
- Accepting Payments (8)
Stripe Setup
We're ready to begin working with Stripe. In this episode, we'll signup for Stripe and download their CLI helper.Cashier Setup and Stripe CLI Local Webhooks
Next up, we will install Laravel Cashier and take a look at how we can listen for Stripe webhooks directly from our local environment.Enable Automatic Tax Collection
Stripe makes it quite simple to activate automatic tax collection. I'll show you how to set it up in the lesson.Create a Stripe Checkout Session
Our customers need to provide their card information and pay us. Let's discuss how to create a checkout session using Stripe Checkout.Collect a Shipping Address During Checkout
Assuming that we require a shipping address, we can instruct Stripe to collect our customer's address during the checkout process.A First Look at the Checkout Success Object
When a checkout has completed, Stripe will fire a corresponding event. Lets take a look at the checkout success object sent by Stripe and how we can listen for incoming webhooks.Handle a Checkout Success Webhook
Now that we understand the essentials, let's review how to process the incoming Stripe webhook, fetch data from Stripe, and store the required information in our database.Empty the User's Cart After a Successful Payment
We can't forget to delete the user's cart data after a payment has been made. Let's take care of that now.
- Order Details (6)
Prepare the Order Confirmation Page
In this episode, we'll create an order confirmation page to inform our customer about the status of their payment.Deliver the Order Confirmation Email
Of course, we should notify our user after a successful payment to confirm their order details. Easy!Use Markdown to Render a Table
Instead of HTML, we can alternatively reach for Markdown to render our table. Let's give it a shot in this episode.Add a Button to View the Order
Next, we should include a button within your confirmation email that will link customers to their order confirmation page.Prepare an Order Details Page
In this lesson, we'll work on page that displays each customer's respective order details.Send an Abandoned Cart Email to the Customer
It might be a good idea to send a reminder email to inform users when they've abandoned items in their cart. We'll also schedule a command to clean up inactive session-based carts.
- Supplementary (1)
