0

I'm currently working on a WordPress login popup, which is created as a plugin. I am relatively new to jQuery and AJAX in particular. I have a small issue with the return value always being 0, though I think this is actually the success message and it's not returning anything.

Any help would be appreciated.

1. Ajaxurl defined

wp_localize_script(
    'mytheme', 'Params', apply_filters( 'js_params', array(
        'siteUrl' => esc_url( site_url( '/' ) ),
        'homeUrl' => esc_url( home_url( '/' ) ),
        'ajaxUrl' => esc_url( admin_url( 'admin-ajax.php' ) ),
        ),
    ) )
);

2. Function login form

function login_form( $atts = array() ) {

    $output = '';

    wp_enqueue_script( 'jquery-ui-tabs', true );
    wp_enqueue_script( 'loginform' );

    $class .= " login-form login-form-container";

    $output .= '<div class="' . $class . '"';

    $output .= '>';
    
    $output .= '<div class="login-form-inner">';

    /* Title */
    $output .= '<div class="login-form-title-container">';
    $output .= '<h3 class="login-form-title">';
    $output .= esc_html__( 'Login' );
    $output .= '</h3>';
    $output .= '</div>';

    ob_start();

    ?>
    <form class="login-form" action="<?php echo esc_url( get_permalink( wc_get_page_id( 'myaccount' ) ) ); ?>" method="post">
            <?php do_action( 'woocommerce_login_form_start' ); ?>

            <p class="login-usernam">
                <label for="username"><?php esc_html_e( 'Username or email address'); ?>&nbsp;<span class="required">*</span></label>
                <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
            </p>
            <p class="login-password">
                <label for="password"><?php esc_html_e( 'Password', ); ?>&nbsp;<span class="required">*</span></label>
                <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password" />
            </p>

            <?php do_action( 'woocommerce_login_form' ); ?>

            <p class="login-submit">
                <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
                <input id="wp-submit" type="submit" class="<?php echo apply_filters( 'wvc_login_form_submit_button_class', 'button button-primary' ); ?>" name="login" value="<?php esc_attr_e( 'Log in'); ?>">
            </p>

            <?php do_action( 'woocommerce_login_form_end' ); ?>
        </form>
    <?php

    $output .= ob_get_clean();

    $output .= '</div><!--.login-form-inner-->';

    $output .= '</div><!--.login-form-->';

    return $output;
}

3. Function callback

function get_login_form() {

    if ( function_exists( 'login_form' ) ) {
        echo login_form();
    }
    exit;
}

add_action( 'wp_ajax_get_login_form', 'get_login_form' );
add_action( 'wp_ajax_nopriv_get_login_form', 'get_login_form' );

4. Jquery

        loginPopup : function() {

            var $body = $( 'body' );

            $( document ).on( 'click', '.account-item-icon-user-not-logged-in, .close-loginform-button', function( event ) {
                event.preventDefault();

                if ( $body.hasClass( 'loginform-popup-toggle' ) ) {

                    $body.removeClass( 'loginform-popup-toggle' );

                } else {
                    
                    $body.removeClass( 'overlay-menu-toggle' );

                    if ( $( '.wvc-login-form' ).length ) {

                        $body.addClass( 'loginform-popup-toggle' );

                    } else {
                        /* AJAX call */
                        $.post( Params.ajaxUrl, { action : 'get_login_form' }, function( response ) {
                            
                            console.log( response );

                            if ( response ) {

                                $( '#loginform-overlay-content' ).append( response );

                                $body.addClass( 'loginform-popup-toggle' );
                            }
                        } );
                    }
                }
            } );
3
  • 1
    "3. Function callback" - where did you place the code? In the main plugin file? Because I'm guessing your add_action() calls are being executed late, or simply, the actions are not properly registered. Try visiting /wp-admin/admin-ajax.php?action=get_login_form on the site - do you see 0? Also, you should consider using the REST API which gives a better error or response data..
    – Sally CJ
    Mar 21, 2021 at 6:50
  • I placed in separate file, which called in theme. You can see the screenshot prnt.sc/10rgy4w I tried as you said and received '0'
    – Hung PD
    Mar 21, 2021 at 8:34
  • How do you call that ajax_includes() function; in what hook, if any? But you should answer that via your question, i.e. edit it and include the details, including the code in the screenshot.
    – Sally CJ
    Mar 21, 2021 at 9:15

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.