Fatal编程技术网
  • php/
  • 使用ajax重新加载PHP条件（Woocommerce）

使用ajax重新加载PHP条件（Woocommerce）

php jquery ajax woocommerce

使用ajax重新加载PHP条件（Woocommerce）,php,jquery,ajax,woocommerce,Php,Jquery,Ajax,Woocommerce,我已将一个自定义字段（选择标记）添加到签出页面，该页面是两个条件的输出： 第一>>如果选择了“维多利亚”州，则将第一个条件显示为自定义字段 // Add custom checkout datepicker field to checkout page add_action( 'woocommerce_before_order_notes', 'checkout_display_datepicker_custom_field' ); function checkout_display_date

我已将一个自定义字段（选择标记）添加到签出页面，该页面是两个条件的输出：

第一>>如果选择了“维多利亚”州，则将第一个条件显示为自定义字段

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

        }  
}
第二个>>如果选择了任何其他状态，则将第二个条件显示为自定义字段

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

        }  
}

//将自定义签出日期选择器字段添加到签出页面
添加操作（“订单注释前的woocommerce”、“签出显示”、“日期选择器”、“自定义字段”）；
函数签出\显示\日期选择器\自定义\字段（$checkout）{
回声'；
$field_id='my_datepicker'；
$state_code='VIC'；
$today=标准时间（“今天”）；
$明天=标准时间（“明天”）；
$dayAfterMorrow=strtotime（“+2天”）；
//第一个条件，如果选择“VICTORIA”
如果（WC（）->customer->get_billing_state（）===$state_code）{
woocommerce\u表单\u字段（$field\u id，数组）(
'类型'=>'选择'，
'class'=>array（'form-row-wide'），
“标签”=>（维多利亚的交货日期），
“占位符”=>（选择维多利亚的交货日期），
“必需”=>true、//或false
“选项”=>数组(
''=>'选择'，
日期（（'dfy'），$today）=>日期（'dfy'），$today），
日期（（'dfy'），$明天）=>日期（'dfy'），$明天），
)));
回声“
”；
}否则{
//第二个条件，如果选择了其他状态
woocommerce\u表单\u字段（$field\u id，数组）(
'类型'=>'选择'，
'class'=>array（'form-row-wide'），
“标签”=>（交货日期），
“占位符”=>（选择交货日期），
“必需”=>true、//或false
“选项”=>数组(
''=>'选择'，
日期（（'dfy'），$明天）=>日期（'dfy'），$明天），
日期（'dfy'），$dayAfterrow）=>日期（'dfy'），$dayAfterrow），
)));
回声“
”；
}  
}
然后我需要一个jQuery在每次状态更改时重新加载上述条件，并根据所选状态显示自定义字段，我尝试了这个脚本，但它不起作用：

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

//jQuery根据所选状态刷新自定义字段（交货日期）
添加操作（“wp\U ajax\U woo\U修改状态”、“交付日期”，10）；
添加动作（“wp\u ajax\u nopriv\u woo\u modify\u state”、“delivey\u date”，10）；
功能交付日期（）{
//结帐时
如果（is_checkout（）&&！is_wc_endpoint_url（））：
?>
jQuery（文档）.ready（函数（）{
jQuery（“#账单_状态”）.change（函数（）{
jQuery.ajax({
url:wc_checkout_params.ajax_url，
类型：“post”，
数据：{option:jQuery（this）.find（“option:selected”）.val（）}，
成功：功能（数据）{
//将响应添加到我们的容器中
jQuery（“#我的日期选择器”）.html（数据）；
}
});
});
});

您根本不需要运行Ajax。WooCommerce会在自动更改默认字段后刷新签出页面。您需要以下代码：


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


编辑

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


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
}



add_action（'woocommerce_-before_-order_-notes'，'ywp_-conditional_-delivery_-field'）；
函数ywp_条件_传递_字段（）{
$today=日期（'dfy'，标准时间（'today'）；
$MOTORY=日期（'DFY'，标准时间（'MOTORY'）；
$dayAfterMorrow=日期（'d F Y'，标准时间（'+2天'）；
?>
jQuery（文档）.ready（函数（$）{
$（“#账单状态”）。在（'change'，function（）上{
if（$（this.val（）=='VIC'）{
$（“#my_non_VIC_datepicker_字段”）.remove（）；

$（“#订单(备注)字段”）。前置（“
维多利亚的交付日期*选择“它不工作”是什么意思”？您试图检查什么东西没有按预期工作？PHP代码工作，但jQuery没有按预期工作。@NicoHaase是
url:wc\u checkout\u params.ajax\u url，
正确？您是否可以共享任何错误消息？什么“没有工作”确切的意思是？请求是否正确发送？它是否包含预期的数据？或者响应是否未正确处理？@NicoHaase否我在控制台中没有看到任何错误。如何才能确定请求是否正确发送？当前，当我更改账单状态时，自定义签出日期选择器字段中没有任何更改。谢谢！但我仍然有一个问题；为什么我们的代码不适用于
woocommerce\u-before\u-order\u-notes
？而且您的代码不显示占位符，但
woocommerce\u-before\u-order\u-notes
显示占位符。不客气。因为订单说明不会通过更改woocommerce字段进行更新。此外，选择标记也不会收到占位符值。这是来自html限制ns，不是来自我的代码：）好的，我该怎么做才能在订单注释之前或订单详细信息表之后显示自定义字段？为什么
woocommerce\u-before\u-order\u-notes
可以显示选择标记的占位符？@omid toraby我编辑了代码。国家/地区和州字段有占位符的原因是woocommerce使用占位符来搜索这两个字段e、 您可以使用文档自行应用更改。@omid toraby您还应该在订购时保存这些值，并将其显示在订单管理计数器中。这将对您有所帮助。