How can I get variable from php function and use it in wp_localize_script?

Question

I need to have dynamically created meta fields for WooCommerce product category. Almost everything works, just one thing leave to solve for me. I need to get dynamic $count variable from php and use it into javascript file. For this I am trying use wp_localize_script. Below is my function to enqueue scripts where I need to use $count variable.

function register_admin_scripts(){
    wp_enqueue_script('admin-scripts',  get_template_directory_uri() . '/js/admin-scripts.js', array('jquery'), true);
    wp_localize_script('admin-scripts','count', array('value'=>$here_i_need_count_variables));
}
add_action('admin_enqueue_scripts','register_admin_scripts');

And here is my function to register dynamic added meta fields in product category. And I need to get $count variable and use it in localize script above.

function product_edit_cat_meta_field($term) {
    $links = get_term_meta($term->term_id, 'links', true);
?>
    <tr>
        <td><?php
            $count = 0;
            if(is_array ($links)) {
                foreach($links as $link) {
                    if(isset($links)) {
                        printf('<span>
                            <input type="text" name="link[%1$s] value="%2$s" />
                            <input class="button remove" type="button" value="%3$s" />
                        </span>', 
                        $count, $link, __('Remove Link') );
                        $count = $count + 1;
                    }
                }
            } ?>
            <span id="addHere"></span>
            <input class="button add" type="button" value="Add Link">
        </td>
   </tr>
<?php
}
add_action( 'product_cat_edit_form_fields','product_edit_cat_meta_field', 40, 2 );

It is possible that it is something simple, but I stuck on this and I don't have idea how to figure it out. Any help would be appreciated.

Answer 1

Instead of passing count through wp_localize_script you should just handle the JS logic in JS. For example in JS:

var count = document.querySelectorAll( 'input[name^="link"]' ).length;

That would get the count of all input elements where the name attribute starts with link.

It would be more performant to scope the selector by adding a class to the span that is unique to your plugin or theme:

In your PHP:

                        printf('<span class="theme-name-term-input">
                            <input type="text" name="link[%1$s] value="%2$s" />
                            <input class="button remove" type="button" value="%3$s" />
                        </span>', 
                        $count, $link, __('Remove Link') );

Then the JS:

var count = document.querySelectorAll( '.theme-name-term-input' ).length;

This would also help protect against other plugins (or themes) which might add fields with similar naming constructs providing incorrect counts.

In most circumstances you need to update count as well in JS as things are added/removed. By doing the same query, you will get the updated count, or you can increment/decrement based on an action (like click).