Question

我试图在Wordpress中有条件地加载弹出窗口。弹出窗口在插件Popup Maker中配置，其CSS类为＆＃34; popmake-2503＆＃34;。

我在主题的functions.php中创建了一个函数，它有条件地加载脚本：

// 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' );

在open-popup.js文件中，我有以下内容：

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

我已阅读API但仍然无法启动弹出窗口，并且控制台中未显示任何错误。基本的javascript警报有效。

谢谢。

EDIT1：相反的方式，即，

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

用于在自动加载后有效关闭弹出窗口（如WP管理员中的弹出式制作器配置中所定义）。

Answer 1

您的解决方案是正确的，但是当前Popup Maker推迟js加载，因此您的代码在加载.popmake（'open'）函数并初始化弹出窗口之前运行。

我们将尽快解决这个问题，但在打开它之前尝试添加一个短暂的超时：

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

或更好地挂钩pumInit事件，就像这样。这样一旦弹出窗口准备好就会打开。在使用.on事件绑定

时加载头部也是安全的

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

最后，如果你想要一个可重用的解决方案，你可以在我们的弹出条件编辑器中使用create custom conditions。您只需要一个条件来同时执行true和amp;错误检查。以下文档包含您可以使用的多个完整示例：

PS我是PM的首席开发人员所以这是事实上的最佳答案;）

Answer 2

您尝试使用ID选择器#popmake-2503获取弹出窗口，但我的问题是，它有类popmake-2503。所以试着改变这一行：

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

Answer 3

您可以避免使用jQuery。这允许在某些条件不成立时禁用插件。

add_action('wp', 'disablePopup');

function disablePopup () {
    if (/*Some condition is not true*/) return remove_action( 'wp_enqueue_scripts', 'popmake_load_site_scripts');
}

使用jQuery

3 个答案: