1. Install Toastr JS plugin
To get started with using Toastr JS plugin in Laravel, you need to install it first. You can do this by running the following command in your terminal:
«`
npm install toastr
«`
This will install the Toastr JS plugin and its dependencies in your Laravel project.
2. Include Toastr JS and CSS files
Once you have installed the Toastr JS plugin, you need to include its JS and CSS files in your Laravel project. You can do this by adding the following lines of code in your `resources/js/app.js` file:
«`javascript
import ‘toastr/build/toastr.min.js’;
import ‘toastr/build/toastr.min.css’;
«`
After adding these lines of code, you need to recompile your assets by running the following command in your terminal:
«`
npm run dev
«`
This will compile your assets and include the Toastr JS and CSS files in your Laravel project.
3. Create a blade template for the notification message
Next, you need to create a blade template for the notification message. You can do this by creating a new blade file, for example `notification.blade.php`, in your `resources/views` directory. In this blade file, you can add the HTML markup for the notification message. Here’s an example of how the blade template can look like:
«`html
{{ $message }}
«`
In this example, we are using a `
` element to display the actual message, which is passed as a variable `$message`.
4. Add Toastr JS initialization code
After creating the blade template for the notification message, you need to add the Toastr JS initialization code to your Laravel project. You can do this by adding the following lines of code in your `resources/js/app.js` file:
«`javascript
window.toastr = require(‘toastr’);
window.showNotification = function(message, type) {
toastr.options = {
closeButton: true,
progressBar: true,
positionClass: ‘toast-top-right’,
timeOut: 5000
};
toastr[type](message);
}
«`
In this code, we are initializing Toastr JS and creating a global function `showNotification` that takes two parameters: `message` and `type`. The `message` parameter is the actual message that will be displayed in the notification, and the `type` parameter is the type of the notification (e.g., «success», «error», «warning», etc.).
5. Trigger the notification message
Now that you have added the Toastr JS initialization code, you can trigger the notification message in your Laravel project. You can do this by calling the `showNotification` function and passing the message and type as parameters. Here’s an example of how you can trigger the notification message:
«`javascript
showNotification(‘This is a success notification’, ‘success’);
«`
In this example, we are triggering a success notification with the message «This is a success notification». You can customize the message and type according to your needs.
6. Customize the notification message
To customize the notification message, you can modify the Toastr JS options in the `showNotification` function. Here are some of the options that you can customize:
– `closeButton`: Set it to `true` to display a close button in the notification message.
– `progressBar`: Set it to `true` to display a progress bar in the notification message.
– `positionClass`: Set it to the desired position class to change the position of the notification message (e.g., «toast-top-right», «toast-bottom-right», etc.).
– `timeOut`: Set it to the desired time in milliseconds to control how long the notification message will be displayed.
You can modify these options according to your needs to customize the notification message.
7. Conclusion
In this step-by-step guide, we have learned how to implement a notification message popup using the Toastr JS plugin in Laravel. We have covered the installation of the Toastr JS plugin, including its JS and CSS files, creating a blade template for the notification message, adding the Toastr JS initialization code, triggering the notification message, and customizing the notification message. By following these steps, you can easily add notification messages to your Laravel project using the Toastr JS plugin.
