Conditionally opening Popup Maker popup in wordpress with jQuery

Question

I am trying to conditionally load a popup in Wordpress. The popup is configured in the plugin Popup Maker and has a CSS class of "popmake-2503".

I've created a function in my theme's functions.php which loads a script conditionally:

// open popup
function open_popup() {
if( is_user_logged_in() && is_page('checkout') )
    {
    wp_enqueue_script(
        'open-popup',
        get_stylesheet_directory_uri() . '/open-popup.js',
array( 'jquery' )
            );
        }
    }
add_action( 'wp_footer', 'open_popup' );

In the open-popup.js file, I have the following:

jQuery(document).ready(function($) {
    alert ('running');
    $('#popmake-2503').popmake('open');
});

I have read the API but still I cant get the popup to fire, and no error shows in the console. The basic javascript alert works.

Thank you.

EDIT1: the other way around works, i.e.,

$('#popmake-2503').popmake('close');

works for effectively closing the popup after it is automatically loaded (as defined in the Popup Maker configurations in WP admin).

Answer 1

Your solution is correct but currently Popup Maker defers js loading so your code runs before the .popmake('open') function has been loaded and the popups initialized.

We are going to be addressing that soon, but try adding a short timeout before opening it:

jQuery(document).ready(function($) {
    setTimeout(function() {
        $('#popmake-2503').popmake('open');
    }, 2000);
});

or better yet hook into the pumInit event like so. That way it opens as soon as the popup is actually ready. This is also safe to load in the head as it uses .on event binding

jQuery(document).on('pumInit', '#popmake-2503', function () {
    PUM.open(2503); // Newer method than $('#popmake-2503').popmake('open'); and uses internal selector caching.
});

And lastly if you want a reusable solution you can create custom conditions that can be used in our popup condition editor. You only need one condition to do both true & false checking. The following doc includes multiple complete examples you can use:

PS I'm the lead developer for PM so this is the defacto best answer ;)