Taxonomy Field of ACF shows all the terms by default with Parent Terms and Child terms. When using ACF Repeater Fields having Taxonomy Sub Fields, users need to show the dependent terms only. This type of functionality does not exist by default. Customize ACF Repeater having taxonomy fields to show parent terms and Child Terms separately.
We can manage to have this functionality by using the ACF filters and jQuery. To implement this, you must know the key name of every Taxonomy Subfield.
Let’s go with an example:
Taxonomy Name: Teacher Student Relation (teacher_student_relation)
Let’s say above taxonomy has the following data
Orignal Source:- ACF Repeater Fields
Teacher 1
- Student 1 T1
- Student 2 T1
- Student 3 T1
Teacher 2
- Student 1 T2
- Student 2 T2
- Student 3 T2
Repeater Field Name: Teacher Student Relationship
- Sub Field 1: Teacher (Taxonomy Field) (key: field_5d37e38c8a36b)
- Sub Field 2: Student (Taxonomy Field) (key: field_5d37e3b18d756)
Now By Default, ACF will display Taxonomy data with Parent and Child in both the subfields. We need to customize to show Parent Data on Sub Field 1 (Teacher) and Dependent Child Data on Sub Field 2 (Student) in a repeater field.
To customize we need to follow steps:
- create a jquery file to extend ACF jQuery
- Use a taxonomy filter to customize
- You must know the key name and the subfield name of the Sub Field
Below code will go into functions.php file:
/*Enqueue ACF Extended Jquery*/
function my_admin_enqueue_scripts() {
wp_enqueue_script( 'my-admin-js', get_template_directory_uri() . '/acf-jquery.js', array(), '1.0.0', true );
}
add_action('acf/input/admin_enqueue_scripts', 'my_admin_enqueue_scripts');
/*Enqueue ACF Extended Jquery*/
/*Filter to show only parent terms for the taxonomy based on acf field*/
/*Here `teacher` is the name (slug) of the sub field*/
function show_only_parent_callback( $args, $field, $post_id ) {
$args['parent'] = 0;
return $args;
}
add_filter('acf/fields/taxonomy/query/name=teacher', 'show_only_parent_callback', 10, 3);
/*Filter to show only dependent child of parent from first sub field for the taxonomy based on acf field*/
/*Here `student` is the name (slug) of the sub field*/
function show_only_second_level_child_callback( $args, $field, $post_id ) {
$ParentId = isset($_REQUEST['ParentId']) ? (int) $_REQUEST['ParentId'] : -1;
$args['parent'] = (int) $ParentId;
return $args;
}
add_filter( 'acf/fields/taxonomy/query/name=student', 'show_only_second_level_child_callback', 20, 3 );
Below code will go into jquery file:
if ( typeof acf != 'undefined' ) {
phc_send_parent_term_id_ajax_query();
phc_send_child_term_id_ajax_query();
}
function phc_send_parent_term_id_ajax_query() {
var fn_originalAjaxData = false;
var fn_ajaxDataWithParentId = function( e, i ) {
// Call the original args.ajax.data() function, which was stored in the element
var data = fn_originalAjaxData(e,i);
// Add the Product ID to the data
data.ParentId = jQuery(this).closest('.acf-row').find('td.acf-field-5d37e38c8a36b select').val();
return data;
};
// Whenever a select2 is initialized, inject our own custom ajax.data() function.
acf.add_filter( 'select2_args', function( args, $select, settings ) {
// Only apply to the "Variation" dropdowns
var select_is_variation = $select.attr('id').indexOf('field_5d37e3b18d756') >= 0;
if ( ! select_is_variation ) return args;
// Store the original ajax.data function for later
if ( fn_originalAjaxData === false ) {
fn_originalAjaxData = args.ajax.data;
}
// Overwrite the ajax.data function with one that will get the Product ID.
args.ajax.data = fn_ajaxDataWithParentId;
return args;
} );
}
With the help of myrepeater.net, you can conveniently proceed with the myrepeater network login.
To experience full control and access the wireless n wifi repeater, you can make the myrepeater network log in using the http:// myrepeater.net.
Manage your repeater’s settings via myrepeater.net.
Check out our Blog " How To Setup Wifi Repeater Manually Using Myrepeater? "
