javascript - 加载错误 wc_print_notices 以更正 woocommerce 登录或注册表单

Question

我已经在弹出元素中编写了 woocommerce 登录和注册表单。我还调用了<?php wc_print_notices(); ?>弹出窗口，以便在适用时给出错误消息。我面临的挑战是在提交后显示正确的表单以及相关的登录或注册错误。

这是我在弹出窗口中使用的 php 表单。弹出窗口显示一个表单，具体取决于用户选择的是标题sign in还是register标题。这一切都有效。

function separate_registration_form() {
if ( is_admin() ) return;
ob_start();
if ( is_user_logged_in() ) {
    wc_print_notices();
    } else {
        ?>
          <?php wc_print_notices(); ?>
          <form id="woo-register-form" method="post">...etc...</form>
          <form id="woo-login-form" method="post">...etc...</form>
       <?php
    }
    return ob_get_clean();
}

我目前的解决方案是当类.woocommerce-error在 DOM 中时添加一个 JS 触发器以显示弹出窗口。但在这种情况下，它显示了两种形式，我正在寻找如何调用与链接错误相关的正确形式。因此，当有人输入错误的登录密码时，页面加载后会显示带有登录表单的弹出窗口。这可以用 JS 或 PHP 完成吗？还是组合？

标签： javascriptphpwoocommercepageload

Answer 1

在深入研究了表单的​​功能之后，我提出了以下解决方案。

表单需要有一个action属性。所以这个action属性将在提交表单后出现在地址栏中。然后您可以添加 JS 来定义action名称是否在地址路径中以及是否.woocommerce-error在 DOM 中以触发弹出窗口。

所以像这样：

function separate_registration_form() {
if ( is_admin() ) return;
ob_start();
if ( is_user_logged_in() ) {
    wc_print_notices();
    } else {
        ?>
          <?php wc_print_notices(); ?>
          <form id="woo-register-form" action="#register" method="post">...etc...</form>
          <form id="woo-login-form" action="#login" method="post">...etc...</form>
       <?php
    }
    return ob_get_clean();
}

让我们假设login-trigger和register-trigger是显示表单的按钮。重要的是在页面加载后添加这些操作。JS 将是：

$(window).on('load', function(){
    /*check if #register is in url*/
    if(location.href.indexOf("/#register") > -1){
        /*check if error is in the DOM*/
        if( $('.woocommerce-error').length){
            /*all good, fire off the popup*/
            $('.register-trigger').trigger('click'); 
        }
    }
    /*same for login*/
    if(location.href.indexOf("/#login") > -1){
        if( $('.woocommerce-error').length){
            $('.login-trigger').trigger('click');
        }
    }
});