Laravel 8 E-Commerce - Send Order Confirmation Email

In this video we are going to learn about Send Order Confirmation Email.
So let see how can we Send Order Confirmation Email.
First of all lets create a mail for order Confirmation
So switch to the command prompt
And for crating the mail type the command


php artisan make:mail OrderMail

Now make sure you have configured mail in .env file


MAIL_MAILER=smtp
MAIL_HOST=smtp.googlemail.com
MAIL_PORT=465
MAIL_USERNAME=surfsidemedia.in@gmail.com
MAIL_PASSWORD=1234567890
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=surfsidemedia.in@gmail.com
MAIL_FROM_NAME=\"${APP_NAME}\"

Now swtich to the project
And go inside the App directory then Mail and from here lets open this OrderMail.php file
Now inside this file lets add the following code


<?php

namespace App\\Mail;

use App\\Models\\Order;
use Illuminate\\Bus\\Queueable;
use Illuminate\\Contracts\\Queue\\ShouldQueue;
use Illuminate\\Mail\\Mailable;
use Illuminate\\Queue\\SerializesModels;

class OrderMail extends Mailable
{
    use Queueable, SerializesModels;

    public Order $order;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct($order)
    {
        $this->order = $order;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->subject('Order Confirmation')->view('mails.order-mail');
    }
}

Now go to the resources directory and lets create a folder here mails
Inside this mails directory lets create a new file here
order-mail.blade.php
Now open this file
And here add the following code


<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
    <title>Order Confirmation</title>
</head>
<body>
    <p>Hi {{$order->firstname}} {{$order->lastname}}</p>
    <p>Your order has been successfully placed.</p>
    <br/>

    <table style=\"width: 600px; text-align:right\">
        <thead>
            <tr>
                <th>Image</th>
                <th>Name</th>
                <th>Quantity</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            @foreach($order->orderItems as $item)
                <tr>
                    <td><img src=\"{{asset('assets/images/products')}}/{{$item->product->image}}\" width=\"100\" /></td>
                    <td>{{$item->product->name}}</td>
                    <td>{{$item->quantity}}</td>
                    <td>${{$item->price * $item->quantity}}</td>
                </tr>
            @endforeach
            <tr>
                <td colspan=\"3\" style=\"border-top:1px solid #ccc;\"></td>
                <td style=\"font-size:15px;font-weight:bold;border-top:1px solid #ccc;\">Subtotal : ${{$order->subtotal}}</td>
            </tr>
            <tr>
                <td colspan=\"3\"></td>
                <td  style=\"font-size:15px;font-weight:bold;\">Tax : ${{$order->tax}}</td>
            </tr>
            <tr>
                <td colspan=\"3\"></td>
                <td  style=\"font-size:15px;font-weight:bold;\">Shipping : Free Shipping</td>
            </tr>
            <tr>
                <td colspan=\"3\"></td>
                <td style=\"font-size:22px;font-weight:bold;\">Total : ${{$order->total}}</td>
            </tr>
        </tbody>
    </table>    
</body>
</html>

Now lets open the CheckoutComponent Class file
And here lets create a function


public function sendOrderConfirmationMail($order)
    {
        Mail::to($order->email)->send(new OrderMail($order));
    }

and import the Mail on top of the page


use Illuminate\\Support\\Facades\\Mail;

Now call this function inside the PlaceOrder function
Here just before the closing curly bracket


$this->sendOrderConfirmationMail($order);

All donne now lets check this
So switch to the browser and refresh the page
Now lets add some product to cart
Now click on checkout and fill the checkout details and then click on Place order now
Order placed
Now lets check the email
And here you can see the email
Lets open this
And here is order details
Product images are not showing
Because this time this project is running on localhost
After deployment this project on live server
product image will displayed here.
So in this way you can Send Order Confirmation Email to the Customer.