If, elsif, else: Limitations? Liquid

906 views Asked by At

Trying to create an if, elseif statement using the Liquid Templating Ruby engine It appears to be coded correctly but I am not experiencing the results I am expecting.

Im expecting when a user clicks on a collection (MLB, NBA, etc) the {% collection.handle contains "mlb" %} will trigger and its respective code block will come into play.

Is there anything that jumps out to anyone as incorrect with this if statement?

<div class="carousel-wrap">

<!-- College Slider -->

{% if page.handle or collection.handle contains "collegiate" %}
<div style="margin-bottom:10px;" class="teams-carousel clearfix" id="ncaa-carousel">
<ul class="items clearfix">
    {% for link in linklists.team-carousel.links %}
        <li>
            {% capture src %}team-{{ link.title | handleize }}.png{% endcapture %}
            <a href="{{ link.url }}" style="background-image: url('{{ src | asset_url }}');"></a>
        </li>
    {% endfor %}
</ul>
</div>

{% elsif collection.current_type or collection.handle contains "mlb" %}

<!-- MLB Slider -->


<div style="margin-bottom: 10px; display: block !important;" class="teams-carousel" id="mlb-carousel">
<ul class="items clearfix">
    {% for link in linklists.mlb.links %}
        <li>
            {% capture src %}team-{{ link.title | handleize }}.png{% endcapture %}
            <a href="{{ link.url }}" style="background-image: url('{{ src | asset_url }}');"></a>
        </li>
    {% endfor %}
</ul>
</div>

{% elsif collection.current_type or collection.handle contains "nba" %}

<!-- NBA Slider -->

<div style="margin-bottom:10px;" class="teams-carousel clearfix" id="nba-carousel">
<ul class="items clearfix">
{% for link in linklists.nba-team-carousel.links %}
        <li>
            {% capture src %}team-{{ link.title | handleize }}.png{% endcapture %}
            <a href="{{ link.url }}" style="background-image: url('{{ src | asset_url }}');"></a>
        </li>
    {% endfor %}
</ul>
</div>

{% elsif collection.current_type or collection.handle contains "nhl" %}

<!-- NHL Slider -->

<div style="margin-bottom:10px;" class="teams-carousel clearfix" id="nhl-carousel">
<ul class="items clearfix">
    {% for link in linklists.nhl.links %}
        <li>
            {% capture src %}team-{{ link.title | handleize }}.png{% endcapture %}
            <a href="{{ link.url }}" style="background-image: url('{{ src | asset_url }}');"></a>
        </li>
    {% endfor %}
</ul>
</div>

{% elsif collection.current_type or collection.handle contains "mls" %}

<!-- MLS Slider -->

<div style="margin-bottom:10px;" class="teams-carousel clearfix" id="mls-carousel">
<ul class="items clearfix">
    {% for link in linklists.mls.links %}
        <li>
            {% capture src %}team-{{ link.title | handleize }}.png{% endcapture %}
            <a href="{{ link.url }}" style="background-image: url('{{ src | asset_url }}');"></a>
        </li>
    {% endfor %}
</ul>
</div> 

{% endif %}
</div>
1

There are 1 answers

0
Shadowen On

Im expecting when a user clicks on a collection (MLB, NBA, etc) the {% collection.handle contains "mlb" %} will trigger and its respective code block will come into play.

and

I was trying to make it so when a user clicks on a certain collection (MLB, NBA) they are shown the code block (slider) contained in the if statement

make me think that you want content to display when a user clicks (on something). If that's the case, you're going to need JavaScript, not Liquid. Liquid evaluates (everything) and generates a static page. The page (effectively) doesn't change after you hit "save". So Liquid content can't be appearing and disappearing.

However, you can show/hide this content very easily with JavaScript using JQuery.