用ajax重新加载PHP条件(Woocommerce) [英] reload a PHP condition with ajax (Woocommerce)

问题描述

我在结帐页面上添加了一个自定义字段(选择标记)，该字段输出两种情况:

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>';                 

        }  
}

然后，我需要一个jQuery，以便在每次状态更改时重新加载上述条件，并根据所选状态显示自定义字段，我尝试了此脚本，但它不起作用:

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;
}

我是否使用正确的方法用ajax重新加载PHP条件?我在控制台上看不到任何错误，这就是为什么我对此感到困惑的原因.

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.

推荐答案

您根本不需要运行Ajax.WooCommerce在自动更改默认字段后刷新结帐页面.您需要以下代码:

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 ),
                )
            ));
        }
    }
}

编辑

以下代码可以正常工作，以在您需要的订单注释前显示发货日期:

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&nbsp;<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&nbsp;<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
}

代码进入活动主题/子主题的 functions.php 中.经过测试，可以正常工作.

Code goes in functions.php of your active theme/child theme. Tested and works.

这篇关于用ajax重新加载PHP条件(Woocommerce)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！