0

I'm building a custom shortcode in Wordpress. Essentially what I want this to do is the following:

  1. Dynamically pull values from a group of Advanced Custom Fields
  2. Output those values into a javascript array, comma-separated

Where I'm getting stuck is that I can successfully run a loop over the group of fields and grab all the values and output them on a page. However, when I attempt to store them into a variable to be pulled into a javascript array ($v is stored in the output variable which is referenced in the urls array), it only returns one of those values.

How can I get all the values from the foreach ( $value as $v) to list inside of the urls array, with comma separation? Any help would be appreciated :)

add_shortcode('training-player', 'training_player');
// Add shortcode for Diagnostic media playlist
function training_player() {
  $author_id = get_the_author_meta('ID');
  $fields = acf_get_fields(405);
  if( $fields ) {
    echo '<div id="player"></div>';
    foreach( $fields as $field ) {
      $value = get_field( $field['name'], 'user_'. $author_id );
      if(!empty($value)) {
        if ($value) {
          foreach ( $value as $v) {
            echo $v;
          }
        }
      }
    }
    echo "
    <script src='https://luwes.github.io/vimeowrap.js/vimeowrap.js'></script>
    <script src='https://luwes.github.io/vimeowrap.js/vimeowrap.playlist.js'></script>
    <script>
      var output = '$v';
      console.log(output)
      vimeowrap('player').setup({
        urls: [
          output
        ],
        plugins: {
          'playlist':{}
        }
      });
    </script>
    ";
  }
}
  • Add $v_all = []; before foreach( $fields as $field ), replace foreach ( $value as $v) { ... } with $v_all[] = implode(',', $value);, and above echo add $v = implode(',', $v_all);. – nmr Apr 30 at 16:11
  • Shortcodes should return content instead of displaying it. – nmr Apr 30 at 16:13
  • @nmr This worked perfectly. Read up on implode after you and the previous poster mentioned it - understanding this a bit more. One last question. What if you wanted to wrap each individual value in quotes. How would you do that? – Noah Apr 30 at 16:23
  • array_reduce or array_walk. For example: array_walk( $value, function(&$item) { $item = '"' . $item . '"'; } ); added before $v_all[] = implode(',', $value);. – nmr Apr 30 at 16:35
  • @nmr Awesome, that did the trick. You're the best! I think the only thing left for me to figure out is the output variable not being being parsed correctly when it's brought into the JSON. – Noah Apr 30 at 17:23
0

This is not really a Wordpress question. However you probably need the implode php function, using a comma as glue.

foreach( $fields as $field ) {
  $value = get_field( $field['name'], 'user_'. $author_id );
  if(!empty($value)) {
    if ($value) {
      $v = implode(',', $value);
    }
  }
}
  • Thanks so much! Sorry, was thinking in context to Wordpress. Implemented your suggestion. When I echo $v from that last if statement, it returns two values, not comma separated. If I console log $v from that last if statement, it only returns the last of those values. Why would that be happening? – Noah Apr 30 at 16:10
0

This might get your desired output:

<?php
add_shortcode('training-player', 'training_player');
// Add shortcode for Diagnostic media playlist
function training_player() {
    $author_id = get_the_author_meta('ID');
    $fields    = acf_get_fields(405);
    $js_values = [];

    if( $fields ) {
        echo '<div id="player"></div>';
        foreach( $fields as $field ) {
            $value = get_field( $field['name'], 'user_'. $author_id );

            if(!empty($value)) {
                if ($value) {
                    foreach ( $value as $v) {
                        $js_values[] = $v;
                    }
                }
            }
        }

        echo "
<script src='https://luwes.github.io/vimeowrap.js/vimeowrap.js'></script>
<script src='https://luwes.github.io/vimeowrap.js/vimeowrap.playlist.js'></script>
<script>
var output = " . wp_json_encode( $js_values ) . ";
console.log(output)
vimeowrap('player').setup({
urls: [
output
],
plugins: {
'playlist':{}
}
});
</script>
";
    }
}

We're storing the value of $v in the $js_values array, and then outputting it in a format workable with Javascript using wp_json_encode instead of trying to directly put it into Javascript.

For future reference, you may want to look at [wp_localize_script](https://developer.wordpress.org/reference/functions/wp_localize_script/) for getting values from PHP to Javascript "the WordPress way", and enqueue the rest of your JS using [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script), but that's beyond the scope of this answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.