Mastering Toastr Notifications in Laravel: A Step-by-Step Guide to Show Multiple Notifications

Step 1: Install Toastr in Your Laravel Project

Before we dive into the meat of the article, make sure you have Toastr installed in your Laravel project. You can do this using the following command:

npm install toastr

Alternatively, you can include Toastr via a CDN link in your Blade template:

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

Step 2: Create a Toastr Notification

Now, let’s create a basic Toastr notification in Laravel. In your controller, add the following code:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class NotificationController extends Controller
{
    public function showNotification()
    {
        toastr()->info('Hello, world!', 'Notification Title');
        return view('notifications');
    }
}

?>

In the above code, we’re using the `toastr()` helper function to create an info-type notification with the title “Notification Title” and the message “Hello, world!”. The `return view(‘notifications’)` line simply returns a view to render the notification.

Step 3: Show Multiple Toastr Notifications

To show multiple Toastr notifications, we’ll modify the previous code to create an array of notifications and loop through it:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class NotificationController extends Controller
{
    public function showNotifications()
    {
        $notifications = [
            ['type' => 'info', 'title' => 'Notification 1', 'message' => 'This is a info notification!'],
            ['type' => 'success', 'title' => 'Notification 2', 'message' => 'This is a success notification!'],
            ['type' => 'error', 'title' => 'Notification 3', 'message' => 'This is an error notification!'],
        ];

        foreach ($notifications as $notification) {
            toastr()->{$notification['type']}($notification['message'], $notification['title']);
        }

        return view('notifications');
    }
}

?>

In this example, we define an array of notifications with their corresponding types, titles, and messages. We then loop through the array using a `foreach` loop, creating a Toastr notification for each item using the `toastr()` helper function.

Customizing Toastr Notifications

Toastr notifications are highly customizable, allowing you to tailor them to your application’s unique style and branding. Here are some tips to get you started:

Configuring Toastr Options

Toastr provides various options to customize the notification behavior, such as:

• positionClass**: Specify the notification position (e.g., “toast-top-right” for top-right corner).
• timeout**: Set the notification timeout in milliseconds.
• extendedTimeOut**: Set the extended timeout for notifications that require user interaction.

options = [
    'positionClass' => 'toast-top-right',
    'timeout' => 3000,
    'extendedTimeOut' => 1000,
];

<style>
.toast {
    background-color: #333;
    color: #fff;
}
</style>