How to prevent notification overlaping with PNotify

I’m using PNotify library to show dynamic notifications on one of the projects that i’m currently working on. The problem that i had was that the notifications were overlapping each other on the Desktop frontend. That was not my desired behavior, as I have some notifications that I  want to display for more than 30 minutes(don’t ask me why ;)).

After some research, i found out that the way i was creating the notifications were wrong. Basically, as stated on the docs, the stack must be created once, for all notifications, to prevent overlap. So, if you are creating the PNotify instance inside a function, just create the stack outside the function and pass it as a parameter, or create it outside the function as a global variable.

You can’t just pass an object literal as a stack if you want multiple notices. You need to create a new variable and pass that. This is because PNotify will use that object to store the notices that go into it.

So, my current code was:

Echo.channel('notifications')
    .listen('.notification', (e) => {
        var stack_bottomright = {    "dir1": "up",    "dir2": "left",    "firstpos1": 50,    "firstpos2": 25};
        new PNotify({
            title: e.title,
            type: e.type || 'info',
            delay: e.delay || 5000,
            hide: true,
            text: e.text,
            addclass: "stack-bottomright",
            stack: stack_bottomright,
            after_init: function (notice) {

                notice.attention(e.attention || 'bounce');
            }
        });
    });

So all I had to do was remove the stack_bottomright variable to be outside the Echo.channel call. By the way I’m using Laravel Echo to get the notifications that are being broadcast by the server. The final code is as follows:

var stack_bottomright = {    "dir1": "up",    "dir2": "left",    "firstpos1": 50,    "firstpos2": 25};https://i.imgur.com/OPd5rSH.png
Echo.channel('notifications')
    .listen('.notification', (e) => {
        new PNotify({
            title: e.title,
            type: e.type || 'info',
            delay: e.delay || 5000,
            hide: true,
            text: e.text,
            addclass: "stack-bottomright",
            stack: stack_bottomright,
            after_init: function (notice) {

                notice.attention(e.attention || 'bounce');
            }
        });
    });

Maybe this could save hours of research for someone in the future.