Woocommerce aJax apply coupon code to basket

Question

I am attempting to apply a coupon code to the basket on a button press. I have the following code:-

coupon = jQuery(this).data('coupon');
data = {coupon_code : coupon};
jQuery.post( "?wc-ajax=apply-coupon", { coupon_code: coupon }).done(function( data ) {
    alert( "Data Loaded: " + data );
});

I can see the following data is being parsed to the server:-

coupon_code: 10percentdiscount

The 10percentdiscount exists.

The Server is not sending back a response once I have sent the request.

Am I correctly making this request or is there another way?

Thank you in advance.

Answer 1

I would do so:

Define ajax url in header.php or in page would you add coupon

<script type="text/javascript" language="javascript">
var ajax_url = "<?php bloginfo('url'); ?>/wp-admin/admin-ajax.php";
</script>

In function.php you must define ajax call

function implement_ajax() {
    include(TEMPLATEPATH . '/ajax_return.php');
}

add_action('wp_ajax_my_special_action', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_action', 'implement_ajax');

In ajax_return.php you past code that add coupon to woocommerce:

if (isset($_POST['couponcode']))
    { apply_coupon($_POST['couponcode']); }; 

function apply_coupon($couponcode) { 
    global $woocommerce; WC()->cart->remove_coupons();
    $ret = WC()->cart->add_discount( $couponcode ); 
    $array = array('return' => $ret); print_r($array); 
}
exit;

Your jQuery.post will became this:

<script type="text/javascript">
jQuery(function(){
    coupon = jQuery(this).data('coupon');
    jQuery.post(ajax_url, {action : 'my_special_action', couponcode : coupon}, return_function, 'JSON');
});

function return_function(data)
{
   console.log(data.return); //contains true if coupon was applied
}
</script>

If you need, call return_function to manage response.

Answer 2

You don't need to add custom code in your functions.php. Woocommerce supports adding coupons via AJAX natively (see how below).

Errors in your code:

1. You forgot to send the nonce (security parameter);
2. It is apply_coupon not apply-coupon (underscore vs dash);
3. Your URL should start with a slash "/?wc-ajax=apply_coupon";

Correct version:

var data = {
  coupon_code: jQuery(this).data('coupon'), 
  security: '<?php echo wp_create_nonce("apply-coupon") ?>'
};
jQuery.post('/?wc-ajax=apply_coupon', data).done(function(data) {
  alert("Data Loaded: " + data);
});