gpt4 book ai didi

Wordpress - 单选按钮结帐 woocommerce 显示/隐藏必填字段

转载 作者:行者123 更新时间:2023-12-03 08:04:09 25 4
gpt4 key购买 nike

我是意大利人(对不起我的英语),我不是程序员。

我需要在我的结帐 woocommerce 网站中插入一个带有两个选项的单选按钮来回答这个问题:“Sei un privato cittadino, un'azienda o un libero professionalista?”。
这些是选项:
1) Privato cittadino
2) Azienda o libero professionalista

当用户点击第一个选项时,它必须显示一个必填字段:“codice accountinge”。当用户点击第二个选项时,它必须显示两个必填字段:“P.Iva”和“Ragione sociale”。我在 form-b​​illing.php 中使用此代码创建了 radio 字段:

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

它工作正常,但现在我不知道如何像我描述的那样创建必填字段。
你能一步一步帮我吗?请考虑我不是程序员。

最佳答案

要回答这个问题,需要分 4 个步骤完成。

  • 将 4 个自定义字段添加到 woocommerce 结帐页面。您完成它的方式不是最佳实践,应该通过使用操作/过滤器来完成。
  • 在向后端发出请求时验证数据,这是为了确保用户实际选择并输入了所需的内容。
  • 将数据作为发布元数据保存到订单中,以便以后可以访问。
  • 实现 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 函数,它将输出一个 html script用一些 javascript 标记。然后将其附加到 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 );
    }

    从提交的帖子请求中获取字段

    您需要从 php $_POST 获取数据数组并对其进行清理以防止 sql 注入(inject)或其他恶意代码。我创建了一个辅助函数,它将通过数组中提供的键获取所有字段,并使用 wordpress sanitize_text_field 对其进行清理辅助功能。

    然后可以在验证和添加 post meta 时使用此帮助程序。
    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操作以将其他帖子元保存到订单帖子类型。这里我们将使用辅助函数 custom_checkout_question_get_field_values上面创建以从 php $_POST 获取所有字段数组并在将每个保存到 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' );
    }

    关于Wordpress - 单选按钮结帐 woocommerce 显示/隐藏必填字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39336970/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com