CODEWITHSUNDEEP
javascriptphpajaxwoocommerce
fadhelbh
fadhelbh

Reputation: 33

Retrieve product custom field values in product page custom fields

What I have ?

A single product page showing customs fields to be filled before add item to cart. I have added a button which should put all the values in the custom fields in a text file and save it without reloading the page.

enter image description here

What is my code?

in simple.php

<input type="submit" id="ajax-order-btn" class="button" value="Place Order via AJAX" />

in functions.php

<?php
add_action('wp_head', 'ajax_call_place_order');
function ajax_call_place_order() {
    if ( is_product() ){
?>
    <script type="text/javascript" >
        jQuery(document).ready(function($) {
            $(document).on("click", "#ajax-order-btn" ,function(e) {
                e.preventDefault();

                var data = {
                    'action': 'ajax_order',
                };

                $.post('<?php echo esc_url( home_url() ); ?>/wp-admin/admin-ajax.php', data);
            });
        });
    </script>
<?php
    }
}

add_action('wp_ajax_ajax_order', 'ajax_order_callback_wp');
add_action( 'wp_ajax_nopriv_ajax_order', 'ajax_order_callback_wp' );
function ajax_order_callback_wp() {
    $custom_fields_value = ***What Should Go Here***
    file_put_contents(wp_upload_dir()['basedir'].'/orders/AJAX_TEST.txt', $custom_fields_value);
}

?>

Upvotes: 3

Views: 273

Answers (1)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20954

Currently you're not sending anything to your ajax_order_callback_wp function. To do this you must get the values from the form, by selecting the form and extracting the values.

Instead of listen for the button click, listen for the submit event on the form. Preventing this default behavior will stop the form from reloading the page.

Now the $.post function is responsible for sending data to your backend, but it currently only gets an object with 'action': 'ajax_order' sent with it. It needs the data from the form as well.

jQuery has a function called serialize which can be called on a form element to extract the data from the form. Pass that form data to the data object. Now your form data is included.

jQuery(document).ready(function($) {
  var $form = $('form.cart');

  $form.on("submit" ,function(e) {
    e.preventDefault();

    var data = {
      'action': 'ajax_order',
      'data': $form.serialize()
    };

    $.post(<?php echo admin_url("admin-ajax.php"); ?>, data);
  });
});

On the receiving end you can now extract the value by reading out the global $_POST variable. This variable is available in every function and will contain values if something has been sent using the POST method. In your case you used the jQuery $.post, so $_POST is the way to go.

Because the property on the object is called data you'll need to access that property on the $_POST array to see what the values are.

function ajax_order_callback_wp() {
  // If data is there, use it, otherwise use an empty array.
  $data = $_POST[ 'data' ] ?? [];

  file_put_contents(wp_upload_dir()['basedir'] . '/orders/AJAX_TEST.txt', $data );
}

If you need to know what $data contains, then you could send a response back to the client with the contents of $data to inspect it on the frontend. Add this to end of the PHP ajax_order_callback_wp function.

wp_send_json_success( $data );

And this to your $.post function in JavaScript.

$.post(<?php echo admin_url("admin-ajax.php"); ?>, data, function(response) {
  console.log(response);
});

Upvotes: 2

Related Questions