WooCommerce: Custom OTP plugin doesn't work properly on Checkout - javascript

I have this plugin for my site that can verify OTP. It shows and works perfectly on the registration page.
I wanted to add the exact same field to my checkout register. I've added the hook of Woocommerce checkout place. It shows and fits perfectly, but it doesn't work when I try to check the button. I've tested it and it doesn't send the OTP. In other words, it's just a field that verifying that does not function as it does on the register page. picture one is how it should work after I verify.
The second picture is on the checkout page that only appears but doesn't do anything:
Can someone kindly point out what I'm doing wrong and how to fix it?
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
class Xoo_Ml_Phone_Frontend{
protected static $_instance = null;
public $settings;
public static function get_instance(){
if ( is_null( self::$_instance ) ) {
self::$_instance = new self();
}
return self::$_instance;
}
public function __construct(){
$this->settings = xoo_ml_helper()->get_phone_option();
$this->hooks();
}
public function hooks(){
if( $this->settings['r-default-country-code-type'] === 'geolocation' ){
add_action( 'init', array( $this, 'fetch_geolocation' ), 0 );
}
if( $this->settings['l-enable-login-with-otp'] === "yes" ){
add_action( 'woocommerce_login_form_end', array( $this, 'wc_login_with_otp_form' ) );
add_filter( 'gettext', array( $this, 'wc_login_username_field_i8n' ), 999, 3 );
}
if( $this->settings['r-enable-phone'] === "yes" ){
add_action( 'woocommerce_register_form_start', array( $this, 'wc_register_phone_input' ) );
add_action( 'woocommerce_edit_account_form_start', array( $this, 'wc_myaccount_edit_phone_input' ) );
}
add_action( 'wp_enqueue_scripts' ,array( $this,'enqueue_styles' ) );
add_action( 'wp_enqueue_scripts' , array( $this,'enqueue_scripts' ), 0 );
}
public function fetch_geolocation(){
Xoo_Ml_Geolocation::get_data();
}
public function wc_login_with_otp_form(){
$args = self::wc_register_phone_input_args( array(
'cc_show' => $this->settings['l-enable-cc-field']
) );
$args = apply_filters( 'xoo_ml_wc_otp_login_form', $args );
return xoo_ml_get_login_with_otp_form( $args );
}
//Enqueue stylesheets
public function enqueue_styles(){
wp_enqueue_style( 'dashicons' );
if( !wp_style_is( 'select2' ) ){
wp_enqueue_style( 'select2', "https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" );
}
wp_enqueue_style( 'xoo-ml-style', XOO_ML_URL.'/assets/css/xoo-ml-style.css', array(), XOO_ML_VERSION );
$style = '';
if( $this->settings[ 'l-login-display' ] === "yes" ){
$style = "
.xoo-el-form-login{
display: none;
}
";
}
wp_add_inline_style('xoo-ml-style', $style );
}
//Enqueue javascript
public function enqueue_scripts(){
if( !wp_script_is( 'select2' ) ){
wp_enqueue_script( 'select2', "https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js", array('jquery'), XOO_ML_VERSION, true ); // Main JS
}
if( xoo_ml_helper()->get_phone_option('m-operator') === 'firebase' ){
wp_enqueue_script( 'firebase', 'https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js', array(), false, true );
wp_enqueue_script( 'firebase-auth', 'https://www.gstatic.com/firebasejs/7.21.0/firebase-auth.js', array(), false, true );
}
wp_enqueue_script( 'xoo-ml-phone-js', XOO_ML_URL.'/assets/js/xoo-ml-phone-js.js', array('jquery'), XOO_ML_VERSION, true ); // Main JS
$settings = $this->settings;
wp_localize_script('xoo-ml-phone-js','xoo_ml_phone_localize',array(
'adminurl' => admin_url().'admin-ajax.php',
'resend_wait' => $settings['otp-resend-wait'],
'phone_form_classes' => json_encode( self::phone_form_classes() ),
'auto_submit_reg' => $settings['r-auto-submit'],
'show_phone' => $settings['r-phone-field'],
'otp_form_type' => $settings['m-otp-form-type'],
'operator' => $settings['m-operator'],
'inline_otp_verify_btn' => apply_filters( 'xoo_ml_inline_otp_verify', '<span class="xoo-ml-inline-verify">'.__( 'Verify', 'mobile-login-woocommerce' ).'</span>' ),
'strings' => array(
'verified' => __( '<span class="dashicons dashicons-yes"></span>', 'mobile-login-woocommerce' ),
'verify' => __( 'Verify', 'mobile-login-woocommerce' ),
'placeholderInlineOTP' => __( 'Enter OTP', 'mobile-login-woocommerce' )
),
'notices' => array(
'empty_phone' => xoo_ml_add_notice( __( 'Please enter a phone number', 'mobile-login-woocommerce' ), 'error' ),
'empty_email' => xoo_ml_add_notice( __( 'Email address cannot be empty.', 'mobile-login-woocommerce' ), 'error' ),
'empty_password'=> xoo_ml_add_notice( __( 'Please enter a password.', 'mobile-login-woocommerce' ), 'error' ),
'invalid_phone' => xoo_ml_add_notice( __( 'Please enter a valid phone number without any special characters & country code.', 'mobile-login-woocommerce' ), 'error' ),
'try_later' => xoo_ml_add_notice( __( 'Something went wrong. Please try later', 'mobile-login-woocommerce' ), 'error' ),
'verify_error' => xoo_ml_add_notice( __( 'Please verify your mobile number', 'mobile-login-woocommerce' ), 'error' ),
'error_placeholder' => xoo_ml_add_notice( '%s', 'error' ),
'success_placeholder' => xoo_ml_add_notice( '%s', 'success' ),
'firebase_api_error' => xoo_ml_add_notice( __( 'Firebase API key is empty. Please setup firebase keys, read documentation.', 'mobile-login-woocommerce' ), 'error' ),
),
'login_first' => $settings['l-login-display'],
'html' => array(
'otp_form_inline' => xoo_ml_helper()->get_template( "xoo-ml-inline-otp-input.php", array(), '', true ),
'otp_form_external' => xoo_ml_helper()->get_template( "xoo-ml-external-otp-form.php", array(), '', true ),
),
'firebase' => array(
'api' => xoo_ml_helper()->get_service_option('fb-api-key'),
)
));
if( $settings['m-operator'] === 'firebase' && xoo_ml_helper()->get_service_option('fb-config') ){
wp_add_inline_script('xoo-ml-phone-js', 'xoo_ml_phone_localize.firebase.config = '. htmlspecialchars_decode( xoo_ml_helper()->get_service_option('fb-config') ) );
}
}
public static function wc_register_phone_input_args( $args = array() ){
$default_args = array(
'label' => __('Phone', 'mobile-login-woocommerce'),
'cont_class' => array(
'woocommerce-form-row',
'woocommerce-form-row--wide',
'form-row form-row-wide'
),
'input_class' => array(
'woocommerce-Input',
'input-text',
'woocommerce-Input--text'
)
);
return wp_parse_args( $args, $default_args );
}
public function wc_myaccount_edit_phone_input(){
return xoo_ml_get_phone_input_field( self::wc_register_phone_input_args(
array(
'form_type' => 'update_user',
'default_phone' => xoo_ml_get_user_phone( get_current_user_id(), 'number' ),
'default_cc' => xoo_ml_get_user_phone( get_current_user_id(), 'code' ),
)
) );
}
public function wc_register_phone_input(){
return xoo_ml_get_phone_input_field( self::wc_register_phone_input_args() );
}
public static function phone_form_classes(){
return apply_filters( 'xoo_ml_phone_form_classes', array(
'woocommerce-form-register'
) );
}
public function wc_login_username_field_i8n( $translation, $text, $domain ){
if( $domain === 'woocommerce' && ( strcmp( $text, 'Username or email' ) === 0 || strcmp( $text, 'Username or email address' ) === 0 ) ){
return __( 'Phone or Email address', 'mobile-login-woocommerce' );
}
return $translation;
}
}
function xoo_ml_phone_frontend(){
return Xoo_Ml_Phone_Frontend::get_instance();
}
xoo_ml_phone_frontend();
And this is what I added that doesn't work properly check the 2nd picture it has no function verify does not do anything:
if( $this->settings['r-enable-phone'] === "yes" ){
add_action( 'woocommerce_before_checkout_registration_form', array( $this, 'wc_register_phone_input' ) );
add_action( 'woocommerce_register_form_start', array( $this, 'wc_register_phone_input' ) );
add_action( 'woocommerce_edit_account_form_start', array( $this, 'wc_myaccount_edit_phone_input' ) );
}

