Complex Conditions

Loops & Logic
#1

I have a list of divs that contain a field whose value is sometimes text, and sometimes a symbol like “✓” or “✗”.

I want to set up an If logic, if value = ✗, has one class, if value = ✓ has a different class.

But there’s more than just the 3 divs below - like 30 in each category. I’m sure I could do an If statement per line, but is there a way to leverage complex conditions to show the field content with the class attached, some sort of dynamic rule?

<Loop acf_repeater="plans">
  <div class="two">
    <Loop acf_group="basic">
        <div class="field"> <Field foo /> </div>
        <div class="field"> <Field bar /> </div>
        <div class="field"> <Field foobar /> </div>
      </Loop>
      <hr>
      <Loop acf_group="core_features">
        <div class="field"> <Field voo /> </div>
        <div class="field"> <Field bat /> </div>
        <div class="field"> <Field voobat /> </div>
   </loop>
  </div>
</loop>
#2

So I assume what you mean is that the value of each field (for example <Field foo />) could be either ✗ or ✓ and based on the value of that field, you want to change the class of the surrounding div. Is that right? Performance-wise I don’t think there would be any benefit to simplifying this since you’d need to run the conditional logic each time anyway. I’ve tried a bunch of approaches and while I’m convinced it would be possible to save all your fields (foo,bar,foobar,etc) to a list and then somehow loop through the list for each ACF group, I think it would probably involve a lot of repetitive setting of variables and would end up being inefficient. Maybe there’s a clean way, but I’ve spent a bit thinking about it anything is jumping out at me.

Edit: actually, this just came to me, but I’m not sure if there’s a performance tradeoff to doing it this way. I also haven’t tested this so you might have to troubleshoot my template. You could create a separate template (lets say the template is called group-item) with something like this that has conditional logic that works based on a local variable I’ve decided to call field_variable:

<If field="{Get local=field_variable}" is value="✓">
  <Set item_class>check</Set>
  <Else />
  <Set item_class>cross</Set>
</If>

<div class="field {Get item_class}">
  <Field name="{Get local=field_variable}" />
</div>

And then inside the loop in the template you shared earlier, you could just reference that template and set the field_variable local variable for each field name, like this:

<Loop acf_group="basic">
  <Template name="group-item" field_variable="foo" />
  <Template name="group-item" field_variable="bar" />
  <Template name="group-item" field_variable="foobar" />
</Loop>

That’s less repetitive than the 30+ If tags you initially suggested, but it might also not perform as well so you’ll want to use the Timer tag to compare approaches and see which one load faster. This would be even cleaner if instead of having to create a second L&L template you could just use a template variable, but I don’t think template variables allow you to pass local variables within them unfortunately.

2 Likes
#3

This works great! Not sure about timing, but will built it out and check.

Still trying to comprehend the If/Set/Get logic - the value actually has 4 options: ✓, ✗, ∞, and regular text. I’d like to style the first three, ‘check’, ‘cross’, and ‘infinite’, while the regular text will inherit.

Is this the best way of achieving this:

<If field="{Get local=field_variable}" is value="✓">
  <Set item_class>check</Set>
  <Else />
</If>
<If field="{Get local=field_variable}" is value="✗">
  <Set item_class>cross</Set>
  <Else />
</If>
<If field="{Get local=field_variable}" is value="∞">
  <Set item_class>infinite</Set>
  <Else />
</If>
#4

No need for the Else tag if you’re using three separate if tags. Else is mostly just for when you want something to happen when the logic of the If statement is false.

You could look into the Switch and When tags in the docs since that might make your template a little more concise, but that’s not a necessity.