logo标签列表

WordPress - 单选按钮结账 WooCommerce 显示/隐藏必填字段

wordpresswoocommerceradio-buttoncheckout
8

我是意大利人（对我的英语表示抱歉），我不是程序员。

我需要在我的 WooCommerce 结账网站中插入一个带有两个选项的单选按钮，以回答这个问题：“Sei un privato cittadino, un'azienda o un libero professionista?”（你是私人、公司还是自由职业者？）。 以下是选项： 1）Privato cittadino 2）Azienda o libero professionista

当用户点击第一个选项时，它必须显示一个必填字段：“codice fiscale”。当用户点击第二个选项时，它必须显示两个必填字段：“P.Iva”和“Ragione sociale”。我已经通过在 form-billing.php 中使用以下代码创建了单选按钮：

    <div class="woocommerce-billing-fields">
    <?php if ( wc_ship_to_billing_address_only() && WC()->cart->needs_shipping() ) : ?>

        <h3><?php _e( 'Billing &amp; Shipping', 'woocommerce' ); ?></h3>

    <?php else : ?>

        <h3><?php _e( 'Billing Details', 'woocommerce' ); ?></h3>
<?
if($key=='billing_first_name')
{
?>
<p>Sei un privato cittadino, un'azienda o un libero professionista?</p>
<input type="radio" name="choice" value="privato_cittadino">Privato cittadino
<input type="radio" name="choice" value="azienda_professionista">Azienda o libero professionista<br>
<?
}
?>
    <?php endif; ?>

它能够正常工作，但现在我不知道如何创建我所描述的必需字段。你可以逐步帮助我吗？请注意，我不是一名程序员。

你可以看一下这个链接：https://www.cloudways.com/blog/custom-field-woocommerce-checkout-page/，他们解释了如何使用插件或纯代码添加自定义字段。 - Bas van Dijk
1
我认为有一个很棒的高端插件可以满足您的所有需求，而无需编写任何代码。https://www.themehigh.com/product/woocommerce-checkout-field-editor-pro/ - Sarathlal N
1个回答
8
回答这个问题需要分为四个步骤来完成。
1. 在woocommerce结账页面上添加4个自定义字段。你现在的做法并不是最佳实践，应该通过使用actions/filters来完成。 2. 当向后端发送请求时，验证数据，以确保用户选择和输入了必要的内容。 3. 将数据保存到订单中作为文章元素，以便以后可以访问。 4. 实现javascript切换功能，以便根据用户对第一个问题的选择，显示相关字段。
在woocommerce结账中添加自定义字段
您需要找到适当的操作，以添加字段。我建议使用操作woocommerce_after_checkout_billing_form，因为它会在所有个人/帐单信息之后显示字段。
if( !function_exists( 'custom_checkout_question_field' ) ) {
  /**
   * Add custom question field after the billing form fields
   *
   * @param Integer $order_id New order id
   */
  function custom_checkout_question_field( $checkout ) {

    echo "<div class='custom-question-field-wrapper custom-question-1'>";

    echo sprintf( '<p>%s</p>', __( "Sei un privato cittadino, un'azienda o un libero professionista?" ) );

    woocommerce_form_field( 'custom_question_field', array(
      'type'            => 'radio',
      'required'        => true,
      'class'           => array('custom-question-field', 'form-row-wide'),
      'options'         => array(
        'privato_cittadino'         => 'Privato cittadino',
        'azienda_professionista'    => 'Azienda o libero professionista',
      ),
    ), $checkout->get_value( 'custom_question_field' ) );

    woocommerce_form_field( 'custom_question_text_codice_fiscale', array(
      'type'            => 'text',
      'label'           => 'Codice Fiscale',
      'required'        => true,
      'class'           => array('custom-question-codice-fiscale-field', 'form-row-wide'),
    ), $checkout->get_value( 'custom_question_text_codice_fiscale' ) );

    woocommerce_form_field( 'custom_question_text_p_iva', array(
      'type'            => 'text',
      'label'           => 'P.Iva',
      'required'        => true,
      'class'           => array('custom-question-p-iva-field', 'form-row-wide'),
    ), $checkout->get_value( 'custom_question_text_p_iva' ) );

    woocommerce_form_field( 'custom_question_text_ragione_sociale', array(
      'type'            => 'text',
      'label'           => 'Ragione sociale',
      'required'        => true,
      'class'           => array('custom-question-ragione-sociale-field', 'form-row-wide'),
    ), $checkout->get_value( 'custom_question_text_ragione_sociale' ) );

    echo "</div>";

  }

  add_action( 'woocommerce_after_checkout_billing_form', 'custom_checkout_question_field' );
}

Javascript前端切换

您需要添加自定义JavaScript代码，以便根据问题切换3个附加字段。我已创建一个PHP函数，它将输出一个带有一些JavaScript的HTML script标签。然后将其附加到wp_footer操作上。

这不是推荐的方法，您应该将其分成一个新的js文件，并在需要时将文件加入队列中。

请参见：https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

