Site icon Hip-Hop Website Design and Development

How to add AJAX in a custom PHP function using Google sheets API

I have followed a website link to fetch data from a SINGLE CELL of a Google sheet to a shortcode.

And I am using that shortcode into the COUNTER widget in Elementor to achieve counting animation while fetching the fresh data from that cell of the Google sheet which updates itself after every 1 minute.

The thing I want to implement is to keep the counter "running" like the Google sheet’s cell is updating (refreshes once in a minute).

The counter does not change its figure even when I reload the page. But changes the figure if I reload after like half an hour or so. But I don’t want the users to reload the page to see the updated figure. I want the counter to update itself (whenever the sheet cell value changes) while the user is on the page.

PHP function I am using:

function sheet_value_shortcode($atts)
{
    $API = '[Insert API Key Here]';
    $google_spreadsheet_ID = '[Insert Google Spreadsheet ID Here]';
    $api_key = esc_attr($API);

    $location = $atts['location'];

    $get_cell = new WP_Http();
    $cell_url = "https://sheets.googleapis.com/v4/spreadsheets/$google_spreadsheet_ID/values/$location?&key=$api_key";
    $cell_response = $get_cell->get($cell_url);
    $json_body = json_decode($cell_response['body'], true);
    $cell_value = $json_body['values'][0][0];
    return $cell_value;
}
add_shortcode('get_sheet_value', 'sheet_value_shortcode');