Cms: If conditionals in antlers are not working appropriately

Created on 9 Feb 2020  路  24Comments  路  Source: statamic/cms

Okay I believe my last issue has probably the same problem. I don't now why some if statements in my antlers template are not working. Further below you can see that I tested a if statement with "first". If it's the first index it should be active. My dump of first shows the correct values for each index. But when I try to wrap this into a conditional the value is suddenly not being reconized anymore.
My dump:
dump
My if statemennt test:
Screenshot
My template:

{{ if progress }}
    <!-- Progress bar
    ============================================= -->
    <div class="flex flex-wrap justify-around relative text-center">
        {{ progress }}
            {{ first | dump }}
            {{ if first }}
                ACTIVE
            {{ /if }}
            <!-- Progress step
            ============================================= -->
            <div class="progress-step flex flex-col flex-1 items-center cursor-pointer{{ first ? ' active' : '' }}"
                 tabindex="0" role="button" data-progress-step="{{ index | add:1 }}">
                <div class="flex items-center justify-center relative">
                    <span class="absolute text-3xl text-primary-500 font-extrabold leading-none mt-px pt-px -ml-px">
                        {{ index | add:1 }}
                    </span>
                    <img class="{{ first ? 'hidden' : '' }}"
                         src="{{ glide src='/assets/layout/progress-step-bg.png' width='85' }}"
                         srcset="{{ glide src='/assets/layout/progress-step-bg.png' width='85' }} 1x,
                                 {{ glide src='/assets/layout/progress-step-bg.png' width='170' }} 2x"
                         alt="Progress step background" />
                    <img class="{{ !first ? 'hidden' : '' }}"
                         src="{{ glide src='/assets/layout/progress-step-active-bg.png' width='85' }}"
                         srcset="{{ glide src='/assets/layout/progress-step-active-bg.png' width='85' }} 1x,
                                 {{ glide src='/assets/layout/progress-step-active-bg.png' width='170' }} 2x"
                         alt="Progress step active background" />
                </div>
                <h4 class="text-primary-500">{{ step_title }}</h4>
            </div>
        {{ /progress }}
    </div>
    <div class="flex flex-wrap">
        {{ progress }}
            <!-- Progress content
            ============================================= -->
            <div class="{{ !first ? 'hidden ' : 'active' }}"
                 id="progressContent{{ index | add:1 }}">
            </div>
        {{ /progress }}
    </div>
{{ /if }}
bug critical

All 24 comments

Real quick before we get into it, are you on the very latest beta version? We鈥檝e been making a lot of changes to the parser and want to make sure you鈥檙e up to date.

Yes I am on v3.0.0-beta.14.

It鈥檚 possible we鈥檝e fixed it on master, we can check against the latest tag.

Im seeing the same thing, specifically if statements within collections or other loops such as replicator fields.

Got the same issue everywhere I'm using a toggle inside a Replicator or Grid. Even though the value is true the if statement doesn't recognize it.
Example where it never reach into the open statement:

{{ if openhours }}
    {{ openhours }}
        <p>
        {{ days }}
        {{ if open }} 
            <span>{{ open_from }} - {{ open_to }}</span>
        {{ else }} 
            Closed 
        {{ /if }}
        </p>
    {{ /openhours }}
{{ /if }}

openhours is a Grid
open is a toggle

What鈥檚 days? An array? You never close the tag pair.

Just a text field

Having a similar issue

{{ multiple_days }} // will print 1 in the view
{{ if multiple_days }}
    Yes
{{ else }} // will always print nooo
    nooo
{{ /if }}

From my Entry

multiple_days: true

I did try workarounds like
I did try if multiple_days == 1 as well and if multiple_days == true

No luck yet.

I can't recreate this on master. We're releasing beta-16 right now - can someone test your broken case after the update?

The antlers tag seems to work now when on its own. Before the antlers tag as written above, i do have globals and svg tags in place.

As I found out by commenting out different parts of my layout, the globals seem to make the trouble.

<a class="fill-current mr-3" target="_blank" href="{{ settings:webcam }}">{{ svg src='webcam' }}</a>
<!-- the antlers if statement comes down here ... -->

When deleting the global settings:webcam, everything is working as expected. So the combination of globals and conditions seems to be problematic?

The output of the global settings:webcam is correct.

Having the SVG tags in its own partial does resolve the problem temporarily.

I think it should be possible having globals and conditionals in the same partial, though.

The fields that aren't working in conditions... are they inside a replicator/grid/bard? Inside another replicator/grid/bard? etc?

        {{ collection:news }}
        {{ first }} // 1
        {{ if first }}
        FIRST
        {{ /if }}
        {{ if first == 1 }}
        FIRST
        {{ /if }}
        {{ if first == true }}
        FIRST
        {{ /if }}
        {{ if first == "1" }}
        FIRST
        {{ /if }}
        {{ if first == "true" }}
        FIRST
        {{ /if }}
        {{ title }}
        {{ /collection:news }}

Same with cout==1, limit="1" gives no entries.
Inside the dump are first, last, count, etc. shown correctly.

