PHP HTML JS

Voxel Popup Logout Confirmation

D Donald McGuinn · 327 views · Updated 2 years ago

CREDIT: Oli Ver.
This logout confirmation popup should be native in voxel for sure! This is a great UX for confirming when a user wants to log out.See it in action on The Voxel Guide.

This goes under functions.php on your child theme.

function custom_logout_without_confirmation() {
    if (isset($_GET['appout'])) {
        wp_logout();
        wp_redirect(home_url());
        exit();
    }
}
add_action('init', 'custom_logout_without_confirmation');

PHP · 8 lines

This goes in the URL field of any button or wordpress menu item.

?appout=true

HTML · 1 lines

Add this using the FluentSnippets plugin (free) to add to the header so it works on all pages OR add it to the HTML element on the page you have the log out button on.

window.addEventListener("load", function () {
    
    document.addEventListener("click", function (e) {
        var link = e.target.closest('a[href*="?appout=true"]');

        if (link) {
            // prevent the default link behavior
            e.preventDefault();

            // Check if Voxel is defined and show the alert
            if (typeof Voxel !== "undefined") {
                Voxel.alert("Would you like to log out?", "info");

                // Wait until the DOM is updated with the alert box
                setTimeout(function () {
                    // Find the close alert button and customize it
                    var closeAlertBtn = document.querySelector(
                        ".ts-btn.ts-btn-4.close-alert"
                    );

                    if (closeAlertBtn) {
                        closeAlertBtn.textContent = "Log out now";

                        closeAlertBtn.addEventListener(
                            "click",
                            function (event) {
                                event.preventDefault();
                                window.location.href =
                                    link.getAttribute("href");
                            }
                        );
                    }
                }, 0);
            }
        }
    });
    
});

JS · 38 lines

Discussion

Ask a question or share how you used this.

No comments yet — be the first.