I need a little help with a conditional statement

CMS > Custom Modules
1

I am in need of support for using liquid with a custom module. I just want to check if the module has items available. If not, display none. If so, display the block with the module in it. Any ideas will be much appreciated. Thank you

{% if this.mbar.items == '' %}
    <div class="scroll__slider" style="display:none;"></div>
{% else %}
    <div class="scroll__slider">
    <div class="text-slide">
        <div class="sliders text_scroll">
            <ul>
             {% component source: "Message Bar", layout: "List", filterBy: "Weighting", enablePagination: "false", collectionVariable: "mbar", type: "module" %}
            </ul>
        </div>
    </div>
</div>
{% endif %}
2

Hi @timrayl
Assuming mbar is the collectionVariable of your Custom Module, you should be able to do this:

{% if mbar.items.size > 0 %}
    ...
3

Hi Adam,
Thank you for getting back to me so quickly. For some unfathomable reason, the code is still showing the scroll__slider background and code with no module items active. When it should be displaying: <div class="scroll__slider" style="display:none;"></div>

4

Oh, sorry. I see the issue.
Your “Message Bar” component tag is within the conditional statement.
This cannot work. The component has to come first for the data to be available for the condition (Liquid is processed downstream).

One way to reconfigure this is to capture the component output above your condition and then insert it in your markup below:

{% capture mBarList %}
{% component source: "Message Bar", layout: "List", filterBy: "Weighting", enablePagination: "false", collectionVariable: "mbar", type: "module" %}
{% endcapture %}

{% if mbar.items.size == 0 %}
    <div class="scroll__slider" style="display:none;"></div>
{% else %}
    <div class="scroll__slider">
    <div class="text-slide">
        <div class="sliders text_scroll">
            <ul>
                {{mBarList}}
            </ul>
        </div>
    </div>
</div>
{% endif %}
5

Thank you Adam. I wish I knew a little more about liquid. I did a quick search in docs.webinone.com and found a small snippet: ‘To use HTML in your empty message, first capture it using a Liquid capture, then insert the capture variable into the emptyMessage parameter.’ It looks like you created a variable by combining the collectionVariable with the layout item. Why wouldn’t 'mbar.List ’ not work as a new variable? Thank you again for your knowledge.

6

I’m not sure exactly what you mean here, but using mbar.List would be trying to reference a JSON item within the mbar object - which doesn’t exist.
The mBarList variable I created (using the capture feature) is simply what I decided to call it. It could have been called anything.

You can also use the emptyMessage parameter, but it’s a little less flexible in this case.

1 Like
7

@timrayl @Adam.Wilson
I’m not quite sure if I get this right, but if I want a whole section of code not to show if a module I use inside the code has no items I would do this: I put the whole block of code in my list layout like this:

<div class="scroll__slider">
    <div class="text-slide">
        <div class="sliders text_scroll">
            <ul>
                {% for item in this.items %}
                <li>[Your list layout here, use "item." instead of "this."]</li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

And then call the module as collection:

{% component source: "Message Bar", layout: "List", filterBy: "Weighting", enablePagination: "false", object: "collection", type: "module" %}

This way the whole block only shows if the module renders any items. No conditional needed.

1 Like