仅在 Caldera 表单电话字段中显示特定国家 - PHP (1)

📌 相关文章

📜 仅在 Caldera 表单电话字段中显示特定国家 - PHP (1)

📅 最后修改于: 2023-12-03 15:21:51.277000 🧑 作者: Mango

仅在 Caldera 表单电话字段中显示特定国家 - PHP

在 Caldera 表单中，我们要如何让电话字段只显示特定国家呢？以下是一个简单的 PHP 代码片段，可以在实现此功能。

步骤：

首先，我们需要给 Caldera 表单中的电话字段添加一个 CSS 类名，以便我们可以通过 jQuery 来选择该元素。可以使用以下代码向电话字段中添加一个名为 'caldera-field-phone' 的类名：

add_filter( 'caldera_forms_render_field', function( $field_markup, $field_id, $form_id ){
    if( 'phone' === $field_id ){
        $field_markup = str_replace( "<input", "<input class='caldera-field-phone'", $field_markup );
    }
    return $field_markup;
}, 10, 3);

接下来，我们需要添加一个 jQuery 代码段，来根据用户所在的国家，控制显示哪些电话号码区域码。可以使用以下代码将自定义的 'caldera-only-country' 类名添加到电话号码区域码选择器中，并相应地添加“只在特定国家显示”的代码逻辑。

// 为用户所在的国家自动添加电话区号
add_action('wp_footer', 'add_phone_area');
function add_phone_area() {
?>
<script type="text/javascript">
    jQuery(function( $ ){
        // 只有当电话字段和所在国家都存在时才进行操作
        if( $('.caldera-field-phone').length && typeof window.geoip_country_code !== 'undefined' ) {

            // 定义哪些国家只显示其本身的电话号码区号
            var country_codes = [ 'US', 'CA', 'MX' ];

            // 定义其他国家默认显示电话号码区号
            var default_area_code = '+86';

            // 如果用户属于某些指定国家，则只显示该国家的电话号码区号。
            if( $.inArray( window.geoip_country_code, country_codes ) !== -1 ) {
                var area_code = '+' + window.geoip_country_code.toLowerCase();
            }

            // 否则，显示默认电话号码区号。
            else {
                var area_code = default_area_code;
            }

            // 将自定义类名添加到电话号码区号选择器中，并根据所在国家的不同设置不同的区号
            $("select[name$='[tel_prefix]'] option").addClass('caldera-only-country').each( function(){
                if( $(this).val() == area_code ) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            
            // 当用户选择不同的国家时，也需要即时更新电话号码区号
            $('body').on( 'change', '.caldera-only-country', function(){
                $('.caldera-field-phone').val( $(this).val() );
            });
        }
    });
</script>
<?php
}

以上就是如何实现在 Caldera 表单电话字段中只显示特定国家的完整代码。可以根据需要自由调整特定国家（country_codes）和默认区号（default_area_code）。

注意：在代码中，我们使用了 wp_footer 钩子来添加 jQuery 代码。如果你的主题中已经定义了此钩子，请将此代码块添加到主题的 functions.php 文件中。

仅在 Caldera 表单电话字段中显示特定国家 - PHP

步骤：

参考资料