基于单选按钮选择的woocommerce结帐条件字段 [英] woocommerce checkout conditional fields based on radio buttons choices
问题描述
在我的wordpress网站中,我需要在woocommerce结帐页面中添加一些条件字段.
In my wordpress website I need to add some conditional fields in the woocommerce checkout page.
我已经创建了2个字段,现在我需要根据另一个字段的选择显示一个字段.
I have already created the 2 fields and I now I need one field to show up based on the choices made on the other one.
字段名称(父字段): billing_checkbox_cf
栏位2的名称: billing_cf_in
Field one's name (the parent field): billing_checkbox_cf
Field two's name: billing_cf_in
基于" WooCommerce有条件自定义结帐字段"答案线程,这是我的代码:
Based on "WooCommerce conditional custom checkout fields" answer thread, here's my code:
add_action( 'woocommerce_after_checkout_form', 'cbi_cf_conditionally_hide_show', 6);
function cbi_cf_conditionally_hide_show() {
// if ( ICL_LANGUAGE_CODE !='it' ) return; // Only for Italy
$required = esc_attr__( 'required', 'woocommerce' );
?>
<script type="text/javascript">
(function($){
var required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>'; // Required html
$('#billing_cf_in_field').hide();
$('input#billing_checkbox_cf').change(function(){
if (this.checked) {
$('#billing_cf_in_field').fadeIn("fast", function(){
$(this).addClass("validate-required");
$('#billing_cf_in_field > label').append(required);
});
} else {
$('#billing_cf_in_field').fadeOut("fast", function(){
$(this).removeClass("validate-required");
$('#billing_cf_in_field > label > .required').remove();
});
}
$('#billing_cf_in_field').val('');
$('#billing_cf_in_field').removeClass("woocommerce-validated");
$('#billing_cf_in_field').removeClass("woocommerce-invalid woocommerce-invalid-required-field");
});
})(jQuery);
</script>
<?php
}
到目前为止,如果Field1"billing_checkbox_cf"是一个复选框,我可以使其工作.选中Field1后,我可以使Field2出现.
So far, I am able to make it work if Field1 "billing_checkbox_cf" is a checkbox. When Field1 is checked, I can make Field2 show up.
我想让Field1用作单选按钮(option1 | option2 | option3),并使Field2仅在用户的选择为option2时显示.
I'd like to make it work with Field1 being a radio button(option1|option2|option3) and make the Field2 show up only when the user's choice is option2.
但是我不是程序员,所以我无法处理单选按钮的情况.如何修改我的代码以使其正常工作?
But I am not a programmer and I am not able to deal with radio button conditions. How can I modify my code in order to make it work?
推荐答案
我设法使其正常运行.我在这里发布是为了对其他人有用
I've managed to make it work. I'm posting here in case it could be useful to others
add_action( 'woocommerce_after_checkout_form', 'cbi_cf_conditionally_hide_show', 6);
function cbi_cf_conditionally_hide_show() {
// if ( ICL_LANGUAGE_CODE !='it' ) return; // Only for Italy
$required = esc_attr__( 'required', 'woocommerce' );
?>
<script type="text/javascript">
(function($){
var required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>'; // Required html
$('#billing_cf_in_field').hide();
$('input[type=radio][name=billing_radiobox_cf]').change(function(){
if (this.value === 'option2') {
$('#billing_cf_in_field').fadeIn("fast", function(){
$(this).addClass("validate-required");
$('#billing_cf_in_field > label').append(required);
});
} else {
$('#billing_cf_in_field').fadeOut("fast", function(){
$(this).removeClass("validate-required");
$('#billing_cf_in_field > label > .required').remove();
});
}
$('#billing_cf_in_field').val('');
$('#billing_cf_in_field').removeClass("woocommerce-validated");
$('#billing_cf_in_field').removeClass("woocommerce-invalid woocommerce-invalid-required-field");
});
})(jQuery);
</script>
<?php
}
不幸的是,验证没有完全起作用,因为在发送表单时,如果未填写billing_cf_in_field,则该字段会正确显示为红色,但错误消息中未提及要填写的字段列表中的billing_cf_in_field.我将为此打开另一个线程.
Unfortunately, validation is not completely working, since when sending the form, in case billing_cf_in_field is not filled, the field becomes correctly red but the error message does not mention billing_cf_in_field in the list of fields to be fullfilled. I'll open another thread for this.
这篇关于基于单选按钮选择的woocommerce结帐条件字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!