Reputation: 309
Problem: The jQuery code doesn't triggers "update_checkout".
I have added a custom select field on order review table for customers to choose the tip amount as shown:
I want to trigger update_checkout when then select value changes, but it doesn't happen. If I select the shipping method it does triggers "update_checkout" and updates the amount percentage correctly.
HTML:
<tr class="propina">
<th id="propina_field">Propina</th>
<td>
<span class="woocommerce-input-wrapper">
<select name="propina" id="propina" class="select" data-placeholder="">
<option value="0">0</option>
<option value="1">1%</option>
<option value="2">2%</option>
<option value="3">3%</option>
<option value="5">5%</option>
<option value="7">7%</option>
<option selected value="10">10%</option>
</select>
</span>
</td>
</tr>
functions.php:
add_action( 'wp_head', 'woocommerce_tip' );
function woocommerce_tip() {
?>
<script type="text/javascript">
jQuery( document ).ready(function( $ ) {
$('#propina').change(function(){
jQuery('body').trigger('update_checkout');
});
});
</script>
<?php
}
Upvotes: 4
Views: 16781
Reputation: 254378
Updated
To test your code like in your question screenshot, I have used the following to get the same select field displayed in the right location:
add_action('woocommerce_review_order_before_order_total', 'review_order_tip_line');
function review_order_tip_line() {
?>
<tr class="propina"><th id="propina_field">Propina</th><td><span class="woocommerce-input-wrapper">
<select name="propina" id="propina" class="select" data-placeholder="">
<option value="0">0</option>
<option value="1">1%</option>
<option value="2">2%</option>
<option value="3">3%</option>
<option value="5">5%</option>
<option value="7">7%</option>
<option selected value="10">10%</option>
</select>
</td></span></tr>
<?php
}
Then here is your revisited jQuery code:
add_action( 'wp_footer', 'woocommerce_tip_script' );
function woocommerce_tip_script() {
// Only on checkout page
if( ! is_checkout() ) return;
?>
<script type="text/javascript">
jQuery(function($){
// On 'select#propina' change (live event)
$('form.woocommerce-checkout').on( 'change', 'select#propina', function(){
// Set the select value in a variable
var a = $(this).val();
// Update checkout event
$('body').trigger('update_checkout');
// Restoring the chosen option value
$('select#propina option[value='+a+']').prop('selected', true);
// Just for testing (To be removed)
console.log('trigger "update_checkout"');
// Once checkout has been updated
$('body').on('updated_checkout', function(){
// Restoring the chosen option value
$('select#propina option[value='+a+']').prop('selected', true);
// Just for testing (To be removed)
console.log('"updated_checkout" event, restore selected option value: '+a);
});
});
})
</script>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and work.
Upvotes: 3