Create WooCommerce custom Order meta via AJAX on thank you page - php

Question

I am trying to use update_meta_data via AJAX on the WooCommerce thank you page but I am stuck.
Here is what I have so far:
//Following function gets called from the page already
function renderForm() {
echo "<script>
jQuery(document).ready(function() {
$('body').on('click', '#button', function(){
$.ajax({
type: 'POST',
url: 'https://thepropdrop.com/wp-admin/admin-ajax.php',
data: {
action: 'create_user_meta'
},
success: function(textStatus){
console.log('Success');
},
error: function(MLHttpRequest, textStatus, errorThrown){
alert('errorThrown');
}
});
});
});
</script>";
}
add_action("wp_ajax_create_user_meta", "create_user_meta");
add_action("wp_ajax_nopriv_create_user_meta", "create_user_meta");
function create_user_meta() {
$order = wc_get_order($order_id);
$order->update_meta_data('hasAnswered', 'Yes');
$order->save();
die();
}
Any help you could provide would be greatly appreciated.
EDIT - My related code, that will provide some context:
Here is the button on the thankyou.php:
<span class="button gameStart">
Let's do this
</span>
<script>
jQuery(document).ready(function() {
$('.gameStart').click(function(event){
$(this).remove();
$('.gameHeader').remove();
$('.gamePage .gameContainer').css('display', 'block');
$.ajax({
type: 'GET',
url: '<?php echo admin_url("admin-ajax.php");?>',
data: {
action: 'CCAjax'
},
success: function(textStatus){
$( '.gameForm' ).prepend( textStatus );
},
error: function(MLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
}
});
});
});
</script>
<div class="gameContainer">
<div class="timerWrapper">
<div id="timer">
</div>
</div>
<div class="gameForm">
<h3>Which of the following countries has the largest land mass?</h3>
<div id='answerSubmitButton'>Submit answer</div>
</div>
</div>
Then functions.php:
function CCAjax() {
get_template_part('template-parts/game');
die();
}
add_action('wp_ajax_CCAjax', 'CCAjax');
Then the game.php:
<?php
renderForm();
?>
Now here is the full render form function (It pulls 3 potential answers from DB and also has a countdown timer, hence why i didnt post it all i didnt want to confuse)
function renderForm() {
// Fetch contries object
global $wpdb;
$results = $wpdb->get_results("select * from ( select *,#curRow :=#curRow + 1 as row_number from ( select * from ( select * from wpCountriesDB order by rand() limit 3 )b order by Mass desc )a JOIN (select #curRow :=0)r)x order by RAND()");
// Create array for answers
if(!empty($results)) {
$i = 1;
foreach ($results as $r) {
echo "<div class='answerWrapper'>
<span class='questionNumber'><span>$i</span></span>
<label class='label' for='radio$i'>".$r->Country."</label>
<input type='radio' id='radio$i' name='like' value='$r->row_number' />
</div>";
$i++;
}
}
// Display timer and check answer correct
echo "<script>
var timeLeft = 3000;
var elem = document.getElementById('timer');
var timerId = setInterval(countdown, 1000);
function countdown() {
if (timeLeft < 0) {
clearTimeout(timerId);
$('#answerSubmitButton').click();
} else {
elem.innerHTML = timeLeft + 's';
timeLeft--;
}
}
jQuery(document).ready(function() {
$('body').on('click', '#answerSubmitButton', function(){
var fetchInput = document.querySelector('.answerWrapper input[name=\'like\']:checked');
var fetchSelected = fetchInput.value;
if (fetchSelected == 1) {
$.ajax({
type: 'POST',
url: 'ajaxURL',
data: {
action: adding_custom_meta
},
success: function(textStatus){
console.log('Success');
},
error: function(MLHttpRequest, textStatus, errorThrown){
alert('errorThrown');
}
});
} else {
console.log('incorrect')
}
});
});
</script>";
}
add_action("wp_ajax_create_user_meta", "create_user_meta");
add_action("wp_ajax_nopriv_create_user_meta", "create_user_meta");
function create_user_meta() {
$order = wc_get_order($order_id);
$order->update_meta_data('hasAnswered', 'Yes');
$order->save();
die();
}
Do i have to pass the Order ID at the very start?

