I'm trying to create a custom voucher discount and apply it to the WooCommerce cart page as a discount in the cart totals. The custom vouchers are fetched from another server where the vouchers are stored. I have added a form on the cart page with the hook woocommerce_before_cart_totals to enter a voucher number and a value to spend onclick() of the form button. To query for a voucher I am using a JSONcallback to request to spend a voucher on the external voucher system. I get the response data from the JSONcallback request. I can then console.log(voucherAmountSpent); and console.log(remainingVoucherBalance); ... and this works fine. What I need to do now is take that JavaScript value voucherAmountSpent, and send it to the WooCommerce cart page to create a voucher discount that's applied to the cart totals and calculated to adjust the cart totals accordingly.
So how do I grab the JavaScript variable voucherAmountSpent and apply it as a WooCommerce custom discount?
I am following the add custom discount example here: dynamic cart
This works to add a custom discount to the totals, but for some reason it disables the "Place order" button on the checkout page. It is supposed to redirect to PayPal to pay the rest, but nothing happens when the button is clicked.
How can I find out what is causing the "Place order" button on the checkout page to be disabled? Here is the code so far...
function my_init() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, '1.3.2');
wp_enqueue_script('jquery');
}
}
function giftcard_front_end_scripts() {
wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/gift_card.js' , array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'giftcard_front_end_scripts' );
// Displaying a select field and a submit button in checkout page
function gift_card_value_check() {
echo '<a class="button alt" name="gift_card_action_btn" id="gift_card_action" value="Apply" data-value="gift_card_data_value">Apply Now</a>';
}
add_action( 'woocommerce_checkout_after_customer_details', 'gift_card_value_check', 10, 0 );
// jQuery - Ajax script
function gift_card_redeem_script() {
// Only checkout page
if ( ! is_checkout() ) return;
?>
<script type="text/javascript">
jQuery( function($){
$('#gift_card_action').on('click', function() {
redeemCard();
$.ajax({
type: "post",
url: wc_checkout_params.ajax_url,
data: {
'action' : 'gift_card_redeem',
//'gift_card_value' : $("#rx-redemption-points").val()
'gift_card_value' : $("#gift_card_redeem").val()
},
success: function(response) {
$('body').trigger('update_checkout');
console.log('response: '+response); // just for testing | TO BE REMOVED
},
error: function(error){
console.log('error: '+error); // just for testing | TO BE REMOVED
}
});
})
})
</script>
<?php
}
add_action( 'wp_footer', 'gift_card_redeem_script' );
// Wordpress Ajax code (set ajax data in Woocommerce session)
add_action( 'wp_ajax_gift_card_redeem', 'gift_card_redeem' );
add_action( 'wp_ajax_nopriv_gift_card_redeem', 'gift_card_redeem' );
function gift_card_redeem() {
if( isset($_POST['gift_card_value']) ){
WC()->session->set( 'custom_fee', esc_attr( $_POST['gift_card_value'] ) );
echo true;
}
exit();
}
add_action( 'wp_ajax_gift_card_redeem', 'gift_card_redeem' );
add_action( 'wp_ajax_nopriv_gift_card_redeem', 'gift_card_redeem' );
// Add a custom dynamic discount based on gift_card_data_value
function gift_card_value_discount( $cart ) {
if ( is_admin() && ! defined( 'DOING_AJAX' ) )
return;
// Only for targeted shipping method
if ( WC()->session->__isset( 'custom_fee' ) )
$discount = (float) WC()->session->get( 'custom_fee' );
if( isset($discount) && $discount > 0 )
$cart->add_fee( __( 'Giftcard discount', 'woocommerce' ), -$discount );
}
add_action( 'woocommerce_cart_calculate_fees', 'gift_card_value_discount', 20, 1 );
// Add the gift card fields to the checkout page
function customise_checkout_field($checkout)
{
echo '<div id="customise_checkout_field"><h3>' . __('Have a Giftcard?') . '</h3>';
echo '<form>';
woocommerce_form_field('card_number_field', array(
'type' => 'text',
'class' => array(
'my-field-class form-row-wide'
) ,
'label' => __('Enter your giftcard number') ,
'id' => 'gift_card_number',
'placeholder' => __('19 digits, no spaces') ,
'required' => true,
) , $checkout->get_value('card_number_field'));
woocommerce_form_field('pin_field', array(
'type' => 'text',
'class' => array(
'my-field-class form-row-wide'
) ,
'id' => 'gift_card_pin',
'label' => __('Enter your PIN') ,
'placeholder' => __('4 digits') ,
'required' => true,
) , $checkout->get_value('pin_field'));
woocommerce_form_field('redeem_amount_field', array(
'type' => 'text',
'class' => array(
'my-field-class form-row-wide'
) ,
'label' => __('Amount to redeem $') ,
'id' => 'gift_card_redeem',
'placeholder' => __('0.00') ,
'required' => true,
) , $checkout->get_value('redeem_amount_field'));
//echo '<input type="button" value="Redeem Giftcard" onclick="redeemCard()"';
echo '<span id="redeemed"></span>';
echo '</form>';
echo '</div>';
}
add_action('woocommerce_after_order_notes', 'customise_checkout_field');
Any help with this would be appreciated... thanks in advance.
If it is of any use, I am using WordPress 5.0.3 and WooCommerce 3.5.4
