基于邮政编码的 Woocommerce 结帐字段

Question

我在结账时有一个 radio 自定义字段。我需要根据所选的邮政编码填充单选字段的选项。如果邮政编码发生变化，我需要更新选项。

add_filter('woocommerce_after_checkout_billing_form', 'cc_custom_checkout_fields');
function cc_custom_checkout_fields($checkout)
{
    woocommerce_form_field('deliveryhours', array(
        'type'          => 'radio', 
        'required'    => false,
        'class'         => array('form-row-wide'),
        'options'     => array(
            '' => __('Select:'),
            'F1' => __('11:00 – 13:00'),
            'F2' => __('13:00 – 15:00'),
            'F3' => __('16:00 – 17:30'),
            'F4' => __('17:30 – 19:00'),
            'F5' => __('19:00 – 21:00')
        )
    ), $checkout->get_value('deliveryhours'));
}

我怎样才能实现这一目标？

谢谢!

Answer 1

如果您想从邮政编码字段重置表单字段，您应该在自定义字段函数中使用 jquery，如下所示:

  add_filter('woocommerce_after_checkout_billing_form', 'cc_custom_checkout_fields');
  function cc_custom_checkout_fields($checkout)
  {
        woocommerce_form_field('deliveryhours', array(
        'type'          => 'radio', 
        'required'    => false,
        'class'         => array('form-row-wide'),
        'options'     => array(
              '' => __('Select:'),
              'F1' => __('11:00 – 13:00'),
              'F2' => __('13:00 – 15:00'),
              'F3' => __('16:00 – 17:30'),
              'F4' => __('17:30 – 19:00'),
              'F5' => __('19:00 – 21:00')
        )
        ), $checkout->get_value('deliveryhours'));

        wc_enqueue_js( "
              // On change Postalcode. #billing_postcode => postal code input field id
              jQuery(document).on('blur','#billing_postcode',function() {
                    var postcode = jQuery(this).val();  
                    if(postcode){
                          jQuery('#deliveryhours_field .input-radio').first().prop('checked', true); // reset radio
                          jQuery(document.body).trigger('update_checkout'); // update checkout 
                    }
              });
        ");
  }

您还可以相应地修改条件。