WooCommerce Update Checkout With Ajax

I have a woocommerce shopping cart.  I need to be able to update the checkout to reflect no shipping charge.  I found the following code that can update the cart via ajax and it works great, except that it deletes the tax.  I guess I need to pass the tax rate via the AJAX?  Right now it is set to update the :
billing_state: billingstate,
billing_country : billingcountry,

Does any expert know how I should update the Tax?  I think the script is over writing it but I'm not 100% sure and unfortunately there is not a url I can share

function custom_checkbox_checker () 
	{
		if ( is_checkout() ) 
		{
			wp_enqueue_script( 'jquery' ); ?>
			<script>
			jQuery(document).ready( function (e) 
			{
				var $ = jQuery;
				if ( typeof wc_checkout_params === 'undefined' )
				return false;

				var updateTimer,dirtyInput = false,xhr;

				function update_shipping(billingstate,billingcountry) 
				{

					if ( xhr ) xhr.abort();

					$( '#order_methods, #order_review' ).block({ message: null, overlayCSS: { background: '#fff url(' + wc_checkout_params.ajax_loader_url + ') no-repeat center', backgroundSize:'16px 16px', opacity: 0.6 } });

						var data = {

						action: 'woocommerce_update_order_review',

						security: wc_checkout_params.update_order_review_nonce,

						billing_state: billingstate,

						billing_country : billingcountry,

						post_data: $( 'form.checkout' ).serialize()

						};

						xhr = $.ajax({

						type: 'POST',

						url: wc_checkout_params.ajax_url,

						data: data,

						success: function( response ) {

						var order_output = $(response);

						$( '#order_review' ).html( response['fragments']['.woocommerce-checkout-review-order-table']+response['fragments']['.woocommerce-checkout-payment']);

						$('body').trigger('updated_checkout');

						},

						error: function(code){

						console.log('ERROR');

						}

						});

				}

			jQuery('.state_select').change(function(e, params){

			update_shipping(jQuery(this).val(),jQuery('#billing_country').val());

			});
		});
</script>
    
<?php }

    }

    add_action( 'wp_footer', 'custom_checkbox_checker', 50 );

Open in new window

LVL 8
rgranlundAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
No specific experience with this particular issue but prepared to talk you through it.
update_order_review() function definition can be found here http://woocommerce.wp-a2z.org/oik_api/wc_ajaxupdate_order_review/
Does not appear to explicitly do anything with Tax but it does call calculate_totals() which might affect the result.

Where is tax currently being set?
0
rgranlundAuthor Commented:
Is line 48 above over writing the current content of #order_review?  It is in that div ID where the tax is also previously written, then on change it disappears.
0
rgranlundAuthor Commented:
@julian;

I think I know what I need to do to fix my issue but here is my problem, just taken a little father.  I need this jquery change function to initiate the following php function and I am not sure how to accomplish this.

The jQuery:
<script>

jQuery(function($) {
    var order_type = {
    	$checkout_form: $( 'form.checkout' ),
        init: function() {
            this.$checkout_form.on( 'change', 'select.order_type', this.check_for_in_store );
        },
        check_for_in_store: function(){
        	if(jQuery('select.order_type').val() == 'in_store'){
        		$( 'input[name^="shipping_method"][type="radio"]' ).each( function() {
        			
        			if($(this).val().indexOf('free_shipping') >= 0){
        				$(this).trigger('click');   
        			}
        		})
        	}
            //  THIS DOES NOT WORK   jQuery(document.body).trigger("update_checkout");
//  THIS IS WHERE I THINK I NEED TO CALL MY PHP FUNCTION

        }
    }

    order_type.init();
})

Open in new window


Here is the PHP Function:
<?php
function custom_checkbox_checker () 
	{
		if ( is_checkout() ) 
		{
			wp_enqueue_script( 'jquery' ); ?>
			<script>
			jQuery(document).ready( function (e) 
			{
				var $ = jQuery;
				if ( typeof wc_checkout_params === 'undefined' )
				return false;

				var updateTimer,dirtyInput = false,xhr;

				function update_shipping(billingstate,billingcountry) 
				{

					if ( xhr ) xhr.abort();

					$( '#order_methods, #order_review' ).block({ message: null, overlayCSS: { background: '#fff url(' + wc_checkout_params.ajax_loader_url + ') no-repeat center', backgroundSize:'16px 16px', opacity: 0.6 } });

						var data = {

						action: 'woocommerce_update_order_review',

						security: wc_checkout_params.update_order_review_nonce,

						billing_state: billingstate,

						billing_country : billingcountry,

						post_data: $( 'form.checkout' ).serialize()

						};

						xhr = $.ajax({

						type: 'POST',

						url: wc_checkout_params.ajax_url,

						data: data,

						success: function( response ) {
console.log('success today');
						var order_output = $(response);

						$( '#order_review' ).html( response['fragments']['.woocommerce-checkout-review-order-table']+response['fragments']['.woocommerce-checkout-payment']);

						$('body').trigger('updated_checkout');

						},

						error: function(code){

						console.log('ERROR');

						}

						});

				}

			jQuery('.state_select').change(function(e, params){

			update_shipping(jQuery(this).val(),jQuery('#billing_country').val());

			});
		});
</script>
    
<?php }

    }

    add_action( 'wp_footer', 'custom_checkbox_checker', 50 );
	

Open in new window


I do not understand line 14 of the jQuery
I also don't understand line 65 and 67 of the PHP
0
OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

Julian HansenCommented:
In the first listing
$(this).trigger('click');

Open in new window

The code is checking the radio button - you could achieve this with the following code as well
$(this).prop({checked: true});

Open in new window

65-67 Is saying that when the <select> (with class .state-select - I am assuming the State dropdown) changes then call the update_shipping() (javascript) function which is defined earlier in the PHP and basically does an AJAX call back to the server to update the shipping.

As to your question in your earlier post line 48 - what appears to be happening is you are calling back to the server - it is sending back a rendered fragment which you are replacing into an element on the page. If that element contains the tax then the returned fragment would have to include the tax as well - otherwise it will get wiped.
0
rgranlundAuthor Commented:
OK.  I just need to figure out how to include the tax!  The tough part is that there is almost Zero documentation and Woo won't support custom coding.  I will keep searching.  Thanks.
0
Julian HansenCommented:
Feel free to bounce ideas here - Woo programming is not easy as you say docs and examples are not readily available especially when you want to go outside the box - happy to help as a sounding board.
0
rgranlundAuthor Commented:
What are your thoughts on the following:
When I change the order type from Phone to In-Store, it wipes the taxes.  This, I believe, comes from line 49 above:
 $( '#order_review' ).html( response['fragments']['.woocommerce-checkout-review-order-table']+response['fragments']['.woocommerce-checkout-payment']);

Taxes are in the .woocommerce-checkout-review-order-table
You can see in the two screenshots I have included.
Do you think that I need to pass the taxes in the AJAX as part of the update?  The code that I have found above is to update the checkout and price on state-change.  It will update the price when I change the shipping.
The two screen shots are from two different tests but show exactly how the taxes are there and then gone.
Before_Change.PNG
After_Change.PNG
0
Julian HansenCommented:
I would dump the response in the AJAX success call back and see if there is not a section in there that deals with tax - it might be as simple as adding another +response['fragments']['woocommerce-checkout-tax'] or similar.

So replace line 46
console.log('success today');

Open in new window

With
console.log(response);

Open in new window


And let's see what that shows us in the console.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.