Related

How to check JS Webauthn Assertion in PHP 8.1?

I'm trying to implement WebAuthn in a JavaScript/PHP project and I'm "stuck" at the final assertion verification process.
In detail, I pass the "assertion" parameters from JavaScript (Jquery) to PHP script like this:
navigator.credentials.get( { publicKey: {
allowCredentials: [...],
challenge: Uint8Array.from( ..., c => c.charCodeAt( 0 ) ),
rpId: window.location.hostname,
timeout: 60000,
userVerification: 'preferred'
} } )
.then( ( assertion ) => {
$.ajax( { data: 'login=' + encodeURIComponent( JSON.stringify( {
...,
'rawid': new Uint8Array( assertion.rawId ),
'authenticatordata': new Uint8Array( assertion.response.authenticatorData ),
'clientdatajson': new Uint8Array( assertion.response.clientDataJSON ),
'signature': new Uint8Array( assertion.response.signature )
} ) ) } )
And once the "public key" corresponding to the authenticator employed by the user has been identified within a database, I try to validate in PHP 8.1 the "assertion" in this way:
$jsonInput = json_decode( '{"authenticatordata":{"0":201,"1":157,"2":215,"3":147,"4":42,"5":142,"6":165,"7":93,"8":198,"9":108,"10":247,"11":140,"12":253,"13":224,"14":178,"15":122,"16":185,"17":204,"18":239,"19":151,"20":3,"21":24,"22":2,"23":25,"24":212,"25":39,"26":42,"27":95,"28":255,"29":195,"30":201,"31":113,"32":5,"33":0,"34":0,"35":0,"36":16},"clientdatajson":{"0":123,"1":34,"2":116,"3":121,"4":112,"5":101,"6":34,"7":58,"8":34,"9":119,"10":101,"11":98,"12":97,"13":117,"14":116,"15":104,"16":110,"17":46,"18":103,"19":101,"20":116,"21":34,"22":44,"23":34,"24":99,"25":104,"26":97,"27":108,"28":108,"29":101,"30":110,"31":103,"32":101,"33":34,"34":58,"35":34,"36":77,"37":68,"38":65,"39":119,"40":77,"41":68,"42":65,"43":119,"44":77,"45":68,"46":65,"47":119,"48":77,"49":103,"50":34,"51":44,"52":34,"53":111,"54":114,"55":105,"56":103,"57":105,"58":110,"59":34,"60":58,"61":34,"62":104,"63":116,"64":116,"65":112,"66":115,"67":58,"68":47,"69":47,"70":109,"71":111,"72":114,"73":109,"74":105,"75":110,"76":111,"77":46,"78":114,"79":101,"80":115,"81":105,"82":101,"83":108,"84":46,"85":99,"86":111,"87":109,"88":34,"89":44,"90":34,"91":99,"92":114,"93":111,"94":115,"95":115,"96":79,"97":114,"98":105,"99":103,"100":105,"101":110,"102":34,"103":58,"104":102,"105":97,"106":108,"107":115,"108":101,"109":125},"signature":{"0":48,"1":69,"2":2,"3":33,"4":0,"5":251,"6":22,"7":162,"8":18,"9":206,"10":81,"11":110,"12":4,"13":3,"14":217,"15":148,"16":51,"17":132,"18":130,"19":31,"20":122,"21":186,"22":65,"23":73,"24":195,"25":170,"26":106,"27":35,"28":90,"29":149,"30":56,"31":1,"32":58,"33":222,"34":51,"35":69,"36":212,"37":2,"38":32,"39":77,"40":161,"41":139,"42":133,"43":49,"44":79,"45":218,"46":34,"47":45,"48":115,"49":178,"50":156,"51":139,"52":185,"53":13,"54":197,"55":248,"56":116,"57":217,"58":81,"59":111,"60":117,"61":68,"62":44,"63":141,"64":197,"65":87,"66":68,"67":1,"68":89,"69":222,"70":154}}' );
$publickey = json_decode( '{"0":48,"1":89,"2":48,"3":19,"4":6,"5":7,"6":42,"7":134,"8":72,"9":206,"10":61,"11":2,"12":1,"13":6,"14":8,"15":42,"16":134,"17":72,"18":206,"19":61,"20":3,"21":1,"22":7,"23":3,"24":66,"25":0,"26":4,"27":229,"28":126,"29":127,"30":191,"31":207,"32":67,"33":42,"34":66,"35":212,"36":251,"37":1,"38":126,"39":36,"40":232,"41":163,"42":188,"43":151,"44":84,"45":50,"46":83,"47":251,"48":29,"49":196,"50":24,"51":208,"52":131,"53":96,"54":190,"55":14,"56":239,"57":104,"58":123,"59":78,"60":90,"61":70,"62":76,"63":54,"64":211,"65":91,"66":74,"67":243,"68":252,"69":69,"70":192,"71":132,"72":245,"73":206,"74":214,"75":67,"76":210,"77":165,"78":46,"79":230,"80":191,"81":6,"82":19,"83":241,"84":201,"85":188,"86":235,"87":232,"88":84,"89":130,"90":185}', TRUE );
$jsonInput->authenticatordata = ( array ) $jsonInput->authenticatordata; // [201,157,215,147,42,142,165,93,198,108,247,140,253,224,178,122,185,204,239,151,3,24,2,25,212,39,42,95,255,195,201,113,5,0,0,0,16]
$jsonInput->clientdatajson = ( array ) $jsonInput->clientdatajson; // [123,34,116,121,112,101,34,58,34,119,101,98,97,117,116,104,110,46,103,101,116,34,44,34,99,104,97,108,108,101,110,103,101,34,58,34,77,68,65,119,77,68,65,119,77,68,65,119,77,103,34,44,34,111,114,105,103,105,110,34,58,34,104,116,116,112,115,58,47,47,109,111,114,109,105,110,111,46,114,101,115,105,101,108,46,99,111,109,34,44,34,99,114,111,115,115,79,114,105,103,105,110,34,58,102,97,108,115,101,125]
$jsonInput->signature = ( array ) $jsonInput->signature; // [48,69,2,33,0,251,22,162,18,206,81,110,4,3,217,148,51,132,130,31,122,186,65,73,195,170,106,35,90,149,56,1,58,222,51,69,212,2,32,77,161,139,133,49,79,218,34,45,115,178,156,139,185,13,197,248,116,217,81,111,117,68,44,141,197,87,68,1,89,222,154]
echo openssl_verify(
implode( array_map( 'chr', $jsonInput->authenticatordata ) ) . hash( 'sha256', json_encode( implode( array_map( 'chr', $jsonInput->clientdatajson ) ) ) ),
implode( array_map( 'chr', $jsonInput->signature ) ),
"-----BEGIN PUBLIC KEY-----\r\n" . chunk_split( base64_encode( implode( array_map( 'chr', $publickey ) ) ), 64 ) . "-----END PUBLIC KEY-----",
OPENSSL_ALGO_SHA256
);
echo '<br />';
echo openssl_error_string(); // error:0D07803A:asn1 encoding routines:asn1_item_embed_d2i:nested asn1 error
/*The processed Windows Hello (From Windows 11) authenticator-generated public key results at the end:
-----BEGIN PUBLIC KEY-----
MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAE5X5/v89DKkLU+wF+JOijvJdUMlP7
HcQY0INgvg7vaHtOWkZMNtNbSvP8RcCE9c7WQ9KlLua/BhPxybzr6FSCuQ==
-----END PUBLIC KEY-----
*/
Another example with a different authenticator (Widows Hello from Windows 10):
$jsonInput = json_decode( '{"authenticatordata":[201,157,215,147,42,142,165,93,198,108,247,140,253,224,178,122,185,204,239,151,3,24,2,25,212,39,42,95,255,195,201,113,5,0,0,0,2],"clientdatajson":[123,34,116,121,112,101,34,58,34,119,101,98,97,117,116,104,110,46,103,101,116,34,44,34,99,104,97,108,108,101,110,103,101,34,58,34,77,68,65,119,77,68,65,119,77,68,65,119,77,103,34,44,34,111,114,105,103,105,110,34,58,34,104,116,116,112,115,58,47,47,109,111,114,109,105,110,111,46,114,101,115,105,101,108,46,99,111,109,34,44,34,99,114,111,115,115,79,114,105,103,105,110,34,58,102,97,108,115,101,44,34,111,116,104,101,114,95,107,101,121,115,95,99,97,110,95,98,101,95,97,100,100,101,100,95,104,101,114,101,34,58,34,100,111,32,110,111,116,32,99,111,109,112,97,114,101,32,99,108,105,101,110,116,68,97,116,97,74,83,79,78,32,97,103,97,105,110,115,116,32,97,32,116,101,109,112,108,97,116,101,46,32,83,101,101,32,104,116,116,112,115,58,47,47,103,111,111,46,103,108,47,121,97,98,80,101,120,34,125],"signature":[94,96,8,15,78,8,75,244,177,242,61,244,7,240,100,98,176,74,243,176,215,209,229,61,5,137,178,77,240,88,160,220,9,110,33,171,52,255,65,140,191,209,29,49,26,111,164,65,47,1,90,77,95,196,60,132,185,189,145,0,138,65,212,242,210,222,55,91,211,208,15,216,252,81,6,132,159,42,234,186,78,81,121,187,45,71,22,178,83,210,196,161,31,247,188,218,211,159,5,102,249,213,142,158,230,99,182,166,78,62,153,107,53,133,150,96,95,99,213,172,19,44,243,114,127,167,155,195,88,172,236,229,233,212,65,100,127,98,4,4,71,124,29,174,104,65,190,218,221,16,228,85,137,216,250,89,49,77,245,120,146,72,7,23,67,144,108,160,195,204,216,51,100,159,32,208,151,249,87,146,54,31,230,48,241,67,235,8,171,198,53,8,83,178,8,203,6,173,76,213,212,128,241,72,129,162,159,13,234,49,6,140,253,159,107,115,91,151,195,25,203,27,98,81,41,96,254,88,92,126,78,207,59,114,214,238,153,34,100,49,59,246,249,99,255,49,71,178,42,226,62,246,149,193,91,140]}' );
$publickey = json_decode( '{"0":48,"1":130,"2":1,"3":34,"4":48,"5":13,"6":6,"7":9,"8":42,"9":134,"10":72,"11":134,"12":247,"13":13,"14":1,"15":1,"16":1,"17":5,"18":0,"19":3,"20":130,"21":1,"22":15,"23":0,"24":48,"25":130,"26":1,"27":10,"28":2,"29":130,"30":1,"31":1,"32":0,"33":226,"34":31,"35":139,"36":141,"37":197,"38":58,"39":76,"40":61,"41":52,"42":104,"43":160,"44":127,"45":66,"46":27,"47":61,"48":3,"49":107,"50":228,"51":250,"52":6,"53":98,"54":104,"55":214,"56":5,"57":33,"58":182,"59":247,"60":175,"61":107,"62":236,"63":71,"64":232,"65":98,"66":163,"67":112,"68":213,"69":174,"70":56,"71":131,"72":160,"73":93,"74":200,"75":85,"76":35,"77":234,"78":116,"79":212,"80":172,"81":0,"82":232,"83":78,"84":48,"85":90,"86":122,"87":93,"88":100,"89":212,"90":88,"91":250,"92":91,"93":228,"94":248,"95":14,"96":42,"97":228,"98":123,"99":149,"100":36,"101":205,"102":21,"103":172,"104":116,"105":44,"106":113,"107":229,"108":246,"109":50,"110":110,"111":219,"112":122,"113":219,"114":26,"115":72,"116":17,"117":120,"118":63,"119":148,"120":176,"121":94,"122":110,"123":133,"124":131,"125":199,"126":213,"127":219,"128":22,"129":29,"130":88,"131":178,"132":141,"133":62,"134":170,"135":76,"136":121,"137":62,"138":237,"139":192,"140":214,"141":82,"142":122,"143":113,"144":244,"145":124,"146":2,"147":5,"148":39,"149":83,"150":68,"151":252,"152":219,"153":233,"154":27,"155":128,"156":77,"157":160,"158":241,"159":92,"160":1,"161":0,"162":171,"163":214,"164":233,"165":178,"166":240,"167":207,"168":227,"169":74,"170":134,"171":206,"172":217,"173":193,"174":89,"175":79,"176":56,"177":217,"178":152,"179":229,"180":175,"181":47,"182":146,"183":145,"184":101,"185":173,"186":39,"187":106,"188":252,"189":194,"190":107,"191":221,"192":150,"193":30,"194":122,"195":73,"196":204,"197":49,"198":242,"199":60,"200":227,"201":208,"202":10,"203":223,"204":182,"205":195,"206":105,"207":113,"208":99,"209":119,"210":41,"211":215,"212":234,"213":227,"214":166,"215":69,"216":66,"217":160,"218":83,"219":131,"220":109,"221":111,"222":216,"223":9,"224":55,"225":176,"226":107,"227":4,"228":108,"229":37,"230":235,"231":100,"232":88,"233":14,"234":154,"235":247,"236":143,"237":102,"238":106,"239":48,"240":200,"241":8,"242":152,"243":187,"244":73,"245":126,"246":95,"247":139,"248":83,"249":140,"250":199,"251":151,"252":46,"253":174,"254":25,"255":82,"256":240,"257":199,"258":41,"259":126,"260":106,"261":126,"262":93,"263":201,"264":70,"265":217,"266":151,"267":46,"268":117,"269":139,"270":144,"271":29,"272":43,"273":76,"274":59,"275":180,"276":255,"277":208,"278":43,"279":124,"280":111,"281":168,"282":50,"283":221,"284":105,"285":134,"286":153,"287":113,"288":141,"289":2,"290":3,"291":1,"292":0,"293":1}', TRUE );
$jsonInput->authenticatordata = ( array ) $jsonInput->authenticatordata;
$jsonInput->clientdatajson = ( array ) $jsonInput->clientdatajson;
$jsonInput->signature = ( array ) $jsonInput->signature;
echo openssl_verify(
implode( array_map( 'chr', $jsonInput->authenticatordata ) ) . hash( 'sha256', implode( array_map( 'chr', $jsonInput->clientdatajson ) ) ),
implode( array_map( 'chr', $jsonInput->signature ) ),
"-----BEGIN PUBLIC KEY-----\r\n" . chunk_split( base64_encode( implode( array_map( 'chr', $publickey ) ) ), 64 ) . "-----END PUBLIC KEY-----",
OPENSSL_ALGO_SHA256
);
echo '<br />';
echo openssl_error_string(); // error:0D0680A8:asn1 encoding routines:asn1_check_tlen:wrong tag
/*
-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA4h+LjcU6TD00aKB/Qhs9
A2vk+gZiaNYFIbb3r2vsR+hio3DVrjiDoF3IVSPqdNSsAOhOMFp6XWTUWPpb5PgO
KuR7lSTNFax0LHHl9jJu23rbGkgReD+UsF5uhYPH1dsWHViyjT6qTHk+7cDWUnpx
9HwCBSdTRPzb6RuATaDxXAEAq9bpsvDP40qGztnBWU842Zjlry+SkWWtJ2r8wmvd
lh56Scwx8jzj0ArftsNpcWN3Kdfq46ZFQqBTg21v2Ak3sGsEbCXrZFgOmvePZmow
yAiYu0l+X4tTjMeXLq4ZUvDHKX5qfl3JRtmXLnWLkB0rTDu0/9ArfG+oMt1phplx
jQIDAQAB
-----END PUBLIC KEY-----
*/
1. However the "openssl_verify" function returns failure (0) instead
of success (1). Where am I wrong?
2. Why does Windows Hello return a short public key in the first case?
Is it equally valid?
3. Is this the correct way to convert to PEM and use the public key
generated by credential.response.getPublicKey()?
Note: in a different context, I transfer the public key from javascript (jquery) to PHP 8.1 like this:
navigator.credentials.create( { publicKey: {
attestation: 'none',
authenticatorSelection: { userVerification: 'preferred' },
challenge: Uint8Array.from( ..., c => c.charCodeAt( 0 ) ),
excludeCredentials: [],
pubKeyCredParams: [],
rp: { id: window.location.hostname, name: window.document.title },
timeout: 60000,
user: { id: Uint8Array.from( ..., c => c.charCodeAt( 0 ) ), displayName: ..., name: ... }
} } )
.then( ( credential ) => {
$.ajax( { data: 'data=' + encodeURIComponent( JSON.stringify( {
...,
'publickey': new Uint8Array( credential.response.getPublicKey() ),
'authenticatordata': new Uint8Array( credential.response.getAuthenticatorData() ),
'transports': credential.response.getTransports()
} ) ) } )

How to change a call for a WordPress user id to a call for a users display name

I am working on modifying this plugin in an attempt to make it better fit my needs. However I have been having tremendous amounts of trouble switching from it using the users id to the users display name. I have included the original and my edits below. Any help or recommendations are greatly appreciated!
ORIGINAL CODE:
<?php
Class Chatroom {
function __construct() {
register_activation_hook( __FILE__, array( $this, 'activation_hook' ) );
register_deactivation_hook( __FILE__, array( $this, 'deactivation_hook' ) );
add_action( 'init', array( $this, 'register_post_types' ) );
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
add_action( 'save_post', array( $this, 'maybe_create_chatroom_log_file' ), 10, 2 );
add_action( 'wp_head', array( $this, 'define_javascript_variables' ) );
add_action( 'wp_ajax_check_updates', array( $this, 'ajax_check_updates_handler' ) );
add_action( 'wp_ajax_send_message', array( $this, 'ajax_send_message_handler' ) );
add_filter( 'the_content', array( $this, 'the_content_filter' ) );
}
function activation_hook() {
$this->register_post_types();
flush_rewrite_rules();
}
function deactivation_hook() {
flush_rewrite_rules();
}
function register_post_types() {
$labels = array(
'name' => _x( 'Chat Rooms', 'post type general name', 'chatroom' ),
'singular_name' => _x( 'Chat Room', 'post type singular name', 'chatroom' ),
'add_new' => _x( 'Add New', 'book', 'chatroom' ),
'add_new_item' => __( 'Add New Chat Room', 'chatroom' ),
'edit_item' => __( 'Edit Chat Room', 'chatroom' ),
'new_item' => __( 'New Chat Room', 'chatroom' ),
'all_items' => __( 'All Chat Rooms', 'chatroom' ),
'view_item' => __( 'View Chat Room', 'chatroom' ),
'search_items' => __( 'Search Chat Rooms', 'chatroom' ),
'not_found' => __( 'No Chat Rooms found', 'chatroom' ),
'not_found_in_trash' => __( 'No Chat Rooms found in Trash', 'chatroom' ),
'parent_item_colon' => '',
'menu_name' => __( 'Chat Rooms', 'chatroom' )
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'show_in_nav_menus' => true,
'supports' => array( 'title' )
);
register_post_type( 'chat-room', $args );
}
function enqueue_scripts() {
global $post;
if ( $post->post_type != 'chat-room' )
return;
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'chat-room', plugins_url( 'chat-room.js', __FILE__ ) );
wp_enqueue_style( 'chat-room-styles', plugins_url( 'chat-room.css', __FILE__ ) );
}
function maybe_create_chatroom_log_file( $post_id, $post ) {
if ( empty( $post->post_type ) || $post->post_type != 'chat-room' )
return;
$upload_dir = wp_upload_dir();
$log_filename = $upload_dir['basedir'] . '/chatter/' . $post->post_name . '-' . date( 'm-d-y', time() );
if ( file_exists( $log_filename ) )
return;
wp_mkdir_p( $upload_dir['basedir'] . '/chatter/' );
$handle = fopen( $log_filename, 'w' );
fwrite( $handle, json_encode( array() ) );
// TODO create warnings if the user can't create a file, and suggest putting FTP creds in wp-config
}
function define_javascript_variables() {
global $post;
if ( empty( $post->post_type ) || $post->post_type != 'chat-room' )
return; ?>
<script>
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
var chatroom_slug = '<?echo $post->post_name; ?>';
</script>
<?php
}
function ajax_check_updates_handler() {
$upload_dir = wp_upload_dir();
$log_filename = $this->get_log_filename( sanitize_text_field( $_POST['chatroom_slug'] ) );
$contents = $this->parse_messages_log_file( $log_filename );
$messages = json_decode( $contents );
foreach ( $messages as $key => $message ) {
if ( $message->id <= $_POST['last_update_id'] )
unset( $messages[$key] );
}
$messages = array_values( $messages );
echo json_encode( $messages );
die;
}
/**
* AJAX server-side handler for sending a message.
*
* Stores the message in a recent messages file.
*
* Clears out cache of any messages older than 10 seconds.
*/
function ajax_send_message_handler() {
$current_user = wp_get_current_user();
$this->save_message( sanitize_text_field( $_POST['chatroom_slug'] ), $current_user->id, $_POST['message'] );
die;
}
function save_message( $chatroom_slug, $current_user->id, $content ) {
$user = get_userdata( $current_user->id );
if ( ! $user_text_color = get_user_meta( $current_user->id, 'user_color', true ) ) {
// Set random color for each user
$red = rand( 0, 16 );
$green = 16 - $red;
$blue = rand( 0, 16 );
$user_text_color = '#' . dechex( $red^2 ) . dechex( $green^2 ) . dechex( $blue^2 );
update_user_meta( $current_user->id, 'user_color', $user_text_color );
}
$content = esc_attr( $content );
// Save the message in recent messages file
$log_filename = $this->get_log_filename( $chatroom_slug );
$contents = $this->parse_messages_log_file( $log_filename );
$messages = json_decode( $contents );
$last_message_id = 0; // Helps determine the new message's ID
foreach ( $messages as $key => $message ) {
if ( time() - $message->time > 10 ) {
$last_message_id = $message->id;
unset( $messages[$key] );
}
else {
break;
}
}
$messages = array_values( $messages );
if ( ! empty( $messages ) )
$last_message_id = end( $messages )->id;
$new_message_id = $last_message_id + 1;
$messages[] = array(
'id' => $new_message_id,
'time' => time(),
'sender' => $current_user->id,
'contents' => $content,
'html' => '<div class="chat-message-' . $new_message_id . '"><strong style="color: ' . $user_text_color . ';">' . $user->user_login . '</strong>: ' . $content . '</div>',
);
$this->write_log_file( $log_filename, json_encode( $messages ) );
// Save the message in the daily log
$log_filename = $this->get_log_filename( $chatroom_slug, date( 'm-d-y', time() ) );
$contents = $this->parse_messages_log_file( $log_filename );
$messages = json_decode( $contents );
$messages[] = array(
'id' => $new_message_id,
'time' => time(),
'sender' => $current_user->id,
'contents' => $content,
'html' => '<div class="chat-message-' . $new_message_id .'"><strong style="color: ' . $user_text_color . ';">' . $user->user_login . '</strong>: ' . $content . '</div>',
);
$this->write_log_file( $log_filename, json_encode( $messages ) );
}
function write_log_file( $log_filename, $content ) {
$handle = fopen( $log_filename, 'w' );
fwrite( $handle, $content );
}
function get_log_filename( $chatroom_slug, $date = 'recent' ) {
$upload_dir = wp_upload_dir();
$log_filename = $upload_dir['basedir'] . '/chatter/' . $chatroom_slug . '-' . $date;
return $log_filename;
}
function parse_messages_log_file( $log_filename ) {
$upload_dir = wp_upload_dir();
$handle = fopen( $log_filename, 'r' );
$contents = fread( $handle, filesize( $log_filename ) );
fclose( $handle );
return $contents;
}
function the_content_filter( $content ) {
global $post;
if ( $post->post_type != 'chat-room' )
return $content;
if ( ! is_user_logged_in() ) {
?>You need to be logged in to participate in the chatroom.<?php
return;
}
?>
<div class="chat-container">
</div>
<textarea class="chat-text-entry"></textarea>
<?php
return '';
}
}
$chatroom = new Chatroom();
EDITS:
<?php
Class Chatroom {
function __construct() {
register_activation_hook( __FILE__, array( $this, 'activation_hook' ) );
register_deactivation_hook( __FILE__, array( $this, 'deactivation_hook' ) );
add_action( 'init', array( $this, 'register_post_types' ) );
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
add_action( 'save_post', array( $this, 'maybe_create_chatroom_log_file' ), 10, 2 );
add_action( 'wp_head', array( $this, 'define_javascript_variables' ) );
add_action( 'wp_ajax_check_updates', array( $this, 'ajax_check_updates_handler' ) );
add_action( 'wp_ajax_send_message', array( $this, 'ajax_send_message_handler' ) );
add_filter( 'the_content', array( $this, 'the_content_filter' ) );
}
function activation_hook() {
$this->register_post_types();
flush_rewrite_rules();
}
function deactivation_hook() {
flush_rewrite_rules();
}
function register_post_types() {
$labels = array(
'name' => _x( 'Chat Rooms', 'post type general name', 'chatroom' ),
'singular_name' => _x( 'Chat Room', 'post type singular name', 'chatroom' ),
'add_new' => _x( 'Add New', 'book', 'chatroom' ),
'add_new_item' => __( 'Add New Chat Room', 'chatroom' ),
'edit_item' => __( 'Edit Chat Room', 'chatroom' ),
'new_item' => __( 'New Chat Room', 'chatroom' ),
'all_items' => __( 'All Chat Rooms', 'chatroom' ),
'view_item' => __( 'View Chat Room', 'chatroom' ),
'search_items' => __( 'Search Chat Rooms', 'chatroom' ),
'not_found' => __( 'No Chat Rooms found', 'chatroom' ),
'not_found_in_trash' => __( 'No Chat Rooms found in Trash', 'chatroom' ),
'parent_item_colon' => '',
'menu_name' => __( 'Chat Rooms', 'chatroom' )
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'show_in_nav_menus' => true,
'supports' => array( 'title' )
);
register_post_type( 'chat-room', $args );
}
function enqueue_scripts() {
global $post;
if ( $post->post_type != 'chat-room' )
return;
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'chat-room', plugins_url( 'chat-room.js', __FILE__ ) );
wp_enqueue_style( 'chat-room-styles', plugins_url( 'chat-room.css', __FILE__ ) );
}
function maybe_create_chatroom_log_file( $post_id, $post ) {
if ( empty( $post->post_type ) || $post->post_type != 'chat-room' )
return;
$upload_dir = wp_upload_dir();
$log_filename = $upload_dir['basedir'] . '/chatter/' . $post->post_name . '-' . date( 'm-d-y', time() );
if ( file_exists( $log_filename ) )
return;
wp_mkdir_p( $upload_dir['basedir'] . '/chatter/' );
$handle = fopen( $log_filename, 'w' );
fwrite( $handle, json_encode( array() ) );
// TODO create warnings if the user can't create a file, and suggest putting FTP creds in wp-config
}
function define_javascript_variables() {
global $post;
if ( empty( $post->post_type ) || $post->post_type != 'chat-room' )
return; ?>
<script>
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
var chatroom_slug = '<?echo $post->post_name; ?>';
</script>
<?php
}
function ajax_check_updates_handler() {
$upload_dir = wp_upload_dir();
$log_filename = $this->get_log_filename( sanitize_text_field( $_POST['chatroom_slug'] ) );
$contents = $this->parse_messages_log_file( $log_filename );
$messages = json_decode( $contents );
foreach ( $messages as $key => $message ) {
if ( $message->id <= $_POST['last_update_id'] )
unset( $messages[$key] );
}
$messages = array_values( $messages );
echo json_encode( $messages );
die;
}
/**
* AJAX server-side handler for sending a message.
*
* Stores the message in a recent messages file.
*
* Clears out cache of any messages older than 10 seconds.
*/
function ajax_send_message_handler() {
$current_user = wp_get_current_user();
$this->save_message( sanitize_text_field( $_POST['chatroom_slug'] ), $current_user->display_name, $_POST['message'] );
die;
}
function save_message( $chatroom_slug, $user_id, $content ) {
$user = get_userdata( $user_id );
if ( ! $user_text_color = get_user_meta( $user_id, 'user_color', true ) ) {
// Set random color for each user
$red = rand( 0, 16 );
$green = 16 - $red;
$blue = rand( 0, 16 );
$user_text_color = '#' . dechex( $red^2 ) . dechex( $green^2 ) . dechex( $blue^2 );
update_user_meta( $user_id, 'user_color', $user_text_color );
}
$content = esc_attr( $content );
// Save the message in recent messages file
$log_filename = $this->get_log_filename( $chatroom_slug );
$contents = $this->parse_messages_log_file( $log_filename );
$messages = json_decode( $contents );
$last_message_id = 0; // Helps determine the new message's ID
foreach ( $messages as $key => $message ) {
if ( time() - $message->time > 10 ) {
$last_message_id = $message->id;
unset( $messages[$key] );
}
else {
break;
}
}
$messages = array_values( $messages );
if ( ! empty( $messages ) )
$last_message_id = end( $messages )->id;
$new_message_id = $last_message_id + 1;
$messages[] = array(
'id' => $new_message_id,
'time' => time(),
'sender' => $user_id,
'contents' => $content,
'html' => '<div class="chat-message-' . $new_message_id . '"><strong style="color: ' . $user_text_color . ';">' . $user->user_login . '</strong>: ' . $content . '</div>',
);
$this->write_log_file( $log_filename, json_encode( $messages ) );
// Save the message in the daily log
$log_filename = $this->get_log_filename( $chatroom_slug, date( 'm-d-y', time() ) );
$contents = $this->parse_messages_log_file( $log_filename );
$messages = json_decode( $contents );
$messages[] = array(
'id' => $new_message_id,
'time' => time(),
'sender' => $user_id,
'contents' => $content,
'html' => '<div class="chat-message-' . $new_message_id .'"><strong style="color: ' . $user_text_color . ';">' . $user->user_login . '</strong>: ' . $content . '</div>',
);
$this->write_log_file( $log_filename, json_encode( $messages ) );
}
function write_log_file( $log_filename, $content ) {
$handle = fopen( $log_filename, 'w' );
fwrite( $handle, $content );
}
function get_log_filename( $chatroom_slug, $date = 'recent' ) {
$upload_dir = wp_upload_dir();
$log_filename = $upload_dir['basedir'] . '/chatter/' . $chatroom_slug . '-' . $date;
return $log_filename;
}
function parse_messages_log_file( $log_filename ) {
$upload_dir = wp_upload_dir();
$handle = fopen( $log_filename, 'r' );
$contents = fread( $handle, filesize( $log_filename ) );
fclose( $handle );
return $contents;
}
function the_content_filter( $content ) {
global $post;
if ( $post->post_type != 'chat-room' )
return $content;
if ( ! is_user_logged_in() ) {
?>You need to be logged in to participate in the chatroom.<?php
return;
}
?>
<div class="chat-container">
</div>
<textarea class="chat-text-entry"></textarea>
<?php
return '';
}
}
$chatroom = new Chatroom();

how to add another phone field for confirmation in woocommerce checkout page

Hi, I would like it to be like in the image and if the phone number don't match then it would not validate
really need help, thanks
This is my answer to adding custom field in the billing section
add_filter( 'woocommerce_checkout_fields' , 'bbloomer_add_field_and_reorder_fields' );
function bbloomer_add_field_and_reorder_fields( $fields ) {
if (!$_POST['shipping_method_tax_exempt']) {
unset($fields['extra_fields']['claimant_name']);
unset($fields['extra_fields']['description_illness']);
unset($fields['extra_fields']['vat_confirm']);
}
// Add New Fields
$fields['billing']['billing_phone_confirm'] = array(
'label' => __('Phone confirm', 'woocommerce'),
'required' => true,
'class' => array('form-row-last'),
'clear' => false
);
/*$fields['shipping']['shipping_houseno'] = array(
'label' => __('House Number', 'woocommerce'),
'placeholder' => _x('House Number', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('form-row-last'),
'clear' => false
);*/
// Remove Address_2 Fields
unset($fields['billing']['billing_address_2']);
//unset($fields['shipping']['shipping_address_2']);
// Make Address_1 Fields Half Width
//$fields['billing']['billing_address_1']['class'] = array('form-row-first');
//$fields['shipping']['shipping_address_1']['class'] = array('form-row-first');
$fields['billing']['billing_country_field']['class'] = array('form-row-first');
// Billing: Sort Fields
$newfields['billing']['billing_first_name'] = $fields['billing']['billing_first_name'];
$newfields['billing']['billing_last_name'] = $fields['billing']['billing_last_name'];
$newfields['billing']['billing_company'] = $fields['billing']['billing_company'];
$newfields['billing']['billing_email'] = $fields['billing']['billing_email'];
$newfields['billing']['billing_phone'] = $fields['billing']['billing_phone'];
$newfields['billing']['billing_phone_confirm'] = $fields['billing']['billing_phone_confirm'];
$newfields['billing']['billing_country'] = $fields['billing']['billing_country'];
$newfields['billing']['billing_address_1'] = $fields['billing']['billing_address_1'];
//$newfields['billing']['billing_address_2'] = $fields['billing']['billing_address_2'];
$newfields['billing']['billing_city'] = $fields['billing']['billing_city'];
$newfields['billing']['billing_postcode'] = $fields['billing']['billing_postcode'];
$newfields['billing']['billing_state'] = $fields['billing']['billing_state'];
// Shipping: Sort Fields
$newfields['shipping']['shipping_first_name'] = $fields['shipping']['shipping_first_name'];
$newfields['shipping']['shipping_last_name'] = $fields['shipping']['shipping_last_name'];
$newfields['shipping']['shipping_company'] = $fields['shipping']['shipping_company'];
$newfields['shipping']['shipping_country'] = $fields['shipping']['shipping_country'];
$newfields['shipping']['shipping_address_1'] = $fields['shipping']['shipping_address_1'];
$newfields['shipping']['shipping_houseno'] = $fields['shipping']['shipping_houseno'];
$newfields['shipping']['shipping_city'] = $fields['shipping']['shipping_city'];
$newfields['shipping']['shipping_state'] = $fields['shipping']['shipping_state'];
$newfields['shipping']['shipping_postcode'] = $fields['shipping']['shipping_postcode'];
$checkout_fields = array_merge( $fields, $newfields);
return $checkout_fields;
}
now the problem is the confirmation, it should not validate if it does not match
here is what I'm using now
add_action( 'woocommerce_after_checkout_validation', 'wc_check_confirm_phone_matches_checkout', 10, 2 );
function wc_check_confirm_phone_matches_checkout( $posted ) {
$checkout = WC()->checkout;
if ( strcmp( $posted['billing_phone'], $posted['billing_phone_confirm_field'] ) !== 0 ) {
wc_add_notice( __( 'Phone number do not match.', 'woocommerce' ), 'error' );
}
}
The problem here is that is always shows "Phone number do not match." even if it matches, need help on this
/**
Add the field to the checkout page
*/
add_action( 'woocommerce_after_order_notes', 'some_custom_checkout_field' );
functionsome_custom_checkout_field( $checkout ) {
echo '' . __('Heading') . '';
woocommerce_form_field( 'some_field_name', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Additional Field'),
'placeholder' => __('Some hint'),
'required' => true,
), $checkout->get_value( 'some_field_name' ));
echo '';
}

Highlighting words with Javascript, what am I missing?

I have been working with a basic javascript/PHP chatroom. I want certain words to be highlighted as they appear in the chat stream.
The html output for the chatroom looks like:
<div class="chat-container">
<div class="chat chat-message-111"><strong style="color: #840;">User 1</strong>: What is your favourite animal?</div>
<div class="chat chat-message-112"><strong style="color: #840;">User 2</strong>: I vote for #dog. </div>
<div class="chat chat-message-113"><strong style="color: #840;">User 3</strong>: I have a #cat!</div>
</div>
I have found one Javascript solution that is actually what I'm looking for (please see https://jsfiddle.net/4ny8adpg/2/ for a working example). But when I try to use it with the chatroom, it won't highlight any text in the "Chat-Container" div.
Will it not work because the contents of the chatroom is an output of the PHP/Javascript and not just HTML like in the jsfiddle example? Or maybe I am missing something obvious.
Any help or advise would seriously be appreciated.
EDIT (to show code and provide more information):
The chatroom is actually a wordpress plugin, it is made up of a PHP file and a Javascript file:
Javascript:
var last_update_received = 0;
function chatroom_check_updates() {
jQuery.post(
ajaxurl,
{
action: 'check_updates',
chatroom_slug: chatroom_slug,
last_update_id: last_update_id
},
function (response) {
chats = jQuery.parseJSON( response );
if ( chats !== null ) {
for ( i = 0; i < chats.length; i++ ) {
if ( jQuery('div.chat-container div.chat-message-'+chats[i].id).length )
continue;
jQuery('div.chat-container').html( jQuery('div.chat-container').html() + chatroom_strip_slashes(chats[i].html) );
last_update_id = chats[i].id;
jQuery('div.chat-container').animate({ scrollTop: jQuery('div.chat-container')[0].scrollHeight - jQuery('div.chat-container').height() }, 100);
}
}
}
);
setTimeout( "chatroom_check_updates()", 1000 );
}
function chatroom_strip_slashes(str) {
return (str + '').replace(/\\(.?)/g, function (s, n1) {
switch (n1) {
case '\\':
return '\\';
case '0':
return '\u0000';
case '':
return '';
default:
return n1;
}
});
}
jQuery(document).ready( function() {
last_update_id = 0;
chatroom_check_updates();
jQuery( 'textarea.chat-text-entry' ).keypress( function( event ) {
if ( event.charCode == 13 || event.keyCode == 13 ) {
chatroom_send_message();
return false;
}
});
});
function chatroom_send_message() {
message = jQuery( 'textarea.chat-text-entry' ).val();
jQuery( 'textarea.chat-text-entry' ).val('');
jQuery.post(
ajaxurl,
{
action: 'send_message',
chatroom_slug: chatroom_slug,
message: message
},
function (response) {
}
);
}
PHP:
Class Chatroom {
function __construct() {
register_activation_hook( __FILE__, array( $this, 'activation_hook' ) );
register_deactivation_hook( __FILE__, array( $this, 'deactivation_hook' ) );
add_action( 'init', array( $this, 'register_post_types' ) );
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
add_action( 'save_post', array( $this, 'maybe_create_chatroom_log_file' ), 10, 2 );
add_action( 'wp_head', array( $this, 'define_javascript_variables' ) );
add_action( 'wp_ajax_check_updates', array( $this, 'ajax_check_updates_handler' ) );
add_action( 'wp_ajax_send_message', array( $this, 'ajax_send_message_handler' ) );
add_filter( 'the_content', array( $this, 'the_content_filter' ) );
}
function activation_hook() {
$this->register_post_types();
flush_rewrite_rules();
}
function deactivation_hook() {
flush_rewrite_rules();
}
function register_post_types() {
$labels = array(
'name' => _x( 'Chat Rooms', 'post type general name', 'chatroom' ),
'singular_name' => _x( 'Chat Room', 'post type singular name', 'chatroom' ),
'add_new' => _x( 'Add New', 'book', 'chatroom' ),
'add_new_item' => __( 'Add New Chat Room', 'chatroom' ),
'edit_item' => __( 'Edit Chat Room', 'chatroom' ),
'new_item' => __( 'New Chat Room', 'chatroom' ),
'all_items' => __( 'All Chat Rooms', 'chatroom' ),
'view_item' => __( 'View Chat Room', 'chatroom' ),
'search_items' => __( 'Search Chat Rooms', 'chatroom' ),
'not_found' => __( 'No Chat Rooms found', 'chatroom' ),
'not_found_in_trash' => __( 'No Chat Rooms found in Trash', 'chatroom' ),
'parent_item_colon' => '',
'menu_name' => __( 'Chat Rooms', 'chatroom' )
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'show_in_nav_menus' => true,
'supports' => array( 'title' )
);
register_post_type( 'chat-room', $args );
}
function enqueue_scripts() {
global $post;
if ( $post->post_type != 'chat-room' )
return;
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'chat-room', plugins_url( 'chat-room.js', __FILE__ ) );
wp_enqueue_style( 'chat-room-styles', plugins_url( 'chat-room.css', __FILE__ ) );
}
function maybe_create_chatroom_log_file( $post_id, $post ) {
if ( empty( $post->post_type ) || $post->post_type != 'chat-room' )
return;
$upload_dir = wp_upload_dir();
$log_filename = $upload_dir['basedir'] . '/chatter/' . $post->post_name . '-' . date( 'm-d-y', time() );
if ( file_exists( $log_filename ) )
return;
wp_mkdir_p( $upload_dir['basedir'] . '/chatter/' );
$handle = fopen( $log_filename, 'w' );
fwrite( $handle, json_encode( array() ) );
// TODO create warnings if the user can't create a file, and suggest putting FTP creds in wp-config
}
function define_javascript_variables() {
global $post;
if ( empty( $post->post_type ) || $post->post_type != 'chat-room' )
return; ?>
<script>
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
var chatroom_slug = '<?echo $post->post_name; ?>';
</script>
<?php
}
function ajax_check_updates_handler() {
$upload_dir = wp_upload_dir();
$log_filename = $this->get_log_filename( $_POST['chatroom_slug'] );
$contents = $this->parse_messages_log_file( $log_filename );
$messages = json_decode( $contents );
foreach ( $messages as $key => $message ) {
if ( $message->id <= $_POST['last_update_id'] )
unset( $messages[$key] );
}
$messages = array_values( $messages );
echo json_encode( $messages );
die;
}
/**
* AJAX server-side handler for sending a message.
*
* Stores the message in a recent messages file.
*
* Clears out cache of any messages older than 10 seconds.
*/
function ajax_send_message_handler() {
$current_user = wp_get_current_user();
$this->save_message( $_POST['chatroom_slug'], $current_user->id, $_POST['message'] );
die;
}
function save_message( $chatroom_slug, $user_id, $content ) {
$user = get_userdata( $user_id );
if ( ! $user_text_color = get_user_meta( $user_id, 'user_color', true ) ) {
// Set random color for each user
$red = rand( 0, 16 );
$green = 16 - $red;
$blue = rand( 0, 16 );
$user_text_color = '#' . dechex( $red^2 ) . dechex( $green^2 ) . dechex( $blue^2 );
update_user_meta( $user_id, 'user_color', $user_text_color );
}
$content = esc_attr( $content );
// Save the message in recent messages file
$log_filename = $this->get_log_filename( $chatroom_slug );
$contents = $this->parse_messages_log_file( $log_filename );
$messages = json_decode( $contents );
$last_message_id = 0; // Helps determine the new message's ID
foreach ( $messages as $key => $message ) {
if ( time() - $message->time > 10 ) {
$last_message_id = $message->id;
unset( $messages[$key] );
}
else {
break;
}
}
$messages = array_values( $messages );
if ( ! empty( $messages ) )
$last_message_id = end( $messages )->id;
$new_message_id = $last_message_id + 1;
$messages[] = array(
'id' => $new_message_id,
'time' => time(),
'sender' => $user_id,
'contents' => $content,
'html' => '<div class="chat-message-' . $new_message_id . '"><strong style="color: ' . $user_text_color . ';">' . $user->user_login . '</strong>: ' . $content . '</div>',
);
$this->write_log_file( $log_filename, json_encode( $messages ) );
// Save the message in the daily log
$log_filename = $this->get_log_filename( $chatroom_slug, date( 'm-d-y', time() ) );
$contents = $this->parse_messages_log_file( $log_filename );
$messages = json_decode( $contents );
$messages[] = array(
'id' => $new_message_id,
'time' => time(),
'sender' => $user_id,
'contents' => $content,
'html' => '<div class="chat-message-' . $new_message_id .'"><strong style="color: ' . $user_text_color . ';">' . $user->user_login . '</strong>: ' . $content . '</div>',
);
$this->write_log_file( $log_filename, json_encode( $messages ) );
}
function write_log_file( $log_filename, $content ) {
$handle = fopen( $log_filename, 'w' );
fwrite( $handle, $content );
}
function get_log_filename( $chatroom_slug, $date = 'recent' ) {
$upload_dir = wp_upload_dir();
$log_filename = $upload_dir['basedir'] . '/chatter/' . $chatroom_slug . '-' . $date;
return $log_filename;
}
function parse_messages_log_file( $log_filename ) {
$upload_dir = wp_upload_dir();
$handle = fopen( $log_filename, 'r' );
$contents = fread( $handle, filesize( $log_filename ) );
fclose( $handle );
return $contents;
}
function the_content_filter( $content ) {
global $post;
if ( $post->post_type != 'chat-room' )
return $content;
if ( ! is_user_logged_in() ) {
?>You need to be logged in to participate in the chatroom.<?php
return;
}
?>
<div class="chat-container">
</div>
<textarea class="chat-text-entry"></textarea>
<?php
return '';
}
}
$chatroom = new Chatroom();
Example of JSON:
[{"id":129,"time":1428340673,"sender":1,"contents":"What is your favourite animal?","html":"<div class=\"chat chat-message-129\"><strong style=\"color: #840;\">User 1<\/strong>: What is your favourite animal?<\/div>"},
{"id":130,"time":1428351683,"sender":2,"contents":"I vote for #dog.","html":"<div class=\"chat chat-message-130\"><strong style=\"color: #840;\">User 2<\/strong>: I vote for #dog.<\/div>"},
{"id":131,"time":1428352376,"sender":3,"contents":"I have a #cat!","html":"<div class=\"chat chat-message-131\"><strong style=\"color: #840;\">User 3<\/strong>: I have a #cat!<\/div>"}]
If you want your highlighting code to run after an AJAX call has returned (when there are new HTML fragments), then try something along these lines:
$.ajax({
...
success : function(data) {
...
$('.chat').each(function(){
var hashtag = $(this).text()
.replace(/#dog/g, "<span class='dog'>#DOG</span>")
.replace(/#cat/g, "<span class='cat'>#CAT</span>");
$(this).html(hashtag);
});
},
...
});
In your case, call your highlighting code after you have populated all your chat fragments:
...
function (response) {
chats = jQuery.parseJSON( response );
if ( chats !== null ) {
for ( i = 0; i < chats.length; i++ ) {
if ( jQuery('div.chat-container div.chat-message-'+chats[i].id).length )
continue;
jQuery('div.chat-container').html( jQuery('div.chat-container').html() + chatroom_strip_slashes(chats[i].html) );
last_update_id = chats[i].id;
jQuery('div.chat-container').animate({ scrollTop: jQuery('div.chat-container')[0].scrollHeight - jQuery('div.chat-container').height() }, 100);
}
// Call highlighting code here
}
}
...
PS You can save time by caching the selector jQuery('div.chat-container') as a variable so that jQuery doesn't have to search your HTML each time.

Wordpress page using ajax and pagination

I have my ajax running perfectly and now i need my pagination to work on the page. I have no idea how to start.. another problem is i need it to bring in 16 posts at a time.. PLease help
How do i change this into a next and previous pagination
html below
<ul id="sermonserie1">
while ( $query->have_posts() ) : $query->the_post();
Next page
<?php endwhile;?>
</ul>
ajax page
global $post, $wpdb;
if(isset($_POST['pagi'])) {
if( isset($_REQUEST["locations"]) || isset($_REQUEST["speaker"]) || isset($_REQUEST["topic"])) {
if ($_REQUEST["locations"]!='#' ) {
$locat_termy = array('sermons', $_REQUEST['locations']);
} else {
$locat_termy = array('sermons');
$locations_resource = get_term_children( 16, 'category' );
foreach ( $locations_resource as $child_location ) {
$location_term = get_term_by( 'id', $child_location, 'category' );
$locat_termy[] .= $location_term->slug;
}
//print_r($locations_resource);
//print_r($locat_termy);
}
$all_args = array(
'post_type' => 'resources',
'author' => $speak,
'posts_per_page' => -1,
'tax_query' => array (
'relation' => 'OR',
array(
'taxonomy' => 'post_tag',
'field' => 'id',
'terms' => $topicids,
),
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => $locat_termy,
),
) ,'date_query' => $thedate
);
$query = new WP_Query( $all_args );
//print_r($query);
//$eevents = array();
//print_r($query);
while ( $query->have_posts() ) : $query->the_post();?>
<?php endwhile; ?>
<?php }
} ?>
this is my js
jQuery('.button.load-more').live('click', function() {
var pagenum = parseInt(jQuery(this).attr('page'))+ 1;
jQuery.ajax({
type: 'post',
url: 'http://cj.co.za/back/page/'+pagenum+'',
data: {
pagi:1,
},
success: function(data) {
jQuery('#sermonserie1').append(data);
jQuery('.button.load-more').attr('page', pagenum)
},
error: function() {
jQuery('.button.load-more').text('No page');
}
});
});

Categories