Shortcode + Dynamic tag bug

Loops & Logic
#1

I found a bug that if you try to render a dynamic tag inside of the shortcode tag, it won’t render (at least inside of a <Loop> which is how I used it).

<Loop type=fl-builder-template taxonomy=fl-builder-template-category terms=home-hero-slider orderby=menu_order order=asc>
    <div><Shortcode fl_builder_insert_layout id="{Field id}"/></div>
</Loop>

If you just type in the ID into the field, then it renders. And if you just do the shortcode inside the <Shortcode></Shortcode> tag, it also renders. But if you want to add a dynamic tag (post id in this case) inside of a shortcode, then it won’t render.

-Zack

#2

@zack I figured I’d add a note to this thread with a key bit of info you sent me about this issue via DM earlier, and that is that when you replace id="{Field id}" with id="12345" (any actual ID of a template post) your shortcode works as expected, so the issue here doesn’t seem to be the shortcode itself at first glance.

One other thing that might be helpful in troubleshooting this: could you confirm that if you just place <Field id /> inside your loop it outputs the expected ID number? I’m assuming it does based on your experience with the language, but for the sake of cutting out everything that isn’t the issue here, I thought it might be good to confirm.

#3

Correct. The dynamic portion of the <Shortcode> tag is the broken part. I can render the shortcode with a hardcoded id.

And yes, if I output the ID field in the loop, I get the expected ID.

#4

#5

Hey @zack!
I’ve run some tests and indeed it is a bug, I’ve let the devs know and I will follow up here when I have some news.

#6

Hi Zack! I think this is specific to this particular shortcode, since I’ve successfully passed dynamic data to plenty of shortcodes, even ones inside loops, and I’ve just tested to make sure that still works in the current plugin version.

I’ve found a workaround though, and here’s the magic snippet:

<Loop type=fl-builder-template taxonomy=fl-builder-template-category terms=home-hero-slider>
  <Set saved_id><Get saved_id />,<Field id /></Set>
</Loop>

<Shortcode fl_builder_insert_layout id="{Get saved_id}" type=fl-builder-template />

Normally I would use the <List> tag to create an array of IDs, but the BB shortcode doesn’t like json array formatting (makes sense) so instead I’m appending the ID of each loop iteration to a variable, and then passing the variable to the shortcode (luckily it seems to handle a comma-separated list just fine)

Let me know if this approach works for you!

#7

@julia Thanks for testing this out! That works, but not in the way I need it. Unfortunately I don’t understand the method you used, so I’m having a hard time getting it to output what I need.

What I’m ultimately doing is outputting those shortcodes inside of a slider (each shortcode is a slide). I’m using slick slider, so in my case, each shortcode needs to be wrapped in a <div>.

So this is my actual code:

<div class="slick-track">
  <Loop type=fl-builder-template taxonomy=fl-builder-template-category terms=home-hero-slider orderby=menu_order order=asc>
   <Set saved_id><Get saved_id />,<Field id /></Set>
  </Loop>
  <Shortcode fl_builder_insert_layout id="{Get saved_id}" type=fl-builder-template />
</div>

Which is outputting a list of all the shortcodes one after another. But each shortcode needs to be wrapped its own <div>… Thoughts?

The output needs to look like this:

<div class="slick-track">
    <div>[fl_builder_insert_layout id=1]</div>
    <div>[fl_builder_insert_layout id=2]</div>
    <div>[fl_builder_insert_layout id=3]</div>
</div>

Hence the original code I was trying:

<Loop type=fl-builder-template taxonomy=fl-builder-template-category terms=home-hero-slider orderby=menu_order order=asc>
    <div><Shortcode fl_builder_insert_layout id="{Field id}"/></div>
</Loop>
#8

Ah, so that div was more important than I thought!

<div class="slick-slider">
  <List saved_ids>
    <Loop type=fl-builder-template taxonomy=fl-builder-template-category terms=home-hero-slider>
      <Item><Field id /></Item>
    </Loop>
  </List>
  <Loop list=saved_ids>
    <div class="element">
      <Shortcode fl_builder_insert_layout id="{Field}" type=fl-builder-template />
    </div>
  </Loop>
</div>

I’ve switched to using a list to save the IDs output by the post loop, and now I’m using a list loop around the shortcode (which is rendering properly in my tests, so the issue is really limited to putting it in post loops)

1 Like
#9

Thank you. I appreciate the creative workaround!

The div would not have been so important except for the fact that the BB shortcode outputs more than one div (one that holds the style and one that holds the content). So they need to be wrapped in another div so the slider knows that they are one slide and not two.

1 Like
#10

I’m curious though why that worked…? haha

The fl_builder_insert_layout <Shortcode> is still inside of a loop and being fed a dynamic id…