Sascha,
ACF has many hooks to add custom functionality. I put something together which will apply a basic counter on all relationship fields. Looks like this: https://vimeo.com/259429957/f653eae345.
In order to implement, put the following in your theme functions.php file.
function my_acf_relationship_counter( $field ) {
echo '<p class="acf-relationship-counter alignright"></p>';
}
add_action( 'acf/render_field/type=relationship', 'my_acf_relationship_counter', 1, 1 );
function my_acf_admin_enqueue_scripts() {
// register style
wp_enqueue_style( 'my-acf-input-css', get_stylesheet_directory_uri() . '/css/my-acf-input.css', false, '1.0.0' );
// register script
wp_enqueue_script( 'my-acf-input-js', get_stylesheet_directory_uri() . '/js/my-acf-input.js', false, '1.0.0' );
}
add_action( 'acf/input/admin_enqueue_scripts', 'my_acf_admin_enqueue_scripts' );
Under your theme/js/my-acf-input.js
jQuery(document).ready(function() {
// Run on relationship update
jQuery('.acf-field-relationship').change(function() {
selected_count = jQuery(this).find(".values li").length;
jQuery(this).find(".acf-relationship-counter").text(selected_count + " items");
});
// Run on startup
jQuery(".acf-field-relationship").each(function() {
selected_count = jQuery(this).find(".values li").length;
jQuery(this).find(".acf-relationship-counter").text(selected_count + " items");
});
});
Under your theme/css/my-acf-input.css
.acf-field-relationship .acf-relationship-counter {
position: absolute;
right: 0;
top: -42px;
}
