Unable to get User’s timezoneoffset from js to PHP

Hi,

There is an update. I changed my code in PHP and Javascript to the following:
Initially my javascript function will run which sets user’s timezoneoffset, and makes an Ajax request to PHP. In PHP the online classes timings are converted to user’s timezone based and also current live classes (those classes for which user’s current time falls within 1 hour range) are filtered. Now I have to show them on the front-end in the format of three columns (Class name, a button to open zoom link to the online class, A link to attendance tracker). All the currently LIVE classes should be shown in one section in this 3-column format. How can I accomplish this.

Currently I am echoing data from PHP (for testing purpose) which is sending back as response to Ajax call made from Javascript function and is displaying in a div. But this is slowing down the page like anything. It’s taking almost a minute to load.

my-custom-hooks.php

<?php

/*
Plugin Name:  JKY-Custom-Hooks
Version    :  1.0
Description:  Demonstrating WordPress Hooks (Actions and Filters) with multiple examples.
Author     :  Sam
Author URI :  https://staging59.courses.jkyog.org/
License    :  GPLv2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  my-custom-hooks
*/
    global $online_classes_usertimes , $live_classes;
    $online_classes_usertimes = array();
    $live_classes = array();
    
    /**
     * Proper way to enqueue scripts and styles.
     */
    function wpdocs_load_js_scripts() {
        wp_enqueue_script( 'jquery');
        wp_enqueue_script( 'moment-js', plugins_url('/assets/js/moment-js/moment.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script( 'moment-timezone', plugins_url('/assets/js/moment-js/moment-timezone.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script( 'moment-timezone-data', plugins_url('/assets/js/moment-js/moment-timezone-with-data.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script( 'moment-timezone-tenyears', plugins_url('/assets/js/moment-js/moment-timezone-with-data-10-year-range.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script( 'moment-timezone-nineteenseventy', plugins_url('/assets/js/moment-js/moment-timezone-with-data-1970-2030.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script('custom-date-scripts', plugins_url( '/assets/js/custom-date-scripts.js' , __FILE__ ));
    }    
add_action( 'wp_enqueue_scripts', 'wpdocs_load_js_scripts' );
 
function wpb_hook_get_client_timezonetime($attr) {
    $input_arr = shortcode_atts( array(
					'input_time' => '5:00 PM',
                    'input_timezone' => 'CST'
				), $attr);
   
    return "<script type='text/javascript'>get_client_time( '". $input_arr['input_time'] ."', '". $input_arr['input_timezone'] ."' );</script>";
}
add_shortcode('get_client_timezonetime', 'wpb_hook_get_client_timezonetime');

function wpb_hook_get_liveinfo_client_time($attr) {
    $input_arr = shortcode_atts( array(
					'input_time' => '5:00 PM',
                    'input_timezone' => 'CST',
        			'id' => ''
				), $attr);
 
    return "<script type='text/javascript'>get_liveinfo_client_time( '". $input_arr['input_time'] ."', '". $input_arr['input_timezone'] ."', '". $input_arr['id'] ."' );</script>";
}
add_shortcode('get_live_info_client_time', 'wpb_hook_get_liveinfo_client_time');

function wpb_hook_process_classes(){
    
        // Debugging code to log incoming request data
error_log('Incoming AJAX request: ' . print_r($_POST, true));

// Retrieve the timezoneOffset value from the POST data
$timezoneOffset = isset($_POST['timezoneOffset']) ? $_POST['timezoneOffset'] : '';

// Debugging code to log the timezoneOffset value
error_log('timezoneOffset: ' . $timezoneOffset);

    
    $online_classes = array (
      "Daily Satsang" => array (
                "time_val" => "7:00 AM", 
                "time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "Kripalu Paddhati" => array(
        		"time_val" => "8:00 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "7 Divine Laws - Book Club" => array(
        		"time_val" => "7:00 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "Bhagavad Gita Study" => array(
        		"time_val" => "7:00 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
   		),
      "Prem Yoga" => array(
        		"time_val" => "9:30 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "Upanishad Sarita" => array(
        		"time_val" => "9:30 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "Weekly Satsang" => array(
        		"time_val" => "10:30 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
	  "Bhagavad Gita Recitation" => array(
        		"time_val" => "6:00 PM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
	  "Daily Scripture Reading - Ramayan" => array(
        		"time_val" => "7:00 PM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
	  "Daily Meditation" => array(
        		"time_val" =>"7:30 PM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
	  "Nutrition and Lifestyle Coaching" => array( 
        		"time_val" => "8:00 PM",
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	)
    ); 
    
    
    // Get the user's timezone offset from the AJAX request data
  $userTimezoneOffset = $_POST['timezoneOffset'];

    // Convert the times to the user's timezone
  convertTimesToUserTimezone($online_classes, $userTimezoneOffset);
  global $online_classes_usertimes , $live_classes; 
    // Return the list of times in the user's timezone as a JSON response
  $response = array('online_classes_usertimes : hello : ' => $live_classes);
  echo json_encode($response);   

}
add_action( "process_online_classes_action", "wpb_hook_process_classes" );
//add_shortcode( "process_online_classes", "wpb_hook_process_classes" );

// Function to convert a list of online classes with times from one timezone to another
function convertTimesToUserTimezone($online_classes, $userTimezoneOffset) {
    echo "userTimezoneOffset came : " . $userTimezoneOffset . "<br>";

  // Create a DateTimeZone object for the user's timezone
  $userTimezone = new DateTimeZone(sprintf('%+03d:%02d', abs($userTimezoneOffset / 60), abs($userTimezoneOffset % 60)));
    echo "userTimezone : " . $userTimezone->getName() . "<br>";

  // Create a DateTimeZone object for the original timezone (CDT in this example)
  $originalTimezone = new DateTimeZone('America/Chicago');

  global $online_classes_usertimes , $live_classes;
    
  // Convert each time to the user's timezone
  foreach ($online_classes as $online_class) {
    $dateTime = new DateTime($online_class["time_val"], $originalTimezone);
      echo "original datetime: " . $dateTime->format('Y-m-d h:i:s A') . "<br>";
    $dateTime->setTimezone($userTimezone);
      echo "user's datetime: " . $dateTime->format('Y-m-d h:i:s A') . "<br>";
    $online_classes_usertimes[] = $dateTime->format('Y-m-d h:i:s A');
    
      
    if(is_user_within_one_hour_of_class($userTimezone->getName(), $dateTime)) {
        $live_classes[] = $dateTime->format('Y-m-d h:i:s A');
    }
  }

  // Return the list of online classes in the user's timezone
  return $online_classes_usertimes;
}

function is_user_within_one_hour_of_class($user_timezone, $start_time) {
    // Get the current time in the user's timezone
    $user_time = new DateTime('now', new DateTimeZone($user_timezone));
    echo 'user_time : ' . $user_time->format('h:i:s A') . "<br>";

    // Get the start time of the class as a DateTime object
      // Add 1 hour to the current time
    $end_time = clone $start_time;
    $end_time->modify('+1 hour');
    
     echo 'start_time : ' . $start_time->format('h:i:s A') . "<br>";
     echo 'end_time : ' . $end_time->format('h:i:s A') . "<br>";

    if ($user_time >= $start_time && $user_time <= $end_time) {
        echo "time falls <br>";
        return true;
    } else {
        echo "time does not fall <br>";
        return false;
    }
}

function get_live_classes($online_classes, $timezone_offset) {
    // Get the current date and time in the user's timezone
    $user_time = new DateTime('now', new DateTimeZone('UTC'));
    $user_time->modify($timezone_offset . ' seconds');

    // Filter the online classes to those that are within 1 hour of the user's current time
    $live_classes = array();
    foreach ($online_classes as $class) {
        $class_time = new DateTime($class['time_val'], new DateTimeZone('America/Chicago'));
        $class_time->modify($timezone_offset . ' seconds');
        $time_diff = $class_time->diff($user_time);
        $hours_diff = $time_diff->h + ($time_diff->days * 24);
        if ($hours_diff >= -1 && $hours_diff <= 1) {
            $live_classes[] = $class;
        }
    }

    return $live_classes;
}

//=================================================
// Security: Abort if this file is called directly
//=================================================
if ( !defined('ABSPATH') ) { 
    die;
}

if (isset($_POST['timezoneOffset'])) {
    echo "this is not triggering hook <br>";
 	wpb_hook_process_classes();
}

?>

custom-date-scripts.js

    console.log(jQuery);

	var jq = jQuery.noConflict();

	// Call the function when the page loads
    jq(document).ready(function() {
        getUserTimezoneOffset();
    });

    // Function to get the user's timezone offset and send it to the server via AJAX
    function getUserTimezoneOffset() {
      var userTimezoneOffset = new Date().getTimezoneOffset();   
        
       try {
          jQuery.ajax({
            url: '../../my-custom-hooks.php',
            type: 'POST',
            data: {
              'timezoneOffset': userTimezoneOffset
            },
            noConflict: true,
            success: function(response) {
                debugger;
              // Handle the server response here
                //jQuery(document).trigger('process_online_classes_action', response);
                jQuery('#online-classes-container').html(response);
            },
              error: function(xhr, status, error) {
                  // handle the error here
                  console.log("Error: " + error);
              }
          });
         } catch(error) {
          // handle the error here
          console.log("Error: " + error);
      }   
    }

	function get_client_local_time($input_time, $input_timezone) {
        var dt = moment($input_time, ["h:mm A"]).format("HH:mm");               
        var splitTime = dt.split(/:/)
        var full_date = moment(new Date().setHours(splitTime[0], splitTime[1], 0)).tz("America/Chicago", true);
        var local_time = moment(full_date).tz(moment.tz.guess());
    
        return local_time;
    }
	
	function get_client_time($input_time, $input_timezone) {
        var local_time = get_client_local_time($input_time, $input_timezone);      
        var result = "<span style='color: #DA4505; font-size: 16px; font-weight: 600; font-style: italic; display: block; text-align: center'>" + local_time.format("h:mm a z") + "</span>";
        //document.write(result);
        return result;
    }

    function get_liveinfo_client_time($input_time, $input_timezone, $id) {     
        var result_bool = check_time_in_range($input_time, $input_timezone);
        if(result_bool) {
            var isLiveButton = document.getElementById($id);
            isLiveButton.style.visibility = 'visible';
        } else {
            var isLiveButton = document.getElementById($id);
            isLiveButton.style.visibility = 'hidden';
        }
    }

	function check_time_in_range($input_time, $input_timezone) {
        var start = get_client_local_time($input_time, $input_timezone);
        var end = moment(start).add(1, 'hours'); 
        var d = moment(); // current time
        
        var result_bool = false;
        
        if (start.hour() < d.hour() && d.hour() < end.hour()) {
            result_bool = true;
        } else if (start.hour() == d.hour()) {
            if (d.hour() == end.hour()) {
                if(start.minute() <= d.minute() && d.minute() <= end.minute()) {    
                    result_bool = true;
                } else {
                    result_bool = false;
                }
            } else if(start.minute() <= d.minute()) {
                result_bool = true
            } else {
                result_bool = false;
            }
        } else if (d.hour() == end.hour()) {
            if(d.minute() <= end.minute()) {
                result_bool = true;
            } else {
                result_bool = false;
            }
        } else {
            result_bool = false;
        }
      return result_bool;
    }

Please kindly help me out to get this working by tomorrow. My life and food depends on this work. Please.

@bcworkz ,

Thank you for your reply.

1. In the first option you provided, I think, if we were to come to the page through any link, we could directly set a cookie for user timezone offset and access it. It’s just that the cookie won’t be set when the website is opened for the first time freshly in a browser. And we don’t even have to pass it as Querystring anymore, rather we could access a global variable set from the cookie.
2. I did not clearly understand about second option at all.

One more thing is,

I would like to generate the online class details (shown in the screenshot) dynamically. Currently all the online class details are entered statically. Ecah one is a combination of header, image, header, text-editor, and a “LIVE” button which becomes visible based on a condition. There are more classes if you scroll down. There are placed inside columns of each section using Edit with Elementor. How can I accomplish this dynamically? I don’t know exactly how can I do that, but have a faint idea, Like, may be, I can create one template for class details using Elementor widgets (header, image, header, text-editor and button), and then in PHP I can loop through the classes and load, fill the template with appropriate values.

https://www.awesomescreenshot.com/image/39195322?key=99fa303839ef682328f10e3597695069

But I have no clue on the coding for this. Also if there is a better approach, please suggest so.

Thanks & Regards,

SA

• This reply was modified 3 years, 1 month ago by sanumolu5.