How to customize ACF Repeater having taxonomy fields to show parent terms and Child Terms separately?

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.

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:
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;
    } );
}

Leave a Comment

Your email address will not be published. Required fields are marked *