if( !function_exists( 'custom_question_conditional_javascript' ) ) {
  function custom_question_conditional_javascript() {
    ?>
    <script type="text/javascript">
    (function() {

      // Check if jquery exists
      if(!window.jQuery) {
        return;
      };

      var $ = window.jQuery;

      $(document).ready(function() {

        var questionField       = $('.custom-question-field'),
            codiceFiscaleField  = $('.custom-question-codice-fiscale-field'),
            pIvaField           = $('.custom-question-p-iva-field'),
            ragioneSocialeField = $('.custom-question-ragione-sociale-field ');

        // Check that all fields exist
        if(
          !questionField.length ||
          !codiceFiscaleField.length ||
          !pIvaField.length ||
          !ragioneSocialeField.length
        ) {
          return;
        }

        function toggleVisibleFields() {
          var selectedAnswer = questionField.find('input:checked').val();

          if(selectedAnswer === 'privato_cittadino') {
            codiceFiscaleField.show();
            pIvaField.hide();
            ragioneSocialeField.hide();
          } else if(selectedAnswer === 'azienda_professionista') {
            codiceFiscaleField.hide();
            pIvaField.show();
            ragioneSocialeField.show();
          } else {
            codiceFiscaleField.hide();
            pIvaField.hide();
            ragioneSocialeField.hide();
          }
        }

        $(document).on('change', 'input[name=custom_question_field]', toggleVisibleFields);
        $(document).on('updated_checkout', toggleVisibleFields);

        toggleVisibleFields();

      });
    })();
    </script>
    <?php
  }

  add_action( 'wp_footer', 'custom_question_conditional_javascript', 1000 );
}

从提交的POST请求中获取字段

您需要从php的$_POST数组中获取数据，并对其进行净化以防止SQL注入或其他恶意代码。我创建了一个帮助函数，它将通过提供的键在数组中获取所有字段，并使用WordPress的sanitize_text_field帮助函数进行净化。

在验证和添加文章元数据时，可以使用此帮助程序。

if( !function_exists( 'custom_checkout_question_get_field_values' ) ) {
  /**
   * Get all form field values based on user submitted post data
   *
   * @return Array Key/value pair of field values based on $_POST data
   */
  function custom_checkout_question_get_field_values() {
    $fields = [
      'custom_question_field'                       => '',
      'custom_question_text_codice_fiscale'     => '',
      'custom_question_text_p_iva'                => '',
      'custom_question_text_ragione_sociale'    => '',
    ];

    foreach( $fields as $field_name => $value ) {
      if( !empty( $_POST[ $field_name ] ) ) {
        $fields[ $field_name ] = sanitize_text_field( $_POST[ $field_name ] );
      } else {
        unset( $fields[ $field_name ] );
      }
    }

    return $fields;
  }
}

后端验证字段

验证很重要，因为前端不可信，用户很容易在前端修改必填字段。您可以使用Woocommerce的woocommerce_checkout_process操作来验证字段，并在不符合要求时添加错误消息。

if( !function_exists( 'custom_checkout_question_field_validate' ) ) {
  /**
   * Custom woocommerce field validation to prevent user for completing checkout
   *
   * @param Integer $order_id New order id
   */
  function custom_checkout_question_field_validate() {
    $field_values = custom_checkout_question_get_field_values();

    if ( empty( $field_values['custom_question_field'] ) ) {
      wc_add_notice( 'Please select an answer for the question.', 'error' );
    }

    if (
      $field_values['custom_question_field'] === 'privato_cittadino' &&
      empty( $field_values['custom_question_text_codice_fiscale'] )
    ) {
      wc_add_notice( 'Please enter codice fiscale.', 'error' );
    }

    if (
      $field_values['custom_question_field'] === 'azienda_professionista' &&
      empty( $field_values['custom_question_text_p_iva'] )
    ) {
      wc_add_notice( 'Please enter p iva.', 'error' );
    }

    if (
      $field_values['custom_question_field'] === 'azienda_professionista' &&
      empty( $field_values['custom_question_text_ragione_sociale'] )
    ) {
      wc_add_notice( 'Please enter ragione sociale.', 'error' );
    }

  }

  add_action( 'woocommerce_checkout_process', 'custom_checkout_question_field_validate' );
}

保存自定义文章元数据到订单

您可以使用woocommerce woocommerce_checkout_update_order_meta 操作来将附加的文章元数据保存到订单文章类型中。在这里，我们将使用上面创建的helper函数 custom_checkout_question_get_field_values 从php $ _POST 数组中获取所有字段，并在保存每个字段到文章元数据之前对其进行清理。

if( !function_exists( 'custom_checkout_question_field_save' ) ) {
  /**
   * Update order post meta based on submitted form values
   *
   * @param Integer $order_id New order id
   */
  function custom_checkout_question_field_save( $order_id ) {
    $field_values = custom_checkout_question_get_field_values();

    foreach( $field_values as $field_name => $value ) {
      if( !empty( $field_values[ $field_name ] ) ) {
        update_post_meta( $order_id, $field_name, $value );
      }
    }
  }

  add_action( 'woocommerce_checkout_update_order_meta', 'custom_checkout_question_field_save' );
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接