Laravel 8 E-Commerce - Send Order Confirmation Email

In this video, we will learn how to send an order confirmation email.

Let's explore the steps to send an order confirmation email.

First, we need to create a mail for order confirmation. To do this, switch to the command prompt and type the following command:


php artisan make:mail OrderMail

Make sure you have configured the mail settings in the .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}"

Next, switch to the project and navigate to the App directory, then to the Mail directory. Open the OrderMail.php file and 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 create a new folder called mails. Inside this folder, create a new file called order-mail.blade.php. Open this file and 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>
    


    <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>

Next, open the CheckoutComponent class file and create a new function:


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

Import the Mail class at the top of the page:


use Illuminate\Support\Facades\Mail;

Call this function inside the PlaceOrder function, just before the closing curly bracket:


$this->sendOrderConfirmationMail($order);

That's it! Let's test the functionality.

Switch to the browser and refresh the page. Add some products to the cart, then click on "Checkout" and fill in the checkout details. Click on "Place Order" to complete the order.

Once the order is placed, check your email. You should receive an order confirmation email.

Open the email to view the order details. Note that the product images may not display because the project is currently running on localhost. However, after deploying the project to a live server, the product images will be displayed.

In this way, you can send an order confirmation email to the customer.