In This Topic,
We are going to see How to add an Email verification Function for Woocommerece using AJAX Call.
When the User Register first time, the user get the Email. The email contains the verification link.
Let’s start,
First, you have to create an HTML register. If you already have registered then you can use it.
Step 1:
Create functions in the function file.
Note: Please don’t add code to the parent theme’s fuction.php file. cause when you update the parent theme this file will be wiped entirely.
First, we localize the admin-ajax.php using wp_localize_script.
Here, I have localized the ajax URL and loading message.
function ajax_register_init(){
wp_localize_script( 'ajax-register-script', 'ajax_register_object', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'loadingmessage' => __('Sending user info, please wait...')
));
we create a function forget data which are inserted in register form and inserted in the table.
So, Here is the function
function ajax_register(){
// is checked, get the POST data and sign user on
$info = array();
$info['user_login'] = $_POST['username'];
$info['user_email'] = $_POST['email'];
$info['user_pass'] = $_POST['password'];
$phn_no = $_POST['billing_mobile_phone'];
$u_name = $_POST['username'];
$email_reg = $_POST['email'];
$pass_reg = $_POST['password'];
$user_signup = wp_insert_user( $info);
if(!is_wp_error($user_signup) ){
$unique = uniqid();
$get_key = get_user_meta($user_signup, 'activation_pass_key', true);
if ($get_key){
update_user_meta($user_signup, 'activation_pass_key', $unique);
update_user_meta($user_signup,'status','inactive');
}else{
add_user_meta($user_signup, 'activation_pass_key', $unique);
add_user_meta($user_signup,'status','inactive');
}
$get_phn = get_user_meta($user_signup, 'billing_mobile_phone', true);
if($get_phn){
update_user_meta($user_signup,'billing_mobile_phone',$phn_no);
}else{
add_user_meta($user_signup, 'billing_mobile_phone', $phn_no);
}
$get_last_link_date = get_user_meta($user_signup, 'last_link_date', true);
if($get_phn){
update_user_meta($user_signup,'last_link_date',strtotime(current_time('mysql')));
}else{
add_user_meta($user_signup, 'last_link_date',strtotime(current_time('mysql')));
}
$check_return = send_sms_email_verify($user_signup,$email_reg,$pass_reg,$unique,$another_take=0); // Send EMail and SMS verificationLink
if($check_return){
echo json_encode(array('loggedin'=>false,'message'=>__('Thank you for registering. Please check your e-mail (or Spam folder) for verify your account!!'),'mail_sent'=>$check_return));
}
}else{
$exists = email_exists( $email_reg );
if ( $exists ) {
$user_reg = get_user_by( 'email', $email_reg );
$userId_reg = $user_reg->ID;
$status = get_user_meta($userId_reg,'status',true);
$check_last_date = get_user_meta($userId_reg, 'last_link_date', true);
if(($status == 'inactive') && (strtotime(current_time('mysql')) - $check_last_date > 15 * 60)){
$unique = uniqid();
$get_key = get_user_meta($userId_reg, 'activation_pass_key', true);
if($get_key){
update_user_meta($userId_reg, 'activation_pass_key', $unique);
}else{
update_user_meta($userId_reg, 'activation_pass_key', $unique);
}
$get_last_link_date = get_user_meta($userId_reg, 'last_link_date', true);
if($get_last_link_date){
update_user_meta($userId_reg,'last_link_date',strtotime(current_time('mysql')));
}else{
add_user_meta($userId_reg, 'last_link_date', strtotime(current_time('mysql')));
}
$check_return = send_sms_email_verify($userId_reg,$email_reg,$pass_reg,$unique,$another_take=1); // Send EMail and SMS verificationLink
if($check_return){
echo json_encode(array('loggedin'=>false,'message'=>__('You are already registered with us, please check your e-mail for verify your account!!' ),'mail_sent'=>$check_return));
}
}else{
echo json_encode(array('loggedin'=>false, 'message'=>__('Email Address already taken! Please login with using same address.')));
}
}else{
echo json_encode(array('loggedin'=>false, 'message'=>__('Username or email already taken.')));
}
}
exit;
}
add_action( 'wp_ajax_register_user_new', 'ajax_register',20 );
add_action( 'wp_ajax_nopriv_register_user_new', 'ajax_register',20 );
In Function, Get all data from $_POST using AJAX call in JQUERY.
Now, We create a function For Email. Here, we use the wp_mail function to send mail.
It’s a WordPress default function for sending mail.
In this function, HTML is here for Email.
So, here is the function for Email HTML.
function send_sms_email_verify($user_id,$email_reg,$pass_reg,$unique,$another_take){
$encrpytData = 'get_user_'.$user_id.'_'.$pass_reg;
$url = site_url() . '/?verificationaccount='.base64_encode($encrpytData).'&akey=' . $unique;
$contact_url = site_url() . '/contact-us';
$user_info = get_userdata($user_id);
$username = $user_info->user_login;
$to = $email_reg;
$logo = '<img src="https://i.imgur.com/tM4bO0s.png" alt="EMAIL" style="display:block; height: auto; margin:0 auto">';
$subject = 'Activate Your Account';
$body = '<html><body style="background:#efefef;">';
$body .= '<table class="table" cellpadding="0" cellspacing="0" width="850" align="center" style=" border-radius: 4px; overflow: hidden;">';
$body .= '<tbody>
<tr>
<td colspan="2" style="background:#26c281;">
<table class="header" cellpadding="0" cellspacing="0" width="100%" style="padding: 30px 40px;">
<tbody>
<tr><td> </td></tr>
<tr><td style="color: #fff; font-family: sans-serif; font-size: 32px; font-weight: normal; letter-spacing: 1px; line-height: 40px;text-align: center;">' . $logo. '</td></tr>
<tr><td> </td></tr>
</tbody>
</table>
</td>
</tr>';
$body .= '<tr class="col-text-tr" >
<td class="col-text" colspan="2"
style="font-family: sans-serif;font-family: sans-serif;background:#fff;
padding: 30px 40px;
font-size: 16px;">
<h4 style="font-size: 25px; font-weight: bold;text-align: center;">' . $subject. ' </h4>
<p>Hi ' . $username. ', </p>
<p>Please click on the link below to activate your account:</p>
<p><a href="' . $url . '" target="_blank">' . $url . '</a> </p>
<br><p>-- Team</p>
</td>
</tr>
</tbody>
</table></body></html';
$headers = array();
$headers[] = 'Content-Type: text/html; charset=UTF-8';
$emailsent = wp_mail($to, $subject, $body, $headers);
return $emailsent;
}
Step 2:
AJAX call in JQUERY.
Here, we add Jquery to get data which submit on the register from.
This value we get on our function using $_POST.
Here, is the JQUERY code. Put this in your js file where you put all the script.
$('form#register').on('submit', function(e){
$('form#register #valid_username').hide();
$('form#register #valid_email').hide();
$('form#register #valid_password').hide();
if($('span.error').length > 0){return false;}
var username = $('form#register #reg_username').val();
var password = $('form#register #reg_password').val();
var emailId = $('form#register #reg_email').val();
if(ValidateUsername(username) == false && ValidateEmail(emailId) == false ){
$('form#register #valid_username').show().text('Username field allowed only alphanumeric and underscore and between 3 to 20 characters.!!!');
$('form#register #reg_username').focus();
$('form#register #valid_email').show().text('Email address is not valid!!');
return false;
}else if(ValidateUsername(username) == false){
$('form#register #valid_username').show().text('Username field allowed only alphanumeric and underscore and between 3 to 20 characters.!!!');
$('form#register #reg_username').focus();
return false;
}else if(ValidateEmail(emailId) == false ){
$('form#register #valid_email').show().text('Email address is not valid!!');
$('form#register #reg_email').focus();
return false;
}else{
$('form#register #valid_username').hide();
$('form#register #valid_email').hide();
}
$('form#register p.status').show().text(ajax_login_object.loadingmessage);
var phn_no = $('form#register #reg_billing_mobile_phone').val();
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_register_object.ajaxurl,
data: {
action: 'register_user_new',
'username': $('form#register #reg_username').val(),
'email': $('form#register #reg_email').val(),
'password': $('form#register #reg_password').val(),
'security': $('form#register #security').val(),
'billing_mobile_phone': phn_no },
success: function(data){
$('form#register p.status.success').hide();
swal(data.message);
if(data.message == 'Please provide us valid email address!!!'){
$('form#register p.status').text('');
$('form#register #valid_email').text(data.message).show();
$('form#register #valid_email').show();
$('form#register #reg_email').focus();
$('form#register #valid_username').hide();
}
else if(data.message == 'Thank you for registering. Please check your e-mail (or Spam folder) for verify your account!!'){
$('form#register p.status:not(.username,.email)').show().text(ajax_login_object.loadingmessage);
$('form#register p.status:not(.username,.email)').addClass("success");
$('form#register p.status.success').hide();
$('form#register #valid_email').hide();
$('form#register #valid_username').hide();
$('form#register')[0].reset();
$('span.msg.pass').hide();
$('.woocommerce-password-strength,.woocommerce-password-hint').hide();
}
else{
$('form#register p.status:not(.username,.email)').show().text(ajax_login_object.loadingmessage);
$('form#register p.status:not(.username,.email)').addClass("success");
$('form#register p.status:not(.username,.email)').show().text(data.message);
$('form#register #valid_email').hide();
$('form#register #valid_username').hide();
}
},error:function(data){
$('form#register p.status').text('Something goes wrong!! Please try again');
}
});
e.preventDefault();
});
Here, we take submit of the register. On submit We get all input values.
NOTE: Please, change Input Ids and classes as per your HTML register.
For more Please, review the video.
For more WooCommerce Customization Please, Visit Here.
Hope guys, you find something useful.😀
