在WordPress中使用jQuery有条件地打开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警告框可以工作。

谢谢。

编辑1：另一种方法可以使用，即：

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

在自动加载弹出窗口后（如在 WP 管理员中 Popup Maker 配置中定义的那样），有效关闭弹出窗口。

- BMM

Answer 1

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

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

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

或者更好的方法是像这样钩入 pumInit 事件。这样它会在弹窗实际准备就绪时立即打开。由于使用了 .on 事件绑定，因此在 head 中加载也是安全的。

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

最后，如果您想要一个可重复使用的解决方案，您可以创建自定义条件，并在我们的弹出窗口条件编辑器中使用。您只需要一个条件来进行真假检查。以下文档包含多个完整示例，您可以使用：

附：我是PM的首席开发人员，这是最佳答案；）

- Daniel Iser

---

对我来说，延迟可以工作，但监听器却不行。我没有足够的技能来理解为什么。 - Ramon K.

由于某种奇怪的原因，使用延迟方法时，弹出窗口在打开后立即关闭。 - TheYaXxE

我们正在使用最新版本的Popup Maker（顺便说一句，我们很喜欢它）。 对于上述事件监听器方法，当我们传入第二个参数（“＃popmake-2503”）时，我无法获取事件。如果我们在没有显式ID的情况下针对pumInit事件进行目标设置，则可以正常工作。 - mattLummus

Answer 2

你试图使用id选择器#popmake-2503来获取弹出窗口，但是在你的问题中看到它有类popmake-2503。所以尝试更改这一行：

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

- pgk

---

谢谢。有些东西已经改变了，是的。弹出窗口仍然没有显示，但我从控制台得到了以下错误：“Uncaught TypeError: Cannot read property 'meta' of undefined”（来自popup-maker-site.min.js插件文件）... - BMM

当然，如果您的元素有一个ID，更好的方法是使用它进行选择。重要的是正确选择该项。但是，因为在您的问题中没有提到所选元素具有ID，而是显示类，我认为您没有正确选择所需的元素。您可以尝试调试代码，通过放置console.log($('#popmake-2503'),'test');来确保您已正确选择元素。如果您可以将您的代码放在某个地方，我可以尝试更多地帮助您 :) - pgk

所以选择器没问题。但是我设法用另一种方式解决了这个问题（至少目前是这样）：弹出窗口会自动打开，但是如果用户已登录，则会自动关闭（用户不会注意到）。这意味着 $('#popmake-2503').popmake('open'); 无法打开弹出窗口，但是 $('#popmake-2503').popmake('close'); 可以关闭它。 - BMM

是的，这意味着您的元素已经被正确选择了。我没有看到代码，无法告诉您更多信息，但建议尝试添加所有事件的监听器并检查是否一切正常运行：例如$('#popmake-2503').on('popmakeBeforeOpen',function(e){console.log(this, 'test');});。 此外，您可以在不调用“open”的情况下仅选择元素，然后在控制台中进行操作-检查设置，在那里调用“open”等等。 另外，我不知道您是否尝试过FAQ中的所有原因。您还可以在popup-maker-site.js文件本身中放置console.logs。 - pgk

请查看我的答案，了解为什么它不能正常工作以及多种可能的解决方案。 - Daniel Iser

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

- Oleksii Shevchenko

---

根本不推荐这样做。大多数用户不只有一个弹出窗口，这将会同时禁用所有弹出窗口。原帖似乎想要打开一个特定的弹出窗口。 - Daniel Iser