jquery - 使用 jQuery 有条件地在 WordPress 中打开 Popup Maker 弹出窗口

Question

我正在尝试在 Wordpress 中有条件地加载弹出窗口。弹出窗口在插件 Popup Maker 中配置并且有一个 CSS 类“popmake-2503”。

我在主题的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 管理中的 Popup Maker 配置中所定义)。

Answer 1

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

我们很快就会解决这个问题，但请尝试在打开它之前添加一个短暂的超时:

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

或者更好的是连接到 pumInit像这样的事件。这样，一旦弹出窗口实际准备好，它就会打开。这也可以安全地加载到头部，因为它使用 .on 事件绑定(bind)

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可以在我们的弹出条件编辑器中使用。您只需要一个条件即可进行真假检查。以下文档包含您可以使用的多个完整示例:

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