Wordpress - 单选按钮结帐 woocommerce 显示/隐藏必填字段
Posted
技术标签:
【中文标题】Wordpress - 单选按钮结帐 woocommerce 显示/隐藏必填字段【英文标题】:Wordpress - radio button checkout woocommerce show/hide required field 【发布时间】:2017-01-13 04:49:15 【问题描述】:我是意大利人(对不起我的英语),我不是程序员。
我需要在结帐 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-billing.php 中使用此代码创建了无线电字段:
<div class="woocommerce-billing-fields">
<?php if ( wc_ship_to_billing_address_only() && WC()->cart->needs_shipping() ) : ?>
<h3><?php _e( 'Billing & 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; ?>
它工作正常,但现在我不知道如何创建我描述的必填字段。 你能帮我一步一步吗?请考虑我不是程序员。
【问题讨论】:
您可以查看此链接:cloudways.com/blog/custom-field-woocommerce-checkout-page 他们解释了如何使用插件或仅使用纯代码添加自定义字段。 我认为,有一个不错的高级插件可以满足您的所有要求,无需任何代码。 themehigh.com/product/woocommerce-checkout-field-editor-pro 【参考方案1】:要回答这个问题,需要分 4 个步骤完成。
-
向 woocommerce 结帐页面添加 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
操作将额外的帖子元数据保存到订单帖子类型。在这里,我们将使用上面创建的辅助函数 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' );
【讨论】:
以上是关于Wordpress - 单选按钮结帐 woocommerce 显示/隐藏必填字段的主要内容,如果未能解决你的问题,请参考以下文章
WooCommerce 结帐单选按钮,可根据特定项目小计设置百分比费用