问题
I have added one custom field (select tag) to checkout page that is output of two conditions:
1st >> If "Victoria" state is selected then display first condition as custom field.
2nd >> If any other state is selected then display second condition as custom field.
// Add custom checkout datepicker field to checkout page
add_action( 'woocommerce_before_order_notes', 'checkout_display_datepicker_custom_field' );
function checkout_display_datepicker_custom_field( $checkout ) {
echo '<div id="datepicker-wrapper" style="width:22%;">';
$field_id = 'my_datepicker';
$state_code = 'VIC';
$today = strtotime('today');
$tomorrow = strtotime('tomorrow');
$dayAfterTomorrow = strtotime('+2 days');
// First Condition, If "VICTORIA" is selected
if( WC()->customer->get_billing_state() === $state_code ){
woocommerce_form_field( $field_id, array(
'type' => 'select',
'class' => array('form-row-wide'),
'label' => __('Delivery Date For Victoria'),
'placeholder' => __('Select Delivery Date For Victoria'),
'required' => true, // Or false
'options' => array(
'' => 'Select',
date(('d F Y'), $today ) => date(('d F Y'), $today ),
date(('d F Y'), $tomorrow ) => date(('d F Y'), $tomorrow ),
)));
echo '<br></div>';
} else {
// Second Condition, If other state is selected
woocommerce_form_field( $field_id, array(
'type' => 'select',
'class' => array('form-row-wide'),
'label' => __('Delivery Date'),
'placeholder' => __('Select Delivery Date'),
'required' => true, // Or false
'options' => array(
'' => 'Select',
date(('d F Y'), $tomorrow ) => date(('d F Y'), $tomorrow ),
date(('d F Y'), $dayAfterTomorrow ) => date(('d F Y'), $dayAfterTomorrow ),
)));
echo '<br></div>';
}
}
Then I need a jQuery to reload above conditions on every state change and display custom field based on choosed state, I tried this script but it doesn't work:
//jQuery to refresh custom field (delivery date) based on choosed state
add_action('wp_ajax_woo_modify_state', 'delivery_date', 10);
add_action('wp_ajax_nopriv_woo_modify_state', 'delivey_date', 10);
function delivery_date() {
// On checkout
if ( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#billing_state').change(function(){
jQuery.ajax({
url: wc_checkout_params.ajax_url,
type: "post",
data: {option: jQuery(this).find("option:selected").val()},
success: function(data){
//adds the echoed response to our container
jQuery("#my_datepicker").html(data);
}
});
});
});
</script>
<?php
endif;
}
Am I using a correct method to reload a PHP condition with ajax? I don't see any error on console and that is why I am confused with it.
回答1:
You do not need to run Ajax at all. WooCommerce refreshes the checkout page after changing the default fields automatically. The following code is what you need:
add_action( 'woocommerce_review_order_before_submit', 'ywp_conditional_delivery_field' );
function ywp_conditional_delivery_field() {
$state_code = 'VIC';
if( $selected_state_code = WC()->customer->get_billing_state() ) {
$country_code = WC()->customer->get_billing_country();
$state_name = WC()->countries->get_states( $country_code )[$state_code];
if( WC()->customer->get_billing_state() === $state_code ) {
$field_id = 'my_datepicker';
$today = strtotime( 'today' );
$tomorrow = strtotime( 'tomorrow' );
$dayAfterTomorrow = strtotime( '+2 days' );
woocommerce_form_field( $field_id, array(
'type' => 'select',
'class' => array( 'form-row-wide' ),
'label' => __( 'Delivery Date For Victoria' ),
'placeholder' => __( 'Select Delivery Date For Victoria' ),
'required' => true, // Or false
'options' => array(
'' => 'Select',
date( ( 'd F Y' ), $today ) => date( ( 'd F Y' ), $today ),
date( ( 'd F Y' ), $tomorrow ) => date( ( 'd F Y' ), $tomorrow ),
)
) );
} else {
woocommerce_form_field( $field_id, array(
'type' => 'select',
'class' => array( 'form-row-wide' ),
'label' => __( 'Delivery Date' ),
'placeholder' => __( 'Select Delivery Date' ),
'required' => true, // Or false
'options' => array(
'' => 'Select',
date( ( 'd F Y' ), $tomorrow ) => date( ( 'd F Y' ), $tomorrow ),
date( ( 'd F Y' ), $dayAfterTomorrow ) => date( ( 'd F Y' ), $dayAfterTomorrow ),
)
));
}
}
}
EDIT
The following code works correctly to display the shipping date before the order note that you need it:
add_action( 'woocommerce_before_order_notes', 'ywp_conditional_delivery_field' );
function ywp_conditional_delivery_field() {
$today = date( 'd F Y' ,strtotime( 'today' ) );
$tomorrow = date( 'd F Y' ,strtotime( 'tomorrow' ) );
$dayAfterTomorrow = date( 'd F Y' ,strtotime( '+2 days' ) );
?>
<script>
jQuery(document).ready(function($){
$('#billing_state').on('change',function(){
if($(this).val()=='VIC'){
$('#my_non_VIC_datepicker_field').remove();
$('#order_comments_field').prepend('<p class="form-row form-row-wide validate-required" id="my_VIC_datepicker_field" data-priority=""><label for="my_VIC_datepicker" class="">Delivery Date For Victoria <abbr class="required" title="required">*</abbr></label><span class="woocommerce-input-wrapper"><select name="my_VIC_datepicker" id="my_VIC_datepicker" class="select " data-allow_clear="true" data-placeholder="Select Delivery Date For Victoria"><option value="" selected="selected">Select</option><option value="<?php echo $today; ?>" ><?php echo $today; ?></option><option value="<?php echo $tomorrow; ?>"><?php echo $tomorrow; ?></option></select></span></p>');
} else {
$('#my_VIC_datepicker_field').remove();
$('#order_comments_field').prepend('<p class="form-row form-row-wide validate-required" id="my_non_VIC_datepicker_field" data-priority=""><label for="my_non_VIC_datepicker_field" class="">Delivery Date <abbr class="required" title="required">*</abbr></label><span class="woocommerce-input-wrapper"><select name="my_non_VIC_datepicker" id="my_non_VIC_datepicker" class="select " data-allow_clear="true" data-placeholder="Select Delivery Date"><option value="" selected="selected">Select</option><option value="<?php echo $today; ?>" ><?php echo $today; ?></option><option value="<?php echo $tomorrow; ?>"><?php echo $tomorrow; ?></option><option value="<?php echo $dayAfterTomorrow; ?>"><?php echo $dayAfterTomorrow; ?></option></select></span></p>');
}
});
})
</script>
<?php
}
Code goes in functions.php of your active theme/child theme. Tested and works.
来源：https://stackoverflow.com/questions/65468988/reload-a-php-condition-with-ajax-woocommerce