How to create toast notification in laravel?

In this guide, we will explore how to create toast notifications in Laravel, Toast notifications are an essential part of modern web applications, improving the overall user experience. Whether you're a seasoned Laravel developer or just starting out, this tutorial will walk you through the process of implementing toast notifications in your Laravel application. So, let's dive in and start enhancing our Laravel applications with toast notifications.

Step 1 : CSS

:root {
    --toast-dark: #34495E;
    --toast-light: #ffffff;
    --toast-success: #0ABF30;
    --toast-error: #E24D4C;
    --toast-warning: #E9BD0C;
    --toast-info: #3498DB;
}
.notifications {
    position: fixed;
    top: 30px;
    right: 20px;
    z-index: 999;
}
.notifications :where(.toast, .column) {
    display: flex;
    align-items: center;
}
.notifications .toast {
    width: 400px;
    position: relative;
    overflow: hidden;
    list-style: none;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 10px;
    background: var(--toast-light);
    justify-content: space-between;
    animation: show_toast 0.3s ease forwards;
    border: 1px solid #e3eaef;
}
@keyframes show_toast {
    0% {
        transform: translateX(100%);
    }
    40% {
        transform: translateX(-5%);
    }
    80% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-10px);
    }
}
.notifications .toast.hide {
    animation: hide_toast 0.3s ease forwards;
}
@keyframes hide_toast {
    0% {
        transform: translateX(-10px);
    }
    40% {
        transform: translateX(0%);
    }
    80% {
        transform: translateX(-5%);
    }
    100% {
        transform: translateX(calc(100% + 20px));
    }
}
.toast::before {
    position: absolute;
    content: "";
    height: 3px;
    width: 100%;
    bottom: 0;
    left: 0;
    animation: progress 3s linear forwards;
}
@keyframes progress {
    100% {
        width: 0;
    }
}
.toast.success::before, .btn#success {
    background: var(--toast-success);
}
.toast.error::before, .btn#error {
    background: var(--toast-error);
}
.toast.warning::before, .btn#warning {
    background: var(--toast-warning);
}
.toast.info::before, .btn#info {
    background: var(--toast-info);
}
.toast .column i {
    font-size: 16px;
}
.toast.success .column i {
    color: var(--toast-success);
}
.toast.error .column i {
    color: var(--toast-error);
}
.toast.warning .column i {
    color: var(--toast-warning);
}
.toast.info .column i {
    color: var(--toast-info);
}
.toast .column span {
    font-size: 16px;
    margin-left: 12px;
}
.toast i:last-child {
    color: #aeb0d7;
    cursor: pointer;
}
.toast i:last-child:hover {
    color: var(--toast-dark);
}
@media screen and (max-width: 530px) {
    .notifications {
        width: 95%;
    }
    .notifications .toast {
        width: 100%;
        font-size: 1rem;
        margin-left: 20px;
    }
}

Step 2 : JS

var notifications = $(".notifications"),
    buttons = $(".buttons .btn");

var toastDetails = {
    success: {
        icon: 'fas fa-check-circle',
    },
    error: {
        icon: 'fas fa-times-circle',
    },
    warning: {
        icon: 'fas fa-exclamation-circle',
    },
    info: {
        icon: 'fas fa-info-circle',
    }
}

function removeToast(toast) {
    toast.addClass("hide");
    if(toast.timeoutId) clearTimeout(toast.timeoutId);
    setTimeout(function() { toast.remove(); }, 500);
}

function createToast(type, message) {
    var icon = toastDetails[type].icon;
    var toast = $("<li></li>");
    toast.addClass(`toast ${type}`);
    toast.html(`<div class="column">
                    <i class="${icon}"></i>
                    <span>${message}</span>
                </div>
                <i class="fas fa-times-circle"></i>`);
    toast.find('i.fas.fa-times-circle').click(function() { removeToast($(this).parent()); });
    notifications.append(toast);
    toast.timeoutId = setTimeout(function() { removeToast(toast); }, 3000);
}

Step 3 : Add fontawsome for icon

<!-- FONTAWSOME -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

Step 4 : HTML

Put this code before ending of body tag toast notifications will be displayed in this tag.

<ul class="notifications"></ul>

If you want to test it it HTML

<button class="btn btn-info" onclick="createToast('info', 'Info message');">Info</button>
<button class="btn btn-warning" onclick="createToast('warning', 'Warning message');">Warning</button>
<button class="btn btn-success" onclick="createToast('success', 'Success message');">Success</button>
<button class="btn btn-danger" onclick="createToast('error', 'Danger message');">Success</button>

Step 5 : Using with Laravel

In the controller return redirect back with a session key with a message, eg :- key : success , message : Success Message

return redirect()->back()->with('info','Info Message');
return redirect()->back()->with('warning','Warning Message');
return redirect()->back()->with('success','success Message');
return redirect()->back()->with('error','Error Message');

Now in html you you need to add this script this will retrive session message and display a toast notification.

@if (\Session::has('info'))
    <script>createToast('info','{!! \Session::get('info') !!}');</script>
    {{ \Session::forget('info') }}
@endif

@if (\Session::has('success'))
    <script>createToast('success','{!! \Session::get('success') !!}');</script>
    {{ \Session::forget('success') }}
@endif

@if (\Session::has('warning'))
    <script>createToast('warning','{!! \Session::get('warning') !!}');</script>
    {{ \Session::forget('warning') }}
@endif

@if (\Session::has('error'))
    <script>createToast('error','{!! \Session::get('error') !!}');</script>
    {{ \Session::forget('error') }}
@endif

How to create toast notification in laravel?

Tags

Related Posts

Categories

Subscribe Our Newsletters