I am using the Pledge API charity search widget that shows up on a product page so that the user can select a charity which is then sent to the functions.php. For now, I just want the functions.php to display the charity.
My code is as follows:
function add_charity_hidden_field() {
echo '<input type="hidden" name="charity_data" id="charity_data" value="" />';
}
add_action('woocommerce_after_order_notes', 'add_charity_hidden_field');
add_action('woocommerce_before_add_to_cart_button', 'my_custom_checkout_field');
function my_custom_checkout_field() {
echo '<div id="Charity"><h3>Charity</h3>';
echo '<div class="plg-search" data-partner-key="DATA_PARTNER_KEY">
</div><script>
document.addEventListener("DOMContentLoaded", function () {
// Create a hidden input to store charity data
const charityInput = document.createElement("input");
charityInput.type = "hidden";
charityInput.name = "charity_data"; // The name will be used to reference in PHP
charityInput.id = "charity_data"; // Optional: Assign an ID to the input
// Append the hidden input to the WooCommerce checkout form
const checkoutForm = document.querySelector("form.checkout");
if (checkoutForm) {
checkoutForm.appendChild(charityInput);
}
// Function to handle charity data updates
const updateEvent = data => {
// Convert the charity data to a string and set it as the value of the hidden input
charityInput.value = JSON.stringify(data);
console.log("Charity data updated:", data); // Debugging: Log the data for confirmation
}
// Function to handle the removal of charity data (if applicable)
const removeEvent = () => {
charityInput.value = ""; // Clear the hidden input if the event is removed
console.log("Charity data removed"); // Debugging: Log the removal
}
// Function to handle the incoming message from the widget
const handleMessage = e => {
// Ensure the message is coming from the correct origin
if (e.origin !== "https://www.pledge.to") return;
// Parse the incoming message
const message = JSON.parse(e.data);
// Handle the actions based on the message type
switch (message.action) {
case "updateEvent":
return updateEvent(message.data);
case "removeEvent":
return removeEvent();
}
}
// Add the message event listener to listen for the charity widgets data
addEventListener("message", handleMessage);
});
</script>
';
echo '</div>';
}
// Store custom field
function save_my_custom_checkout_field( $cart_item_data, $product_id ) {
if (isset($_POST['charity_data']) && !empty($_POST['charity_data'])) {
// Sanitize the charity data
$cart_item_data = sanitize_text_field($_POST['charity_data']);
echo $cart_item_data;
} else {
echo "No charity";
}
return $cart_item_data;
}
add_action( 'woocommerce_add_cart_item_data', 'save_my_custom_checkout_field', 10, 2 );
It constantly displays “No Charity” even after I select a charity. I know that selecting a charity has worked because it displays the charity in the console.