In my case above they are inside of replicator and a bard. But it also does not work in my contact form anymore, when I try to get the type of my fields. It only works when I remove all the global tags that come before the if statements in the same template. Below you can see my contact form code and the results I get when I remove the global tags.
This also happens in my other templates, but the problem does not get solved by removing some global tags beforehand. (https://github.com/statamic/cms/issues/1320)
Screenshot
Screenshot 2

{{ form:create in="contact" }}
    <input class="hidden" name="honeypot" value="">
    {{ if errors || success }}
        {{ partial:components/alert }}
    {{ /if }}
    {{ fields }}
        {{ if type == 'text' }}
            <div class="mb-4 max-w-md relative text-secondary-500">
                <input class="input font-light bg-gray-100 border border-l-3 border-{{ error ? 'red' : 'gray' }}-400 appearance-none rounded w-full px-3 py-3 pt-5 pb-2 focus:border-primary-600 focus:outline-none active:outline-none active:border-primary-600"
                       id="{{ handle }}"
                       name="{{ handle }}"
                       type="{{ handle == 'email' ? 'email' : 'text' }}"
                       value="{{ old }}"
                       autofocus
                       {{ validate | contains:'required' ? 'required' : '' }}>
                <label for="{{ handle }}"
                       class="label absolute mb-0 -mt-1 pt-2 leading-tighter text-gray-800 text-base cursor-text"
                       style="padding-left:18px">
                    {{ display }}{{ validate | contains:'required' ? '*' : '' }}:
                </label>
            </div>
        {{ elseif type == 'textarea' }}
            <div class="mb-4 max-w-lg relative text-secondary-500">
                <textarea class="input font-light bg-gray-100 border border-l-3 border-{{ error ? 'red' : 'gray' }}-400 appearance-none rounded w-full px-3 py-3 pt-5 pb-2 focus:border-primary-600 focus:outline-none active:outline-none active:border-primary-600"
                          id="{{ handle }}"
                          type="{{ handle == 'email' ? 'email' : 'text' }}"
                          rows="2"
                          autofocus
                          {{ validate | contains:'required' ? 'required' : '' }}>{{ old }}</textarea>
                <label for="{{ handle }}"
                       class="label absolute mb-0 -mt-1 pt-2 leading-tighter text-gray-800 text-base cursor-text"
                       style="padding-left:18px">
                    {{ display }}{{ validate | contains:'required' ? '*' : '' }}:
                </label>
            </div>
        {{ elseif type == 'checkboxes' }}
            {{ options }}
                <div class="flex flex-wrap max-w-lg -mt-1 mb-4 text-secondary-500">
                    <label class="label-checkbox w-full flex" for="{{ handle }}">
                        <input id="{{ handle }}" name="{{ handle }}" type="checkbox" class="hidden" value="1" {{ validate | contains:'required' ? 'required' : '' }}>
                        <span class="checkbox"></span>
                        <span class="select-none text-sm md:text-base pr-2">
                                                        {{ gdpr }}
                                                    </span>
                    </label>
                </div>
            {{ /options }}
        {{ /if }}
    {{ /fields }}
    <button class="btn btn-primary btn-triangle">{{ general:submit }}</button>
{{ /form:create }}

Have another example of this on the latest beta, this is in a nested structure where I'm just checking the title against a string.

{{ children }}
    <li class="mb-1 border-l-2 border-gray pl-4 sm:border-0 sm:pl-0">
        <a class="text-purple sm:text-darkgray hover:text-purple flex items-center" href="{{ url }}">
            {{ if title == 'Facebook' }}<svg .../></svg>{{ /if }}
            {{ if title == 'Twitter' }}<svg .../></svg>{{ /if }}
            {{ if title == 'LinkedIn' }}<svg .../></svg>{{ /if }}
            {{ title }}
        </a>
    </li>
{{ /children }}

None of the {{ if }} tags seem to be working.

If I dump the page it seems like it's an instance of a Value object, and not just a string, this was working in an earlier beta, although I can't remember when it stopped working.

image

Using {{ title | ddd }} however shows a string as expected

image

It's looking like it's that template-too-big issue.

When you run into this issue, how big is the template/partial with the if statement? How many lines?

My footer.antlers.html is about 87 lines

In vendor/statamic/cms/src/View/Antlers/Parser.php at line 96 see if changing the number to -1 fixes your issue.

Yes, that fixes it!

Anyone else in this thread, try that please.

That's obviously not the solution, but it would confirm the problem.

If it causes the page to hang, try just making the number bigger, like 20 million, instead of -1.

yep that's it!

Yup. What they said.

This issue appears to be a result of the view being too large for the template parser to handle.

Try to split your view into more manageable chunks using partials.

For example, instead of:

{{ if something }}
  100 lines of templating
{{ /if }}

{{ if somethingelse }}
  Another 100 lines
{{ /if }}

Do this:

{{ if something }}
  {{ partial:something }}
{{ /if }}

{{ if somethingelse }}
  {{ partial:somethingelse }}
{{ /if }}

In the next release, you will see an error rather than things just silently failing.

image

Until know, the most problems are solved, but I can't test all bugs atm. But this helps a lot, thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

skoontastic picture skoontastic  路  4Comments

jelleroorda picture jelleroorda  路  3Comments

austenc picture austenc  路  3Comments

ReneWeCode picture ReneWeCode  路  3Comments

andrewying picture andrewying  路  4Comments