Answer 1

Update (since your gave some context with the missing code):
Yes you have to pass the Order ID at the very start from your thankyou page (template).
You need to rethink differently your code, as you can't pass the order ID to your renderForm() function. The order ID is required to be passed through jQuery Ajax to your PHP Wordpress Ajax function that need it (to add to the order the custom meta data).
Also another mistake is (2 times):
jQuery(document).ready(function() {
that need to be instead (as you are using the jQuery shortand $):
jQuery(document).ready(function($) {
or (the same) in a shorter way:
jQuery(function($) {
Original answer:
There is some errors and missing things in your script, like the order Id that need to be passed through jQuery ajax to your PHP Wordpress/Ajax function that will add the custom meta data…
Also you don't provide in your code, the displayed button output…
So Here it is a complete example, based on your revisited code, that will display the button on Order received (thankyou) page and will add custom meta data to your order:
// PHP Wordpress AJAX: Add custom meta data to the Order
add_action("wp_ajax_adding_custom_meta", "adding_custom_order_metadata");
add_action("wp_ajax_nopriv_adding_custom_meta", "adding_custom_order_metadata");
function adding_custom_order_metadata() {
if( isset($_POST['order_id']) && $_POST['order_id'] > 0 ){
update_post_meta(esc_attr($_POST['order_id']), '_has_answered', 'Yes');
echo json_encode($_POST['order_id']);
}
die();
}
// Display a button on thankyou page (+ jQuery Ajax script)
add_action( 'woocommerce_thankyou', 'jquery_thank_you_page', 90, 1 );
function jquery_thank_you_page( $order_id ) {
// Display the button on thankyou page
echo ''.__("Update").'';
// The jQuery script (Ajax)
?>
<script type="text/javascript">
jQuery(function($) {
$('body').on('click', '#button', function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: '<?php echo admin_url("admin-ajax.php");?>',
data: {
'action': 'adding_custom_meta',
'order_id': '<?php echo $order_id; ?>'
},
success: function(response){
console.log(response); // Just for testing
},
error: function(error){
console.log(error); // Just for testing
}
});
});
});
</script>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
Using update_post_meta() function is much better and lighter alternative than calling an instance of the WC_Order Object and use after the save() method.
I have changed the order custom meta key from hasAnswered to _has_answered
On "Order received" page, the displayed button (the order Id come back, see in the console):
In the database, the custom post meta data is created:

Answer 2

Something like this
function renderForm($order_id) { //add an argument
echo "<script>
jQuery(document).ready(function() {
$('body').on('click', '#button', function(){
$.ajax({
type: 'POST',
url: 'https://thepropdrop.com/wp-admin/admin-ajax.php',
data: {
action: 'create_user_meta',
order_id: {$order_id} //add to your request data
},
success: function(textStatus){
console.log('Success');
},
error: function(MLHttpRequest, textStatus, errorThrown){
alert('errorThrown');
}
});
});
});
</script>";
}
Then in your AJAX callback
function create_user_meta() {
if(empty($_POST['order_id'])) {
//return some error message
die();
}
$order = wc_get_order($_POST['order_id']); //get the id from the request
$order->update_meta_data('hasAnswered', 'Yes');
$order->save();
die();
}
As there is no way for me to know how you call renderForm there is no way for me to know how to put the order id in it. But at some point it will have to be either an argument or part of an argument (in the case of shortcode $attr such as [renderForm order_id=45]).
You may be also able to use something like
$order_id = get_the_ID();
Or
$order = get_post();
$order_id = $order->ID;
Depending on the context of how you use renderForm, you probably cant use them in the AJAX callback because it's a new request so you lose any of that context you had when building the page.
Hope that makes sense.
Not tested, but ... maybe it will work ... it should in theory.